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

// 季月年的选中
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('MallOrderStatistics');
    if (!chartDom) return;

    myChart = echarts.init(chartDom);

    const option = {
        xAxis: {
            type: 'category',
            data: ["00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00", "21:00", "22:00", "23:00", "24:00"],
            boundaryGap: true,
            axisLabel: {
                interval: 3,     // 每隔 2 个显示一个（0,3,6...），因为索引从 0 开始
                showMinLabel: true,  // 显示第一个标签
                showMaxLabel: true   // 显示最后一个标签
            }
        },
        yAxis: {
            type: 'value',
            splitLine: { show: false }  // 隐藏刻度线
        },
        grid: {
            left: '10',    // 左侧间距
            right: '10',   // 右侧间距
            bottom: '0',    // 底部间距
            top: '10',       // 顶部间距
            containLabel: true // 确保坐标轴标签在grid内
        },
        series: [
            {
                data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 180, 200, 210, 300, 200, 180, 160, 30, 80, 90, 70, 45, 35, 67, 12].map((value: any, index: any) => {
                    return {
                        value: value,
                        // 只在显示标签的位置显示symbol
                        symbol: index % 3 === 0 ? 'circle' : 'none',
                        symbolSize: 6
                    }
                }),
                realData: res.realData,
                type: 'line',
                color: '#FF9500'
            }
        ],
        tooltip: {  // 新增 tooltip 配置
            trigger: 'axis',  // 触发类型：坐标轴触发
            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 + '单'} </div>
            `;
            }
        },
    };



    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="MallOrderStatisticsBox">
        <SmallTitle :title="'商城订单统计'">
            <template #extra>
                <div class="changeTypeBox">
                    <div :class="selectType === 1 ? 'changeTypeItem selectChangeTypeItem' : 'changeTypeItem'"
                        @click="handleChangeType(1)">月</div>
                    <div :class="selectType === 2 ? 'changeTypeItem selectChangeTypeItem' : 'changeTypeItem'"
                        @click="handleChangeType(2)">季</div>
                    <div :class="selectType === 3 ? 'changeTypeItem selectChangeTypeItem' : 'changeTypeItem'"
                        @click="handleChangeType(3)">年</div>
                </div>
            </template>
        </SmallTitle>


        <div class="MallOrderStatistics" id="MallOrderStatistics"></div>

    </div>

</template>