<template>
	<div class="trade-operation-distribution-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-select v-model="selectedOrderType" placeholder="选择订单类型"><el-option v-for="option in orderTypeOptions" :key="option.value || 'all'" :label="option.label" :value="option.value" /></el-select></el-form-item>
							<el-form-item label="订单号"><el-input v-model="searchParams.orderNo" placeholder="请输入订单号" clearable /></el-form-item>
							<el-form-item label="达人名称"><el-input v-model="searchParams.anchorName" placeholder="请输入达人名称" clearable /></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="orderType" label="订单类型"><template #default="scope"><el-tag size="small">{{ scope.row.orderType === 'quick_distribution' ? '快分销二创' : '达人推广' }}</el-tag></template></el-table-column>
						<el-table-column prop="anchorName" label="达人名称" />
						<el-table-column prop="productName" label="商品名称" />
						<el-table-column prop="amount" label="订单金额" />
						<el-table-column prop="commission" label="佣金金额" />
						<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.orderType === 'quick_distribution' ? '快分销二创' : '达人推广' }}</el-descriptions-item>
						<el-descriptions-item label="达人名称">{{ orderDetail.anchorName }}</el-descriptions-item>
						<el-descriptions-item label="订单金额">{{ orderDetail.amount }}</el-descriptions-item>
						<el-descriptions-item label="佣金金额">{{ orderDetail.commission }}</el-descriptions-item>
						<el-descriptions-item label="佣金比例">{{ orderDetail.commissionRate }}%</el-descriptions-item>
						<el-descriptions-item label="创建时间">{{ orderDetail.createTime }}</el-descriptions-item>
						<el-descriptions-item label="状态">{{ orderDetail.status }}</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="commission" label="佣金" /></el-table></div>
					<div class="detail-section"><h3>推广信息</h3><el-descriptions :column="2" border><el-descriptions-item label="推广渠道">{{ orderDetail.promotion.channel }}</el-descriptions-item><el-descriptions-item label="推广时间">{{ orderDetail.promotion.time }}</el-descriptions-item><el-descriptions-item label="推广链接">{{ orderDetail.promotion.link }}</el-descriptions-item><el-descriptions-item label="推广效果">{{ orderDetail.promotion.effect }}</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({ orderType: '', orderNo: '', anchorName: '', dateRange: [] });
const orderTypeOptions = [
	{ label: '全部', value: '' },
	{ label: '快分销二创订单', value: 'quick_distribution' },
	{ label: '分销达人推广订单', value: 'anchor_promotion' },
];
const selectedOrderType = computed({
	get: () => searchParams.orderType,
	set: (value: string) => {
		searchParams.orderType = value;
	},
});
interface OrderItem { id: number; orderNo: string; orderType: string; anchorName: string; productName: string; amount: number; commission: number; 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; orderType: string; anchorName: string; amount: number; commission: number; commissionRate: number; createTime: string; status: string; products: { productName: string; sku: string; quantity: number; price: number; commission: number }[]; promotion: { channel: string; time: string; link: string; effect: string } }
const dialogVisible = ref(false);
const orderDetail = ref<OrderDetail | null>(null);
const getMockOrderList = () => Array.from({ length: 24 }, (_, i) => ({ id: i + 1, orderNo: `DO${Date.now() + i}`, orderType: Math.random() > 0.5 ? 'quick_distribution' : 'anchor_promotion', anchorName: `达人${i + 1}`, productName: `商品${i + 1}`, amount: 1000 + Math.random() * 9000, commission: 100 + Math.random() * 900, createTime: new Date(Date.now() - Math.random() * 30 * 24 * 60 * 60 * 1000).toISOString() }));
const getMockOrderDetail = (id: number) => ({ orderNo: `DO${Date.now() + id}`, orderType: Math.random() > 0.5 ? 'quick_distribution' : 'anchor_promotion', anchorName: `达人${id}`, amount: 5000 + Math.random() * 5000, commission: 500 + Math.random() * 500, commissionRate: +(10 + Math.random() * 10).toFixed(2), createTime: new Date(Date.now() - 10 * 24 * 60 * 60 * 1000).toISOString(), status: '已完成', products: [{ productName: '商品1', sku: 'SKU001', quantity: 2, price: 1500, commission: 300 }, { productName: '商品2', sku: 'SKU002', quantity: 1, price: 2500, commission: 500 }], promotion: { channel: '抖音', time: new Date(Date.now() - 11 * 24 * 60 * 60 * 1000).toISOString(), link: `https://example.com/promotion/${id}`, effect: '良好' } });
const handleSearch = () => { orderList.value = getMockOrderList(); pagination.total = orderList.value.length; pagination.currentPage = 1; };
const handleReset = () => { searchParams.orderType = ''; searchParams.orderNo = ''; searchParams.anchorName = ''; 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-distribution-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-distribution-order :deep(.el-select) { width: 180px; }
.trade-operation-distribution-order :deep(.el-select__wrapper),
.trade-operation-distribution-order :deep(.el-select__selected-item),
.trade-operation-distribution-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>
