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

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

let myChart: echarts.ECharts;

onMounted(async () => {

    const res: any = await handleGetSectionFlowCount()

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


    myChart = echarts.init(chartDom);

    const option = {
        // tooltip: { // 新增 tooltip 配置
        //     trigger: 'item',
        //     formatter: function (params: any) {
        //         console.log('params', params);

        //         return `<div>${params.name} ${params.value}</div>
        //     `;
        //     }
        // },
        radar: {
            indicator: res.category,
            shape: 'circle',
            splitNumber: 5,
            radius: '60%', // 调整雷达图大小，留出空间给文字
            center: ['50%', '60%'], // 2. 确保居中
            axisName: {
                color: 'rgb(255, 255, 255)',
                padding: 10
            },
            splitLine: {
                lineStyle: {
                    color: [
                        'rgba(25, 46, 76, 1)',
                        'rgba(25, 46, 76, 1)',
                        'rgba(25, 46, 76, 1)',
                        'rgba(25, 46, 76, 1)',
                        'rgba(25, 46, 76, 1)',
                        'rgba(25, 46, 76, 1)',
                    ]
                }
            },
            splitArea: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(25, 46, 76, 1)',
                }
            }
        },
        series: [
            {
                type: 'radar',
                lineStyle: {
                    width: 1,
                    opacity: 0.5
                },
                data: res.seriesData,
                symbol: 'none',
                itemStyle: {
                    color: '#0289ED'
                },
                areaStyle: {
                    opacity: 0.1
                }
            }
        ]
    };

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

// 拿到业态偏好数据
const handleGetSectionFlowCount = async () => {

    const req: any = {
        ProvinceCode: '530000',
        StatisticsDate: moment(moment().subtract(1, 'M')).format('YYYY-MM-DD'),
        BusinessTradeIds: -1
    }
    const data = await handleGetBusinessTradeRevenue(req)

    let category: any = []
    let seriesData: any = []
    let realData: any = []

    let list: any = data.BusinessTradeRank
    if (list && list.length > 0) {
        list.forEach((item: any) => {
            category.push({ name: `${item.name}：${item.value}%`, max: 100 })
            seriesData.push(Number(item.value))
            realData.push(item.data)
        })
    }

    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="PreferenceTypeBox">
        <SmallTitle :title="'偏好类型'" :pageType="'center'"></SmallTitle>

        <div class="PreferenceTypeCharts">
            <!-- <div class="PreferenceTypeUnit">万元</div> -->
            <div class="PreferenceTypeChartsContent">
                <div class="PreferenceType" id="PreferenceType"></div>
            </div>
        </div>
    </div>
</template>