<template>
	<div class="trade-operation-order">
		<el-card shadow="hover">
			<template #header
				><div class="card-header"><span>订单管理</span></div></template
			>
			<div class="order-list">
				<el-card>
					<template #header><div class="card-header">订单列表</div></template>
					<div class="search-container">
						<el-form :model="searchParams" :inline="true" class="search-form">
							<el-form-item label="订单号"><el-input v-model="searchParams.orderNo" placeholder="请输入订单号" clearable /></el-form-item>
							<el-form-item label="商品名称"><el-input v-model="searchParams.productName" placeholder="请输入商品名称" clearable /></el-form-item>
							<el-form-item label="订单状态"
								><el-select v-model="searchParams.status" placeholder="选择订单状态"
									><el-option v-for="option in statusOptions" :key="option.value || 'all'" :label="option.label" :value="option.value" /></el-select
							></el-form-item>
							<el-form-item label="时间范围"
								><el-date-picker
									v-model="searchParams.dateRange"
									type="daterange"
									range-separator="至"
									start-placeholder="开始日期"
									end-placeholder="结束日期"
									value-format="YYYY-MM-DD"
							/></el-form-item>
							<el-form-item
								><el-button type="primary" @click="handleSearch">查询</el-button><el-button @click="handleReset">重置</el-button></el-form-item
							>
						</el-form>
					</div>
					<el-table :data="pagedOrderList" style="width: 100%">
						<el-table-column prop="orderNo" label="订单号" />
						<el-table-column prop="productName" label="商品名称" />
						<el-table-column prop="amount" label="订单金额" />
						<el-table-column prop="status" label="订单状态"
							><template #default="scope"
								><el-tag :type="getStatusTagType(scope.row.status)" size="small">{{ getStatusText(scope.row.status) }}</el-tag></template
							></el-table-column
						>
						<el-table-column prop="createTime" label="创建时间" />
						<el-table-column label="操作"
							><template #default="scope"
								><el-button type="primary" size="small" @click="handleOrderDetail(scope.row.id)">查看详情</el-button></template
							></el-table-column
						>
					</el-table>
					<div class="pagination-container">
						<el-pagination
							v-model:current-page="pagination.currentPage"
							v-model:page-size="pagination.pageSize"
							:page-sizes="[10, 20, 50, 100]"
							layout="total, sizes, prev, pager, next, jumper"
							:total="pagination.total"
							@size-change="handleSizeChange"
							@current-change="handleCurrentChange"
						/>
					</div>
				</el-card>
			</div>
			<el-dialog v-model="dialogVisible" title="订单详情" width="80%">
				<div v-if="orderDetail" class="order-detail">
					<el-descriptions :column="2" border>
						<el-descriptions-item label="订单号">{{ orderDetail.orderNo }}</el-descriptions-item>
						<el-descriptions-item label="订单金额">{{ orderDetail.amount }}</el-descriptions-item>
						<el-descriptions-item label="订单状态">{{ getStatusText(orderDetail.status) }}</el-descriptions-item>
						<el-descriptions-item label="创建时间">{{ orderDetail.createTime }}</el-descriptions-item>
						<el-descriptions-item label="支付时间">{{ orderDetail.payTime || '-' }}</el-descriptions-item>
						<el-descriptions-item label="发货时间">{{ orderDetail.shipTime || '-' }}</el-descriptions-item>
						<el-descriptions-item label="签收时间">{{ orderDetail.signTime || '-' }}</el-descriptions-item>
						<el-descriptions-item label="退款时间">{{ orderDetail.refundTime || '-' }}</el-descriptions-item>
					</el-descriptions>
					<div class="detail-section">
						<h3>商品信息</h3>
						<el-table :data="orderDetail.products" style="width: 100%"
							><el-table-column prop="productName" label="商品名称" /><el-table-column prop="sku" label="SKU" /><el-table-column
								prop="quantity"
								label="数量" /><el-table-column prop="price" label="单价" /><el-table-column prop="subtotal" label="小计"
						/></el-table>
					</div>
					<div class="detail-section">
						<h3>物流信息</h3>
						<el-descriptions :column="2" border
							><el-descriptions-item label="快递公司">{{ orderDetail.logistics?.company || '-' }}</el-descriptions-item
							><el-descriptions-item label="物流单号">{{ orderDetail.logistics?.trackingNo || '-' }}</el-descriptions-item
							><el-descriptions-item label="发货地址">{{ orderDetail.logistics?.senderAddress || '-' }}</el-descriptions-item
							><el-descriptions-item label="收货地址">{{ orderDetail.logistics?.receiverAddress || '-' }}</el-descriptions-item></el-descriptions
						>
					</div>
					<div class="detail-section" v-if="orderDetail.distribution">
						<h3>分销信息</h3>
						<el-descriptions :column="2" border
							><el-descriptions-item label="分销达人">{{ orderDetail.distribution.anchorName }}</el-descriptions-item
							><el-descriptions-item label="佣金金额">{{ orderDetail.distribution.commission }}</el-descriptions-item
							><el-descriptions-item label="分销类型">{{ orderDetail.distribution.type }}</el-descriptions-item
							><el-descriptions-item label="推广时间">{{ orderDetail.distribution.promotionTime }}</el-descriptions-item></el-descriptions
						>
					</div>
				</div>
			</el-dialog>
		</el-card>
	</div>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive, ref } from 'vue';
const searchParams = reactive({ orderNo: '', productName: '', status: '', dateRange: [] });
const statusOptions = [
	{ label: '全部', value: 'all' },
	{ label: '待发货', value: 'pending_shipping' },
	{ label: '已发货', value: 'shipped' },
	{ label: '已签收', value: 'signed' },
	{ label: '已退款', value: 'refunded' },
];
interface OrderItem {
	id: number;
	orderNo: string;
	productName: string;
	amount: number;
	status: string;
	createTime: string;
}
const orderList = ref<OrderItem[]>([]);
const pagination = reactive({ currentPage: 1, pageSize: 10, total: 0 });
const pagedOrderList = computed(() =>
	orderList.value.slice((pagination.currentPage - 1) * pagination.pageSize, pagination.currentPage * pagination.pageSize)
);
interface OrderDetail {
	orderNo: string;
	amount: number;
	status: string;
	createTime: string;
	payTime: string;
	shipTime: string;
	signTime: string;
	refundTime: string;
	products: { productName: string; sku: string; quantity: number; price: number; subtotal: number }[];
	logistics: { company: string; trackingNo: string; senderAddress: string; receiverAddress: string };
	distribution: { anchorName: string; commission: number; type: string; promotionTime: string };
}
const dialogVisible = ref(false);
const orderDetail = ref<OrderDetail | null>(null);
const getMockOrderList = () =>
	Array.from({ length: 24 }, (_, i) => ({
		id: i + 1,
		orderNo: `ORDER${Date.now() + i}`,
		productName: `商品${i + 1}`,
		amount: 1000 + Math.random() * 9000,
		status: ['pending_shipping', 'shipped', 'signed', 'refunded'][Math.floor(Math.random() * 4)],
		createTime: new Date(Date.now() - Math.random() * 30 * 24 * 60 * 60 * 1000).toISOString(),
	}));
const getMockOrderDetail = (id: number) => ({
	orderNo: `ORDER${Date.now() + id}`,
	amount: 5000 + Math.random() * 5000,
	status: 'signed',
	createTime: new Date(Date.now() - 10 * 24 * 60 * 60 * 1000).toISOString(),
	payTime: new Date(Date.now() - 9.5 * 24 * 60 * 60 * 1000).toISOString(),
	shipTime: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000).toISOString(),
	signTime: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString(),
	refundTime: '',
	products: [
		{ productName: '商品1', sku: 'SKU001', quantity: 2, price: 1500, subtotal: 3000 },
		{ productName: '商品2', sku: 'SKU002', quantity: 1, price: 2500, subtotal: 2500 },
	],
	logistics: {
		company: '顺丰速运',
		trackingNo: `SF${Math.floor(Math.random() * 10000000000)}`,
		senderAddress: '上海市浦东新区',
		receiverAddress: '北京市朝阳区',
	},
	distribution: { anchorName: '主播A', commission: 500, type: '二创', promotionTime: new Date(Date.now() - 11 * 24 * 60 * 60 * 1000).toISOString() },
});
const getStatusText = (status: string) => ({ pending_shipping: '待发货', shipped: '已发货', signed: '已签收', refunded: '已退款' })[status] || status;
const getStatusTagType = (status: string) =>
	({ pending_shipping: 'info', shipped: 'primary', signed: 'success', refunded: 'warning' })[status] || 'info';
const handleSearch = () => {
	orderList.value = getMockOrderList();
	pagination.total = orderList.value.length;
	pagination.currentPage = 1;
};
const handleReset = () => {
	searchParams.orderNo = '';
	searchParams.productName = '';
	searchParams.status = '';
	searchParams.dateRange = [];
	pagination.currentPage = 1;
	pagination.pageSize = 10;
	handleSearch();
};
const handleSizeChange = (size: number) => {
	pagination.pageSize = size;
	pagination.currentPage = 1;
};
const handleCurrentChange = (current: number) => {
	pagination.currentPage = current;
};
const handleOrderDetail = (id: number) => {
	orderDetail.value = getMockOrderDetail(id);
	dialogVisible.value = true;
};
onMounted(() => handleSearch());
</script>

<style scoped>
.trade-operation-order {
	padding: 20px;
}
.card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 16px;
	font-weight: 600;
}
.search-container {
	margin-bottom: 16px;
}
.search-form {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
.search-form :deep(.el-form-item) {
	margin-right: 12px;
	margin-bottom: 12px;
}
.trade-operation-order :deep(.el-select) {
	width: 180px;
}
.trade-operation-order :deep(.el-select__wrapper),
.trade-operation-order :deep(.el-select__selected-item),
.trade-operation-order :deep(.el-select__placeholder) {
	color: #303133;
}
.order-list {
	margin-top: 20px;
}
.pagination-container {
	margin-top: 16px;
	display: flex;
	justify-content: flex-end;
}
.order-detail {
	padding: 20px 0;
}
.detail-section {
	margin-top: 30px;
}
.detail-section h3 {
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 15px;
	color: #606266;
}
</style>
