<template>
	<v-chart class="chart" :option="option" autoresize />
</template>

<script setup lang="ts">
import { use } from 'echarts/core'
import { PieChart } from 'echarts/charts' // 导入饼图模块
import { CanvasRenderer } from 'echarts/renderers'
import {
	TitleComponent,
	TooltipComponent,
	LegendComponent,
} from 'echarts/components'
import VChart from 'vue-echarts'
import { ref, onMounted } from 'vue'
import axios from 'axios' // 导入 axios

use([
	CanvasRenderer,
	PieChart, // 使用饼图
	TitleComponent,
	TooltipComponent,
	LegendComponent,
])

// 定义 option 用来存储饼图配置
const option = ref<any>({
	title: {
		text: '入住品牌分析',
		left: 'center',
	},
	tooltip: {
		trigger: 'item', // 饼图的 tooltip 触发方式为 'item'
	},
	legend: {
		orient: 'vertical', // 图例垂直排列
		left: 'left',
		data: [], // 图例数据为日期，初始为空
	},
	series: [
		{
			name: '销售数量',
			type: 'pie', // 设置图表类型为饼图
			radius: '50%', // 饼图半径
			data: [], // 饼图数据，初始为空
			emphasis: {
				itemStyle: {
					shadowBlur: 10,
					shadowOffsetX: 0,
					shadowColor: 'rgba(0, 0, 0, 0.5)',
				},
			},
		},
	],
})

// 获取近七天的日期
function getLastSevenDays() {
	const dates = []
	for (let i = 6; i >= 0; i--) {
		const date = new Date()
		date.setDate(date.getDate() - i)
		const formattedDate = date.toISOString().split('T')[0]
		dates.push(formattedDate)
	}
	return dates
}

// 请求数据并更新饼图
async function fetchData() {
	try {
		const response = await adminRequest.get('/sys/item/view1')
		const data = response.data

		const pieData = data.map((item: { name: string, value: number }) => ({
			value: item.value,
			name: item.name,
		}))

		// 更新 option 中的图例数据和饼图数据
		option.value.legend.data = data
		option.value.series[0].data = pieData

	} catch (error) {
		console.error('数据加载失败', error)
	}
}

// 在组件挂载后请求数据
onMounted(() => {
	fetchData()
})
</script>

<style>
.chart {
	width: 100%;
	height: 100%;
}
</style>
