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

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

let myChart: echarts.ECharts;
// 当前查询的时间
let searchTime = ref<string>()

onMounted(async () => {
    await handleGoMounted()
})

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

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

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

    console.log('fhdsuFHDSJFAHKD', res);


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

    myChart = echarts.init(chartDom);

    const option = {
        xAxis: {
            type: 'category',
            data: res.category,
            axisLabel: {
                interval: 1,  // 改为隔1个显示1个（原为3）
                showMinLabel: true,
                showMaxLabel: true
            }
        },
        yAxis: [
            {
                type: 'value',
                name: '停留时长',
                splitLine: { show: false },
                axisLine: {
                    show: true
                },
                axisLabel: {
                    formatter: '{value}' // 添加单位
                }
            }
        ],
        grid: {
            left: '10',    // 增加左侧空间
            right: '10',   // 增加右侧空间
            bottom: '10',
            top: '50',
            containLabel: true
        },
        series: [
            {
                name: '小型车',
                data: res?.smallCarData && res?.smallCarData.map((value: any, index: any) => ({
                    value: value,
                    symbol: index % 2 === 0 ? 'circle' : 'none', // 关键修改：隔一个显示一个点
                    symbolSize: 6,
                    itemStyle: {
                        color: '#0094FF', // 纯色填充
                        borderWidth: 0    // 无边框
                    }
                })),
                type: 'line',
                // smooth: true,
                lineStyle: {
                    width: 2,
                    color: '#0094FF'
                },
            },
            {
                name: '中型车',
                data: res?.middleCarData && res?.middleCarData.map((value: any, index: any) => ({
                    value: value,
                    symbol: index % 2 === 0 ? 'circle' : 'none', // 关键修改：隔一个显示一个点
                    symbolSize: 6,
                    itemStyle: {
                        color: '#7D4CD2', // 纯色填充
                        borderWidth: 0    // 无边框
                    }
                })),
                type: 'line',
                // smooth: true,
                lineStyle: {
                    width: 2,
                    color: '#7D4CD2'
                },
            },
            {
                name: '大型车',
                data: res?.bigCarData && res?.bigCarData.map((value: any, index: any) => ({
                    value: value,
                    symbol: index % 2 === 0 ? 'circle' : 'none', // 关键修改：隔一个显示一个点
                    symbolSize: 6,
                    itemStyle: {
                        color: '#00FFB7', // 纯色填充
                        borderWidth: 0    // 无边框
                    }
                })),
                type: 'line',
                // smooth: true,
                lineStyle: {
                    width: 2,
                    color: '#00FFB7'
                },
            }
        ],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'line' // 改为线条指示器
            },
            formatter: function (params: any) {
            }
        },
        legend: {
            data: ['小型车', '中型车', '大型车'], // 确保图例显示
            textStyle: { color: '#fff' }, // 图例文字颜色
            right: '0',      // 距离右侧4%的位置
            top: '0',
        }
    };

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

}

// 拿到数据的方法
const handleGetData = async () => {
    let category: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23]
    // let seriesData: number[] = []
    // let realData: string[] = []
    let smallCarData: number[] = []
    let middleCarData: number[] = []
    let bigCarData: number[] = []

    const req: any = {
        StartMonth: moment().subtract(1, 'd').format('YYYYMM'),
        EndMonth: moment().subtract(1, 'd').format('YYYYMM'),
        Province_Code: '340000',
        TimeSpan: 1,
    }
    console.log('reqreqreqreqreq', req);

    searchTime.value = moment(req.StartMonth).format('MM')
    const data = await handleGetBayonetSTAnalysis(req)

    console.log('fdsjifjasifjdsnafsdvbhcav', data);

    if (data && data.length > 0) {
        data.forEach((item: any) => {
            if (item.name === '小型车') {
                if (item.data && item.data.length > 0) {
                    item.data.forEach((subItem: any) => {
                        smallCarData.push(subItem[1])
                    })
                }
            } else if (item.name === '中型车') {
                if (item.data && item.data.length > 0) {
                    item.data.forEach((subItem: any) => {
                        middleCarData.push(subItem[1])
                    })
                }
            } else if (item.name === '大型车') {
                if (item.data && item.data.length > 0) {
                    item.data.forEach((subItem: any) => {
                        bigCarData.push(subItem[1])
                    })
                }
            }
        })
    }

    let res: any = {
        category: category,// x轴的内容
        // seriesData: seriesData,// y轴的数据
        // realData: realData// 真实数据
        smallCarData: smallCarData,
        middleCarData: middleCarData,
        bigCarData: bigCarData,
    }
    return res
}


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

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


</script>

<template>
    <div class="VehicleModelStayBox">
        <SmallTitle :title="`车型停留分析/日均${searchTime ? `(${searchTime}月)` : ''}`"></SmallTitle>

        <div class="VehicleModelStayCharts" style="margin-top:15px">
            <div class="VehicleModelStay" id="VehicleModelStay"></div>
        </div>
    </div>
</template>