<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref } from 'vue';
import SmallTitle from '../smallTitle/smallTitle.vue'
import './ReturnRate.less'
import * as echarts from 'echarts/core';
import { BarChart } from 'echarts/charts';
import {
    GridComponent,
    TitleComponent,
    TooltipComponent,
    LegendComponent
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import moment from 'moment';
import returnRateBg from '../../../../assets/image/returnRateBg.png'

// 季月年的选中
let selectType = ref<number>(1)

// 注册组件
echarts.use([
    BarChart,
    GridComponent,
    TitleComponent,
    TooltipComponent,
    LegendComponent,
    CanvasRenderer
]);

let myChart: echarts.ECharts;

onMounted(async () => {
    const res: any = await handleGetData()

    const chartDom = document.getElementById('ReturnRate');
    if (!chartDom) return;

    myChart = echarts.init(chartDom);

    const option = {
        tooltip: {  // 新增 tooltip 配置
            trigger: 'item',  // 触发类型：坐标轴触发
            axisPointer: {    // 坐标轴指示器配置
                type: 'shadow' // 阴影指示器（适合柱状图）
            },
            formatter: function (params: any) {  // 自定义提示框内容
                // params 是数组，包含当前 hover 的所有系列数据
                const data = params[0];
                let realData = res.realData[params[0].dataIndex]
                return `
                <div style="font-weight:bold">${data.name}</div>
                <div>车流量：${realData ? realData + '辆' : data.value + '万辆'} </div>
            `;
            }
        },
        graphic: {  // 关键配置：在图表中心添加图片
            elements: [
                {
                    type: 'image',
                    style: {
                        image: returnRateBg,
                        width: 83,
                        height: 83
                    },
                    left: 'center',
                    top: 'center',
                    z: 10
                },
                {
                    // 文字配置（居中覆盖在图片上）
                    type: 'text',
                    left: 'center',
                    top: 'center',
                    style: {
                        text: '75%',       // 要显示的文字内容
                        font: 'bold 35px Impact', // 字体样式
                        fill: 'linear-gradient(90deg, #00F6FF 0%, #008CFF 100%)',   // 文字颜色
                        textAlign: 'center',
                        textVerticalAlign: 'middle'
                    },
                    z: 20  // 确保文字在图片上方
                }
            ]
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['85%', '100%'],
                center: ['50%', '50%'],  // 关键修改：强制居中 [水平位置, 垂直位置]
                avoidLabelOverlap: false,

                itemStyle: {
                    color: function (params: any) {
                        // 自定义颜色列表
                        const colorList = ['#FF9500', '#00FFB7', '#0094FF', '#7D4CD2', '#69BCFF'];
                        return colorList[params.dataIndex];
                    }
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 40,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: 1048, name: 'Search Engine' },
                    { value: 735, name: 'Direct' },
                    { value: 580, name: 'Email' },
                    { value: 484, name: 'Union Ads' },
                    { value: 300, name: 'Video Ads' }
                ]
            }
        ]
    };



    myChart.setOption(option);
    myChart.resize();
    window.addEventListener('resize', resizeChart);
})

// 修改选择的季月年
const handleChangeType = async (value: number) => {
    selectType.value = value
}

const handleGetData = async () => {

    let category: string[] = []
    let seriesData: number[] = []
    let realData: string[] = []


    let res: any = {
        category: category,// x轴的内容
        seriesData: seriesData,// y轴的数据
        realData: realData// 真实数据
    }
    return res
}

const resizeChart = () => {
    myChart?.resize();
};

onBeforeUnmount(() => {
    window.removeEventListener('resize', resizeChart);
    myChart?.dispose();
});

</script>


<template>
    <div class="ReturnRateBox">
        <SmallTitle :title="'退货率'" :pageType="'center'"></SmallTitle>

        <div class="ReturnRateContent">
            <div class="ReturnRate" id="ReturnRate"></div>
        </div>

    </div>

</template>