<script setup lang="ts">
import SmallTitle from '../smallTitle/smallTitle.vue'
import './ConsumptionPeriod.less'
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 { onBeforeUnmount, onMounted } from 'vue';
import { handleGetTransactionTimeAnalysis } from '../../service';
import moment from 'moment';

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

let myChart: echarts.ECharts;

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

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

    myChart = echarts.init(chartDom);

    const option = {
        xAxis: {
            type: 'category',
            data: res.category,
            boundaryGap: true,
            axisLabel: {
                interval: 3,
                showMinLabel: true,
                showMaxLabel: true
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#fff'
                }
            },
            axisTick: {
                alignWithLabel: true // 保证刻度线与标签对齐
            }
        },
        yAxis: {
            type: 'value',
            name: '客单占比(%)',
            nameTextStyle: {
                color: '#fff' // Y轴名称颜色
            },
            splitLine: { show: false },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#fff'
                }
            },
            axisLabel: {
                color: '#fff',
                formatter: '{value}' // 添加单位
            }
        },
        grid: {
            left: '10',    // 增加左侧空间
            right: '10',   // 增加右侧空间
            bottom: '10',
            top: '30',
            containLabel: true
        },
        series: [
            {
                // data: res.seriesData,
                data: res.seriesData.map((value: any, index: any) => {
                    return {
                        value: value,
                        // 只在显示标签的位置显示symbol
                        symbol: index % 4 === 0 ? 'circle' : 'none',
                        symbolSize: 6
                    }
                }),
                type: 'line',
                smooth: true,
                lineStyle: {
                    width: 2,
                    color: '#00F6FF'
                },
                itemStyle: {
                    color: '#00F6FF'
                },
                yAxisIndex: 0 // 绑定左侧Y轴
            }
        ],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'line' // 改为线条指示器
            },
            formatter: function (params: any) {
                console.log('paramsparamsparams', params);
                console.log('resresresres', res);


                return `<div>
                    <div>${res.category[params[0].dataIndex]}时：${params[0].value}%</div>
                </div>`
            }
        }
    };

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

// 拿到数据
const handleGetData = async () => {

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

    const req: any = {
        Province_Code: '530000',
        Statistics_Date: moment().subtract(1, 'd').format('YYYY-MM-DD'),
        Serverpart_ID: '',
        TimeSpan: 1
    }
    const data = await handleGetTransactionTimeAnalysis(req)


    if (data && data.length > 0) {
        // 拿到笔数的合计
        let orderSum: number = 0
        data.forEach((item: any) => {
            orderSum += Number(item.data)
        })


        // data 是笔数  key 是金额
        data.forEach((item: any, index: number) => {
            if (index < 10) {
                category.push(`0${index}:00`)
            } else {
                category.push(`${index}:00`)
            }

            seriesData.push(Number(((item.data / orderSum) * 100).toFixed(2)))
        })
    }





    let res: any = {
        category: category,// x轴的内容
        seriesData: seriesData,
    }

    return res
}


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

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



</script>

<template>
    <div class="ConsumptionPeriodBox">
        <SmallTitle :title="'消费时段分析'"></SmallTitle>

        <div class="ConsumptionPeriod" id="ConsumptionPeriod"></div>
    </div>
</template>
