<template>
	<div class="trade-operation-analysis-region">
		<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="regionChartRef" class="chart"></div>
				</el-card>
			</div>
			<div class="region-ranking">
				<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-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="selectedRegionLevel" placeholder="选择区域级别"><el-option v-for="option in regionLevelOptions" :key="option.value" :label="option.label" :value="option.value" /></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="pagedRegionList" style="width: 100%">
						<el-table-column prop="rank" label="排名" width="80" />
						<el-table-column prop="regionName" label="地区名称" />
						<el-table-column prop="sales" label="销售额" />
						<el-table-column prop="orderCount" label="订单数" />
						<el-table-column prop="avgOrderValue" label="客单价" />
						<el-table-column prop="poiCount" label="店铺数量" />
					</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: [], regionLevel: 'province' });
const regionLevelOptions = [
	{ label: '省份', value: 'province' },
	{ label: '城市', value: 'city' },
];
const selectedRegionLevel = computed({
	get: () => searchParams.regionLevel,
	set: (value: string) => {
		searchParams.regionLevel = value;
	},
});
const regionList = ref<any[]>([]);
const pagination = reactive({ currentPage: 1, pageSize: 10, total: 0 });
const pagedRegionList = computed(() => regionList.value.slice((pagination.currentPage - 1) * pagination.pageSize, pagination.currentPage * pagination.pageSize));
const regionChartRef = ref();
let regionChart: echarts.ECharts | null = null;

const getMockRegionDistribution = () => (searchParams.regionLevel === 'city' ? [{ regionName: '上海', sales: 1500000 }] : [{ regionName: '北京', sales: 1200000 }, { regionName: '上海', sales: 1500000 }, { regionName: '广州', sales: 980000 }, { regionName: '深圳', sales: 1100000 }]);
const getMockRegionList = () => [
	{ rank: 1, regionName: '上海', sales: 1500000, orderCount: 3200, avgOrderValue: 468.75, poiCount: 25 },
	{ rank: 2, regionName: '北京', sales: 1200000, orderCount: 2800, avgOrderValue: 428.57, poiCount: 20 },
	{ rank: 3, regionName: '深圳', sales: 1100000, orderCount: 2600, avgOrderValue: 423.08, poiCount: 18 },
	{ rank: 4, regionName: '广州', sales: 980000, orderCount: 2300, avgOrderValue: 426.09, poiCount: 15 },
	{ rank: 5, regionName: '杭州', sales: 850000, orderCount: 2100, avgOrderValue: 404.76, poiCount: 12 },
	{ rank: 6, regionName: '成都', sales: 780000, orderCount: 1900, avgOrderValue: 410.53, poiCount: 10 },
];

const handleSearch = () => { regionList.value = getMockRegionList(); pagination.total = regionList.value.length; pagination.currentPage = 1; initRegionChart(getMockRegionDistribution()); };
const handleReset = () => { searchParams.dateRange = []; searchParams.regionLevel = 'province'; 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 initRegionChart = (regionDistribution: any[]) => {
	if (!regionChartRef.value) return;
	if (regionChart) regionChart.dispose();
	regionChart = echarts.init(regionChartRef.value);
	regionChart.setOption({
		tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' },
		legend: { orient: 'vertical', left: 'left', data: regionDistribution.map((item) => item.regionName) },
		series: [{ name: '地域销售', type: 'pie', radius: regionDistribution.length <= 1 ? '35%' : '50%', data: regionDistribution.map((item) => ({ value: item.sales, name: item.regionName })), emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } }],
	});
};

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

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