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

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

let myChart: echarts.ECharts;

// 图例数组
let legendList = ref<any>()

onMounted(async () => {

    const res: any = await handleGetSectionFlowCount()

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


    myChart = echarts.init(chartDom);

    const option = {
        // legend: {
        //     selectedMode: false,
        //     bottom: 0,
        //     textStyle: {
        //         color: '#666',
        //         fontSize: 12,
        //         padding: [0, 0, 0, 5]
        //     },
        //     width: '100%',  // 设置宽度为100%
        //     overflow: 'truncate',  // 超出部分截断
        // },
        grid: {
            left: '0',
            right: '0',
            bottom: '30',
            top: '10',
            containLabel: true
        },
        yAxis: {
            type: 'value',
            splitLine: { show: false }  // 隐藏刻度线
        },
        xAxis: {
            type: 'category',
            data: res.category,
            axisLabel: {
                interval: 0  // 强制显示所有标签
            }
        },
        series: res.seriesData,
        tooltip: {
            trigger: 'item',
            formatter: function (params: any) {
                return `
                <div style="font-weight:bold">${params.seriesName}  ${params.value}%</div>
            `;
            }
        },
    };


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

// 拿到入区车辆的趋势
const handleGetSectionFlowCount = async () => {
    let seriesData: any = []
    let category: any = []

    const req: any = {
        ProvinceCode: '530000',
        StatisticsDate: moment().subtract(1, 'd').format('YYYYMM'),
        // serverpartId: ''
    }
    const data = await handleGetCustomerConsumeRatio(req)

    if (data && data.length > 0) {
        let smallList: number[] = []
        let middleList: number[] = []
        let bigList: number[] = []

        data.forEach((item: any) => {
            category.push(item.name);
            let small = item.data[0]
            let middle = Number((item.data[1] + item.data[2]).toFixed(2))
            let big = item.data[3]
            smallList.push(small);
            middleList.push(middle);
            bigList.push(big);
        })

        seriesData.push({
            name: '低消费',
            type: 'bar',
            stack: 'Ad',
            barWidth: 6,
            emphasis: {
                focus: 'series'
            },
            itemStyle: {
                color: '#A7DAFF' // 直接指定颜色值
            },
            data: smallList
        })

        seriesData.push({
            name: '普通消费',
            type: 'bar',
            stack: 'Ad',
            barWidth: 6,
            emphasis: {
                focus: 'series'
            },
            itemStyle: {
                color: '#0094FF' // 直接指定颜色值
            },
            data: middleList
        })

        seriesData.push({
            name: '高消费',
            type: 'bar',
            stack: 'Ad',
            barWidth: 6,
            emphasis: {
                focus: 'series'
            },
            itemStyle: {
                color: '#FF9500' // 直接指定颜色值
            },
            data: bigList
        })
    }


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

    legendList.value = seriesData
    console.log('resresresresres', res);

    return res
}


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

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

</script>




<template>
    <div class="CustomerGroupStayBox">
        <SmallTitle :title="'消费能力'" :pageType="'center'"></SmallTitle>

        <div class="CustomerGroupStayCharts">
            <!-- <div class="CustomerGroupStayUnit">万元</div> -->
            <div class="CustomerGroupStayChartsContent">
                <div class="CustomerGroupStay" id="CustomerGroupStay"></div>
            </div>

            <div class="CustomerGroupStayChartsLegendList">
                <div class="CustomerGroupStayChartsLegendItem" v-for="(item, index) in legendList" :key="index"
                    :style="{ marginTop: index >= 2 ? '8px' : '' }">
                    <div class="CustomerGroupStayChartsLegendIcon" :style="{ backgroundColor: item.itemStyle.color }">
                    </div>
                    <div class="CustomerGroupStayChartsLegendName">{{ item.name || "" }}</div>
                </div>
            </div>
        </div>
    </div>
</template>