<template>
	<el-container style="height: 100vh;">
		<!-- 顶部标题 -->
		<el-header style="background-color: #A8B9C9; color: #F2F8FE; text-align: center; font-size: 24px; padding: 20px;">
			快递员中心
		</el-header>

		<el-container>
			<!-- 左侧菜单栏 -->
			<el-aside width="250px" style="background-color: #f4f6f9;">
				<el-menu :default-active="currentTab" class="el-menu-vertical-demo" @select="handleTabChange">
					<el-menu-item index="toDeliver">待配送订单</el-menu-item>
					<el-menu-item index="history">历史订单</el-menu-item>
				</el-menu>
			</el-aside>

			<!-- 主内容区域 -->
			<el-main style="padding: 20px;">
				<!-- 待配送订单 -->
				<el-row v-if="currentTab === 'toDeliver'" class="order-card">
					<h3>待配送订单</h3>
					<div class="button-container">
						<el-button type="primary" @click="openAddOrderDialog" class="btn">新增订单</el-button>
					</div>
					<el-table :data="toDeliverOrders" border stripe>
						<el-table-column prop="id" label="订单编号" width="180" />
						<el-table-column prop="receiver" label="收件人" width="180" />
						<el-table-column prop="address" label="地址" />
						<el-table-column prop="status" label="状态" width="120" />
						<el-table-column label="操作" width="180">
							<template #default="{ row }">
								<el-button v-if="row.status === '待取件'" type="primary" size="small"
									@click="updateStatus(row, '配送中')">开始配送</el-button>
								<el-button v-if="row.status === '配送中'" type="success" size="small"
									@click="updateStatus(row, '已完成')">完成配送</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-row>

				<!-- 历史订单 -->
				<el-row v-if="currentTab === 'history'" class="order-card">
					<h3>历史订单</h3>
					<el-table :data="historyOrders" border stripe>
						<el-table-column prop="id" label="订单编号" width="180" />
						<el-table-column prop="receiver" label="收件人" width="180" />
						<el-table-column prop="address" label="地址" />
						<el-table-column prop="status" label="状态" width="120" />
						<el-table-column prop="deliveryTime" label="配送时间" width="180" />
						<el-table-column label="操作" width="180">
							<template #default="{ row }">
								<el-button type="danger" size="small" @click="deleteHistoryOrder(row)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-row>

			</el-main>

			<!-- 新增订单对话框 -->
			<el-dialog title="新增订单" v-model="addOrderDialogVisible" width="400px" align-center>
				<el-form :model="newOrder" ref="newOrderForm" label-width="100px">
					<el-form-item label="订单编号">
						<el-input v-model="newOrder.id" placeholder="请输入订单编号" />
					</el-form-item>
					<el-form-item label="收件人">
						<el-input v-model="newOrder.receiver" placeholder="请输入收件人" />
					</el-form-item>
					<el-form-item label="地址">
						<el-input v-model="newOrder.address" placeholder="请输入地址" />
					</el-form-item>
					<el-form-item label="状态">
						<el-select v-model="newOrder.status" placeholder="请选择状态">
							<el-option label="待取件" value="待取件" />
							<el-option label="配送中" value="配送中" />
							<el-option label="已完成" value="已完成" />
						</el-select>
					</el-form-item>
				</el-form>
				<el-row slot="footer" class="dialog-footer">
					<el-button @click="addOrderDialogVisible = false">取消</el-button>
					<el-button type="primary" @click="addOrder">确定</el-button>
				</el-row>
			</el-dialog>
		</el-container>
	</el-container>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	// State
	const currentTab = ref('toDeliver');
	const addOrderDialogVisible = ref(false); // 控制新增订单对话框的显示
	const newOrder = ref({
		id: '',
		receiver: '',
		address: '',
		status: '待取件'
	});

	const toDeliverOrders = ref([{
			id: '001',
			receiver: '李四',
			address: '北京市朝阳区',
			status: '待取件'
		},
		{
			id: '002',
			receiver: '王五',
			address: '北京市海淀区',
			status: '待取件'
		},
		{
			id: '003',
			receiver: '赵六',
			address: '北京市昌平区',
			status: '配送中'
		}
	]);

	const historyOrders = ref([{
			id: '004',
			receiver: '孙七',
			address: '北京市东城区',
			status: '已完成',
			deliveryTime: '2024-10-10 14:00'
		},
		{
			id: '005',
			receiver: '周八',
			address: '北京市西城区',
			status: '已完成',
			deliveryTime: '2024-10-12 15:30'
		}
	]);

	// Methods
	const updateStatus = (order, newStatus) => {
		const orderIndex = toDeliverOrders.value.findIndex(o => o.id === order.id);
		if (orderIndex !== -1) {
			toDeliverOrders.value[orderIndex].status = newStatus;
			if (newStatus === '已完成') {
				historyOrders.value.push({
					...toDeliverOrders.value[orderIndex],
					deliveryTime: new Date().toLocaleString()
				});
				toDeliverOrders.value.splice(orderIndex, 1);
			}
		}
	};

	const deleteHistoryOrder = (order) => {
		const index = historyOrders.value.findIndex(o => o.id === order.id);
		if (index !== -1) {
			historyOrders.value.splice(index, 1);
		}
	};

	const handleTabChange = (index) => {
		currentTab.value = index;
	};

	const openAddOrderDialog = () => {
		addOrderDialogVisible.value = true;
	};

	const addOrder = () => {
		if (newOrder.value.id && newOrder.value.receiver && newOrder.value.address) {
			toDeliverOrders.value.push({
				...newOrder.value
			});
			newOrder.value = {
				id: '',
				receiver: '',
				address: '',
				status: '待取件'
			}; // 清空表单
			addOrderDialogVisible.value = false; // 关闭对话框
		} else {
			alert('请填写完整订单信息');
		}
	};
</script>

<style scoped>
	.btn {
		margin-left: 1200px;
	}

	.order-card {
		margin-top: 20px;
	}

	.el-table th {
		background-color: #f2f3f5;
		text-align: center;
	}

	.el-table td {
		text-align: center;
	}

	.el-menu-vertical-demo {
		margin-top: 20px;
	}

	.el-menu-item {
		font-size: 16px;
	}

	.el-button {
		margin-top: 5px;
	}

	.dialog-footer {
		text-align: right;
	}

	.button-container {
		text-align: right;
		margin-bottom: 10px;
	}
</style>