<script setup lang="ts">
import SmallTitle from '../smallTitle/smallTitle.vue'
import './MerchantCategory.less'
import { onMounted, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts/core';
import { PieChart } from 'echarts/charts';
import {
    GridComponent,
    TitleComponent,
    TooltipComponent,
    LegendComponent
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import moment from 'moment';
import { handleGetCustomerAgeRatio } from '../../service';

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

let myChart: echarts.ECharts;
// 自定义颜色列表
const colorList = ['#FF9500', '#0094FF', '#7D4CD2'];

onMounted(async () => {

    const res: any = await handleGetData()

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


    myChart = echarts.init(chartDom);

    const option = {
        tooltip: {  // 新增 tooltip 配置
            trigger: 'item',  // 触发类型：坐标轴触发
            axisPointer: {    // 坐标轴指示器配置
                type: 'shadow' // 阴影指示器（适合柱状图）
            },
            formatter: function (params: any) {  // 自定义提示框内容
                return `
                    <div style="font-weight:bold">${params.data.name} ${params?.percent}%  ${res.realData[params.dataIndex].toLocaleString()}元</div>
                `;
            }
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['0%', '100%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    color: function (params: any) {
                        return colorList[params.dataIndex];
                    }
                },
                label: {
                    show: false
                },
                emphasis: false,
                labelLine: {
                    show: false
                },
                data: res.pieData
            }
        ]
    };


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

// 拿到年龄数据
const handleGetData = async () => {
    let category: any = ["全国品牌","地方连锁","本地个体"]
    let pieData: any = [33.3,33.3,33.3]
    let realData: any = []

   


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



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

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


<template>
    <div class="MerchantCategoryBox">
        <SmallTitle title="商户类别" />

        <div class="MerchantCategoryContent">
            <div class="MerchantCategoryChart" id="MerchantCategory"></div>

            <div class="MerchantCategoryRightBox">

                <div class="MerchantCategoryRightItem">
                    <div class="MerchantCategoryRightLegend"></div>
                    <div class="MerchantCategoryName"></div>
                    <div class="MerchantCategoryValue"></div>
                </div>
            </div>
        </div>
    </div>
</template>