<template>
	<div class="ads-summary-daily">
		<el-card shadow="hover">
			<template #header><div class="card-header"><span>分日监控</span></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"
							:shortcuts="dateShortcuts"
						/>
					</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>
			<div class="chart-container">
				<el-card>
					<template #header><div class="card-header">每日数据趋势</div></template>
					<div ref="chartRef" class="chart"></div>
				</el-card>
			</div>
			<div class="table-container">
				<el-card>
					<template #header><div class="card-header">每日详细数据</div></template>
					<el-table :data="pagedData" style="width: 100%">
						<el-table-column prop="date" label="日期" />
						<el-table-column prop="impressions" label="曝光" />
						<el-table-column prop="clicks" label="点击" />
						<el-table-column prop="ctr" label="点击率"><template #default="scope">{{ scope.row.ctr }}%</template></el-table-column>
						<el-table-column prop="conversions" label="转化" />
						<el-table-column prop="conversionRate" label="转化率"><template #default="scope">{{ scope.row.conversionRate }}%</template></el-table-column>
						<el-table-column prop="cost" label="花费"><template #default="scope">¥{{ scope.row.cost }}</template></el-table-column>
						<el-table-column prop="cpc" label="CPC"><template #default="scope">¥{{ scope.row.cpc }}</template></el-table-column>
						<el-table-column prop="cpa" label="CPA"><template #default="scope">¥{{ scope.row.cpa }}</template></el-table-column>
						<el-table-column prop="roi" label="ROI"><template #default="scope">{{ scope.row.roi }}</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="handlePageSizeChange"
							@current-change="handlePageChange"
						/>
					</div>
				</el-card>
			</div>
		</el-card>
	</div>
</template>

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

const searchParams = reactive({
	dateRange: [],
});

const dateShortcuts = [
	{
		text: '最近7天',
		value: () => {
			const end = new Date();
			const start = new Date();
			start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
			return [start, end];
		},
	},
	{
		text: '最近30天',
		value: () => {
			const end = new Date();
			const start = new Date();
			start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
			return [start, end];
		},
	},
	{
		text: '最近90天',
		value: () => {
			const end = new Date();
			const start = new Date();
			start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
			return [start, end];
		},
	},
];

const chartRef = ref();
let chart: echarts.ECharts | null = null;

const data = ref<any[]>([]);
const pagination = reactive({
	currentPage: 1,
	pageSize: 10,
	total: 0,
});

const pagedData = computed(() => {
	const start = (pagination.currentPage - 1) * pagination.pageSize;
	const end = start + pagination.pageSize;
	return data.value.slice(start, end);
});

const getMockData = () => {
	const mockData = [];
	const end = new Date();
	const start = new Date();
	start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);

	let current = new Date(start);
	while (current <= end) {
		const date = current.toISOString().split('T')[0];
		const impressions = Math.floor(Math.random() * 10000) + 5000;
		const clicks = Math.floor(impressions * (Math.random() * 0.05 + 0.01));
		const ctr = ((clicks / impressions) * 100).toFixed(2);
		const conversions = Math.floor(clicks * (Math.random() * 0.1 + 0.02));
		const conversionRate = ((conversions / clicks) * 100).toFixed(2);
		const cost = (Math.random() * 1000 + 100).toFixed(2);
		const cpc = (parseFloat(cost) / clicks).toFixed(2);
		const cpa = (parseFloat(cost) / conversions).toFixed(2);
		const roi = (Math.random() * 5 + 1).toFixed(2);

		mockData.push({
			date,
			impressions,
			clicks,
			ctr,
			conversions,
			conversionRate,
			cost,
			cpc,
			cpa,
			roi,
		});

		current.setDate(current.getDate() + 1);
	}

	return mockData;
};

const initChart = (data: any[]) => {
	if (!chartRef.value) return;

	if (chart) chart.dispose();
	chart = echarts.init(chartRef.value);

	const dates = data.map(item => item.date);
	const impressions = data.map(item => item.impressions);
	const clicks = data.map(item => item.clicks);
	const conversions = data.map(item => item.conversions);
	const cost = data.map(item => parseFloat(item.cost));

	chart.setOption({
		title: {
			text: '每日数据趋势',
			left: 'center',
		},
		tooltip: {
			trigger: 'axis',
		},
		legend: {
			data: ['曝光', '点击', '转化', '花费'],
			bottom: 0,
		},
		xAxis: {
			type: 'category',
			data: dates,
			axisLabel: {
				rotate: 45,
			},
		},
		yAxis: [
			{
				type: 'value',
				name: '数量',
			},
			{
				type: 'value',
				name: '花费',
				axisLabel: {
					formatter: '¥{value}',
				},
			},
		],
		series: [
			{
				name: '曝光',
				type: 'bar',
				data: impressions,
			},
			{
				name: '点击',
				type: 'line',
				data: clicks,
			},
			{
				name: '转化',
				type: 'line',
				data: conversions,
			},
			{
				name: '花费',
				type: 'line',
				data: cost,
				yAxisIndex: 1,
			},
		],
	});
};

const handleSearch = () => {
	data.value = getMockData();
	pagination.total = data.value.length;
	initChart(data.value);
};

const handleReset = () => {
	searchParams.dateRange = [];
	pagination.currentPage = 1;
	handleSearch();
};

const handlePageSizeChange = (size: number) => {
	pagination.pageSize = size;
	pagination.currentPage = 1;
};

const handlePageChange = (page: number) => {
	pagination.currentPage = page;
};

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

<style scoped>
.ads-summary-daily {
	padding: 20px;
}

.card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 16px;
	font-weight: 600;
}

.search-container {
	margin-bottom: 20px;
}

.search-form {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.search-form :deep(.el-form-item) {
	margin-right: 12px;
	margin-bottom: 12px;
}

.chart-container {
	margin-bottom: 20px;
}

.chart {
	width: 100%;
	height: 400px;
}

.table-container {
	margin-top: 20px;
}

.pagination-container {
	margin-top: 16px;
	display: flex;
	justify-content: flex-end;
}
</style>