<template>
	<el-card shadow="hover" class="border-none" v-loading="loading" style="margin-bottom: 10px; height: 155px">
		<div class="header-container">
			<span style="font-size: 16px; font-weight: 500">统计概览</span>
			<div>
				<span style="font-size: 14px; color: #95969a">ASIN </span>
				<el-input v-model="searchAsin" clearable style="width: 220px" placeholder="请输入ASIN" @change="fetchOverviewData"></el-input>
			</div>
			<div>
				<span style="font-size: 14px; color: #95969a">时间选择 </span>
				<el-date-picker v-model="dateRange" :clearable="false" type="daterange"></el-date-picker>
			</div>
		</div>

		<div class="stat-overview">
			<div v-for="(item, index) in stats" :key="index" class="stat-item">
				<div class="stat-label">{{ item.label }}</div>
				<div class="stat-value">
					{{ item.value }}
					<el-tooltip content="下载" placement="top">
						<el-button
							v-if="item.label === '总评论数' || item.label === '新增好评数' || item.label === '新增中评数' || item.label === '新增差评数'"
							:icon="Download"
							:size="mini"
							class="stat-button"
							type="text"
							@click.stop="handelDownload(item.label)"
						>
						</el-button>
					</el-tooltip>
				</div>
			</div>
		</div>
	</el-card>
</template>

<script lang="ts" setup>
import { getDownloadData, getOverviewData } from '/src/views/score-statistics/api';
import dayjs from 'dayjs';
import { Download } from '@element-plus/icons-vue';


const loading = ref(false);
const searchAsin = ref('');
const dateRange = ref([dayjs().startOf('month').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')]);

const stats = ref([]);
const statsMapping = [
	{ label: '监控商品数', field: 'monitor_goods_count' },
	{ label: '监控竞品数', field: 'monitor_competitors_count' },
	{ label: '总评论数', field: 'total_review_count' },
	{ label: '新增好评数', field: 'good_review_count' },
	{ label: '新增中评数', field: 'mid_review_count' },
	{ label: '新增差评数', field: 'bad_review_count' },
	{ label: '在售商品数', field: 'sale_goods_count' },
	{ label: '停售商品数', field: 'discontinued_goods_count' },
];

async function fetchOverviewData() {
	loading.value = true;
	const query = {
		query_start_date: dateRange.value[0],
		query_end_date: dateRange.value[1],
		asin: searchAsin.value,
	};
	try {
		const { data } = await getOverviewData(query);
		stats.value = statsMapping.map((stat) => ({
			label: stat.label,
			value: data[stat.field] || 0,
		}));
		loading.value = false;
	} catch (e) {
		console.error('获取数据时出错:', e);
	}
}

async function handelDownload(label: string) {
	loading.value = true;
	const downloadType = {
		'总评论数': 0,
		'新增好评数': 1,
		'新增中评数': 2,
		'新增差评数': 3,
	}[label];

	try{
		const query = {
		download_type: downloadType,
		query_start_date: dateRange.value[0],
		query_end_date: dateRange.value[1],
		asin: searchAsin.value,
	};
		const fileName = `${dateRange.value[0]}至${dateRange.value[1]}${label}.xlsx`;
		const resp = await getDownloadData(query);
			const url = window.URL.createObjectURL(resp.data);
			const link = document.createElement('a');
			link.href = url;
			link.setAttribute('download', fileName);
			document.body.appendChild(link);
			link.click();
			ElMessage.success('下载成功');
			loading.value = false;
		}catch (e) {
		ElMessage.error('error');
	}
}

watch(dateRange, (newValue, oldValue) => {
	if (newValue !== oldValue) {
		dateRange.value[0]=dayjs(newValue[0]).format('YYYY-MM-DD');
		dateRange.value[1]=dayjs(newValue[1]).format('YYYY-MM-DD');
		fetchOverviewData();
	}
});

onMounted(() => {
	fetchOverviewData();
});
</script>

<style scoped>
.header-container {
	display: flex;
	align-items: center; /* 垂直居中对齐 */
	justify-content: flex-end; /* 靠右对齐 */
	gap: 42px; /* 设置间隔为20px */
}
.header-container > span {
	margin-right: auto; /* 让“统计概览”靠左 */
}

.stat-overview {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 25px;
	flex-wrap: wrap; /* 当屏幕宽度不够时换行 */
}

.stat-button {
	height: 20px;
}

.stat-item {
	text-align: center;
}

.stat-value {
	font-size: 19px;
	font-weight: bold;
}

.stat-label {
	font-size: 14px;
	color: #666;
	font-weight: 500;
}
</style>
