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

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

let myChart: echarts.ECharts;

onMounted(async () => {

    await handleGoMounted()
});


// 传入的数据
const props = defineProps<{
    currentService?: any;
}>();

// 监听传入的选中服务区
watch(
    () => props.currentService,
    (newVal, oldVal) => {
        handleGoMounted()
    },
    { deep: true }
);

// 初始运行的方法
const handleGoMounted = async () => {
    const res = await handleGetSectionFlowCount()

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

    myChart = echarts.init(chartDom);

    const option = {
        xAxis: {
            type: 'category',
            data: res.category,
            axisLabel: {
                width: 40,          // 限制标签宽度为60px
                overflow: 'truncate', // 超出部分显示为省略号
                ellipsis: '...',     // 自定义省略符号（可选）
                interval: 0          // 强制显示所有标签
                // rotate: 30,  // 标签旋转30度（防止重叠）
            },
            // data: res.category
        },
        yAxis: {
            type: 'value',
            name: "万辆",
            splitLine: { show: false }  // 隐藏刻度线
        },
        series: [
            {
                // data: [120, 200, 150, 80, 70, 110, 130],
                data: res.seriesData,
                realData: res.realData,
                type: 'bar',
                barWidth: '6',
                showBackground: true,
                smooth: true,
                backgroundStyle: {
                    borderRadius: [4, 4, 0, 0],
                    // color: 'rgba(23, 42, 70, 1)'
                    color: 'rgba(0, 148, 255, 0.1)'
                },
                itemStyle: {
                    borderRadius: [4, 4, 0, 0],
                    // 动态返回渐变颜色
                    color: function (params: any) {
                        const index = params.dataIndex; // 当前数据的索引
                        // 前3条（Mon, Tue, Wed）使用渐变1
                        if (index < 3) {
                            return new echarts.graphic.LinearGradient(
                                0, 0, 0, 1, // 渐变方向（垂直）
                                [
                                    { offset: 0, color: '#FF4F00' }, // 渐变起始色
                                    { offset: 1, color: '#D3B70E' }  // 渐变结束色
                                ]
                            );
                        }
                        // 后3条（Thu, Fri, Sat）使用渐变2
                        else {
                            return new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    { offset: 0, color: '#018FFF' }, // 渐变起始色
                                    { offset: 1, color: '#00F4FF' }  // 渐变结束色
                                ]
                            );
                        }
                    }
                }
            },
        ],
        grid: {
            left: '0',    // 左侧间距
            right: '0',   // 右侧间距
            bottom: '0',    // 底部间距
            top: '10',       // 顶部间距
            containLabel: true // 确保坐标轴标签在grid内
        },
        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 ? realData + '辆' : data.value + '万辆'} </div>
            `;
            }
        },
    };


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

// 拿到断面流量数据
const handleGetSectionFlowCount = async () => {
    const req: any = {
        // StatisticsMonth: moment().subtract(1, 'M').format('YYYYMM'),
        StatisticsMonth: "202504",
        Serverpart_ID: props.currentService?.SERVERPART_ID || "",
        SortStr: "SectionFlow_Count desc",
        ProvinceCode: "530000"
    }
    let data = await handleGetProvinceMonthAnalysis(req)

    let list = data.slice(0, 10)
    let category: string[] = []
    let seriesData: number[] = []
    let realData: string[] = []

    list.forEach((item: any) => {
        category.push(item.Serverpart_Name.split('服务区')[0])
        seriesData.push(Number((item.SectionFlow_Count / 10000).toFixed(2)))
        realData.push(item.SectionFlow_Count.toLocaleString())
    })

    let res = {
        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="TrendOfTrafficFlowBox">
        <SmallTitle :title="`车流断面趋势(04月)`" />

        <div class="TrendOfTrafficFlowCharts">
            <div class="trafficFlowCarUnit">辆</div>
            <div class="TrendOfTrafficFlow" id="TrendOfTrafficFlow"></div>
        </div>
    </div>
</template>
