<template>
	<div class="trade-operation-analysis-product">
		<el-card shadow="hover">
			<template #header><div class="card-header"><span>商品数据统计</span></div></template>
			<div class="chart-container">
				<el-card>
					<template #header><div class="card-header">商品类目分布</div></template>
					<div ref="categoryChartRef" class="chart"></div>
				</el-card>
			</div>
			<div class="sku-ranking">
				<el-card>
					<template #header><div class="card-header">SKU销售排行</div></template>
					<div class="search-container">
						<el-form :model="searchParams" :inline="true" class="search-form">
							<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 label="商品类目"><el-select v-model="selectedCategoryId" placeholder="选择商品类目"><el-option label="全部" value="" /><el-option v-for="category in categories" :key="category.id" :label="category.name" :value="String(category.id)" /></el-select></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="pagedSkuList" style="width: 100%">
						<el-table-column prop="rank" label="排名" width="80" />
						<el-table-column prop="productName" label="商品名称" />
						<el-table-column prop="sku" label="SKU" />
						<el-table-column prop="category" label="类目" />
						<el-table-column prop="sales" label="销售额" />
						<el-table-column prop="salesVolume" label="销量" />
						<el-table-column prop="status" label="状态"><template #default="scope"><el-tag :type="scope.row.status === 'hot' ? 'success' : 'warning'" size="small">{{ scope.row.status === 'hot' ? '热销' : '滞销' }}</el-tag></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-card>
	</div>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive, ref } from 'vue';
import * as echarts from 'echarts';

const searchParams = reactive({ dateRange: [], categoryId: '' });
interface Category { id: string; name: string }
interface SkuItem { rank: number; productName: string; sku: string; category: string; sales: number; salesVolume: number; status: string }
const categories = ref<Category[]>([]);
const selectedCategoryId = computed({
	get: () => searchParams.categoryId,
	set: (value: string) => {
		searchParams.categoryId = value;
	},
});
const skuList = ref<SkuItem[]>([]);
const pagination = reactive({ currentPage: 1, pageSize: 10, total: 0 });
const pagedSkuList = computed(() => skuList.value.slice((pagination.currentPage - 1) * pagination.pageSize, pagination.currentPage * pagination.pageSize));
const categoryChartRef = ref();
let categoryChart: echarts.ECharts | null = null;

const getMockCategories = () => [{ id: '1', name: '电子产品' }, { id: '2', name: '服装鞋帽' }, { id: '3', name: '食品饮料' }, { id: '4', name: '家居用品' }, { id: '5', name: '美妆护肤' }];
const getMockSkuList = () => [
	{ rank: 1, productName: '智能手机', sku: 'SKU001', category: '电子产品', sales: 890000, salesVolume: 2500, status: 'hot' },
	{ rank: 2, productName: '运动跑鞋', sku: 'SKU002', category: '服装鞋帽', sales: 650000, salesVolume: 3200, status: 'hot' },
	{ rank: 3, productName: '高端耳机', sku: 'SKU003', category: '电子产品', sales: 420000, salesVolume: 1800, status: 'hot' },
	{ rank: 4, productName: '有机蔬菜', sku: 'SKU004', category: '食品饮料', sales: 380000, salesVolume: 5000, status: 'hot' },
	{ rank: 5, productName: '护肤套装', sku: 'SKU005', category: '美妆护肤', sales: 320000, salesVolume: 1200, status: 'hot' },
	{ rank: 6, productName: '办公椅', sku: 'SKU006', category: '家居用品', sales: 280000, salesVolume: 800, status: 'hot' },
	{ rank: 7, productName: 'T恤衫', sku: 'SKU007', category: '服装鞋帽', sales: 250000, salesVolume: 4500, status: 'hot' },
	{ rank: 8, productName: '厨房电器', sku: 'SKU008', category: '家居用品', sales: 180000, salesVolume: 600, status: 'warning' },
	{ rank: 9, productName: '零食礼包', sku: 'SKU009', category: '食品饮料', sales: 150000, salesVolume: 3000, status: 'warning' },
	{ rank: 10, productName: '化妆品', sku: 'SKU010', category: '美妆护肤', sales: 120000, salesVolume: 900, status: 'warning' },
];
const getMockCategoryDistribution = () => (searchParams.categoryId ? [{ categoryName: '电子产品', sales: 1310000 }] : [{ categoryName: '电子产品', sales: 1310000 }, { categoryName: '服装鞋帽', sales: 900000 }, { categoryName: '食品饮料', sales: 530000 }, { categoryName: '家居用品', sales: 460000 }, { categoryName: '美妆护肤', sales: 440000 }]);

const handleSearch = () => { categories.value = getMockCategories(); skuList.value = getMockSkuList(); pagination.total = skuList.value.length; pagination.currentPage = 1; initCategoryChart(getMockCategoryDistribution()); };
const handleReset = () => { searchParams.dateRange = []; searchParams.categoryId = ''; 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 initCategoryChart = (categoryDistribution: any[]) => {
	if (!categoryChartRef.value) return;
	if (categoryChart) categoryChart.dispose();
	categoryChart = echarts.init(categoryChartRef.value);
	categoryChart.setOption({
		tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' },
		legend: { orient: 'vertical', left: 'left', data: categoryDistribution.map((item) => item.categoryName) },
		series: [{ name: '商品类目', type: 'pie', radius: categoryDistribution.length <= 1 ? '35%' : '50%', data: categoryDistribution.map((item) => ({ value: item.sales, name: item.categoryName })), emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } }],
	});
};

onMounted(() => { handleSearch(); window.addEventListener('resize', () => categoryChart?.resize()); });
</script>

<style scoped>
.trade-operation-analysis-product { 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-analysis-product :deep(.el-select) { width: 180px; }
.trade-operation-analysis-product :deep(.el-select__wrapper),
.trade-operation-analysis-product :deep(.el-select__selected-item),
.trade-operation-analysis-product :deep(.el-select__placeholder) { color: #303133; }
.chart-container { margin: 0 0 20px; }
.chart { width: 100%; height: 400px; }
.sku-ranking { margin-top: 20px; }
.pagination-container { margin-top: 16px; display: flex; justify-content: flex-end; }
</style>
