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

// 注册组件
echarts.use([
    BarChart,
    LineChart,
    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: any = await handleGetSectionFlowCount()
    const chartDom = document.getElementById('VehiclesEntering');
    if (!chartDom) return;
    myChart = echarts.init(chartDom);


    const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },

        legend: {
            data: [`${res.currentYear}年车流量`, `${res.yesYear}年车流量`, `${res.currentYear}年交易额`, `${res.yesYear}年交易额`],
            textStyle: {
                color: '#fff',
                fontSize: 12  // 设置图例文字大小为12px
            },
            right: '4%',
            top: '0%',
            orient: 'horizontal',
            type: 'scroll'     // 如果图例过长，启用滚动
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top: '40%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: true,
            data: res.category,
            axisPointer: {
                type: 'shadow'
            }
        },
        yAxis: [
            {
                type: 'value',
                name: '车流量(万辆)',
                splitLine: { show: false },
                nameTextStyle: {
                    color: '#666',
                    padding: [0, 30, 0, 0]  // 调整单位位置
                },
                splitNumber: 4,
            },
            {
                type: 'value',
                name: '交易金额(万元)',
                splitLine: { show: false },
                nameTextStyle: {
                    color: '#666',
                    padding: [0, 0, 0, 30]  // 调整单位位置
                },
                splitNumber: 4,
            }
        ],
        series: [
            {
                name: `${res.currentYear}年车流量`,
                type: 'bar',
                barWidth: 5,
                data: res.seriesDataCar,
                yAxisIndex: 0,
                itemStyle: {
                    borderRadius: [3, 3, 0, 0]
                }
            },
            {
                name: `${res.yesYear}年车流量`,
                type: 'bar',
                smooth: true,
                data: res.yesSeriesDataCar,
                yAxisIndex: 0,
                barWidth: 5,
                itemStyle: {
                    borderRadius: [3, 3, 0, 0]
                }
            },
            {
                name: `${res.currentYear}年交易额`,
                type: 'line',
                data: res.seriesDataRevenue,
                yAxisIndex: 1,
                symbol: 'circle',
                symbolSize: 6,
                lineStyle: {
                    width: 2
                }
            },
            {
                name: `${res.yesYear}年交易额`,
                type: 'line',
                data: res.yesSeriesDataRevenue,
                yAxisIndex: 1,
                symbol: 'circle',
                symbolSize: 6,
                lineStyle: {
                    width: 2
                }
            }
        ],
        color: ['#008CFF', '#69BCFF', '#FF5E5E', '#FF9500'] // Custom colors for each series
    };
    myChart.setOption(option);
    myChart.resize();
    window.addEventListener('resize', resizeChart);
}

// 拿到入区车辆的趋势
const handleGetSectionFlowCount = async () => {
    // const req: any = {
    //     Province_Code: '340000',
    //     Statistics_Date: moment().subtract(1, 'd').format('YYYY-MM-DD'),
    //     GroupType: 2,
    //     Serverpart_ID: props.currentService?.SERVERPART_ID || "",
    // }
    // const data = await handleGetSPBayonetList(req)

    const req: any = {
        StartDate: moment().startOf('y').format('YYYY-MM-DD'),
        EndDate: moment().subtract(1, 'd').format('YYYY-MM-DD'),
        Serverpart_ID: props.currentService?.SERVERPART_ID || "1143,1144,1186,1188,1189,1190,1191,1192,1193,979,999,1023,1029,1030,1031,1033,1037,1041,1078,1087,1095,1137,1141,1147,1157,1159,1164,1165,1170,1174,981,985,987,994,1007,1009,1010,1012,1016,971,996,1002,1017,1018,1022,1027,1032,1073,1076,1099,1118,1122,1140,1142,1150,1171,970,969,978,1001,1005,1015,1050,1051,1052,1053,1064,1066,1096,1097,1101,1103,1104,1105,1106,1109,1112,1114,1115,1116,1117,991,995,1039,1080,1094,1100,1107,1123,1127,1133,1154,1155,1161,1163,1179,1180,1019,1021,1048,1049,1056,1059,1062,1063,1069,1093,1067,1228,1008,1070,1072,1166,1113,1148,1153,986,1086,1075,1182,1068,1226,1218,1088,1090,1058,1044,1084,1077,1089,1081,1091,1083,1162,1036,1092,988,993,1111,1158,1194,1202,1230,1198,1207,1216,1221,1203,1206,1209,1215,1227,1201,1205,1208,1214,1217,1229,1212,1065,1085,1055,1071,982,1168,1185,1110,977,1169,973,974,1011,1151,1121,1046,1045,1172,1146,976,1187,1156,1181,1136,1138,1211,983,1195,1131,1176,1167,1223,997,1252,1225,1043,1129,992,1149,975,1382,989,1047,1197,1025,1199,1183,1222,1178,1003,1013,1224,1139,1125,1173,1135,1038,1177,1060,1175,1184,1035,1026,1028,1079,1119,1120,1489"
    }
    const data = await handleGetMonthAnalysis(req)

    const yesReq: any = {
        StartDate: moment().subtract(1, 'y').startOf('y').format('YYYY-MM-DD'),
        EndDate: moment().subtract(1, 'y').endOf('y').format('YYYY-MM-DD'),
        Serverpart_ID: props.currentService?.SERVERPART_ID || "1143,1144,1186,1188,1189,1190,1191,1192,1193,979,999,1023,1029,1030,1031,1033,1037,1041,1078,1087,1095,1137,1141,1147,1157,1159,1164,1165,1170,1174,981,985,987,994,1007,1009,1010,1012,1016,971,996,1002,1017,1018,1022,1027,1032,1073,1076,1099,1118,1122,1140,1142,1150,1171,970,969,978,1001,1005,1015,1050,1051,1052,1053,1064,1066,1096,1097,1101,1103,1104,1105,1106,1109,1112,1114,1115,1116,1117,991,995,1039,1080,1094,1100,1107,1123,1127,1133,1154,1155,1161,1163,1179,1180,1019,1021,1048,1049,1056,1059,1062,1063,1069,1093,1067,1228,1008,1070,1072,1166,1113,1148,1153,986,1086,1075,1182,1068,1226,1218,1088,1090,1058,1044,1084,1077,1089,1081,1091,1083,1162,1036,1092,988,993,1111,1158,1194,1202,1230,1198,1207,1216,1221,1203,1206,1209,1215,1227,1201,1205,1208,1214,1217,1229,1212,1065,1085,1055,1071,982,1168,1185,1110,977,1169,973,974,1011,1151,1121,1046,1045,1172,1146,976,1187,1156,1181,1136,1138,1211,983,1195,1131,1176,1167,1223,997,1252,1225,1043,1129,992,1149,975,1382,989,1047,1197,1025,1199,1183,1222,1178,1003,1013,1224,1139,1125,1173,1135,1038,1177,1060,1175,1184,1035,1026,1028,1079,1119,1120,1489"
    }

    const yesData = await handleGetMonthAnalysis(yesReq)

    let category: string[] = []
    let seriesDataCar: number[] = []
    let seriesDataRevenue: number[] = []
    let realDataCar: number[] = []
    let realDataRevenue: number[] = []

    console.log('dnasfhuaidhsdaghsakjlhsldk', data);
    if (data && data.length > 0) {
        data.forEach((item: any) => {
            category.push(`${item.Statistics_Month < 10 ? '0' + item.Statistics_Month : item.Statistics_Month}`)
            seriesDataCar.push(item.Vehicle_Count / 10000)
            realDataCar.push(item.Vehicle_Count)
            seriesDataRevenue.push(item.RevenueAmount / 10000)
            realDataRevenue.push(item.RevenueAmount)
        })
    }

    let yesSeriesDataCar: number[] = []
    let yesSeriesDataRevenue: number[] = []
    let yesRealDataCar: number[] = []
    let yesRealDataRevenue: number[] = []

    if (yesData && yesData.length > 0) {
        yesData.forEach((item: any) => {
            yesSeriesDataCar.push(item.Vehicle_Count / 10000)
            yesSeriesDataRevenue.push(item.RevenueAmount / 10000)
            yesRealDataCar.push(item.Vehicle_Count)
            yesRealDataRevenue.push(item.RevenueAmount)
        })
    }



    let res: any = {
        category: category,// x轴的内容
        seriesDataCar: seriesDataCar, // 入区车流量 万
        seriesDataRevenue: seriesDataRevenue,// 营收 万
        realDataCar: realDataCar,// 入区车流量 实际
        realDataRevenue: realDataRevenue,// 营收 实际
        yesSeriesDataCar: yesSeriesDataCar,// 入区车流量 万  去年
        yesSeriesDataRevenue: yesSeriesDataRevenue,// 营收 万 去年
        yesRealDataCar: yesRealDataCar,// 入区车流量 实际 去年
        yesRealDataRevenue: yesRealDataRevenue,// 营收 实际  去年
        currentYear: moment().format('YYYY'), // 当前年份
        yesYear: moment().subtract(1, 'y').format('YYYY')// 去年年份
    }

    console.log('fdshufahsudifhasdjkfh', res);



    return res
}


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

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

</script>




<template>
    <div class="VehiclesEnteringBox">
        <SmallTitle :title="'月度车流累计'">
            <!-- <template #extra>
                <div class="legendBox" style="display: flex;align-items: center;">
                    <div class="legendItem" style="display: flex;align-items: center;margin-right: 20px;">
                        <div class="legendIcon"
                            style="width: 14px;height: 14px;background: #7D4CD2;border-radius: 3px 3px 3px 3px;margin-right: 10px;">
                        </div>
                        <div class="legendName" style="font-size: 12px;color: #FFFFFF;">小型车辆</div>
                    </div>
                    <div class="legendItem" style="display: flex;align-items: center;margin-right: 20px;">
                        <div class="legendIcon"
                            style="width: 14px;height: 14px;background: #0094FF;border-radius: 3px 3px 3px 3px;margin-right: 10px;">
                        </div>
                        <div class="legendName" style="font-size: 12px;color: #FFFFFF;">中型车辆</div>
                    </div>
                    <div class="legendItem" style="display: flex;align-items: center;">
                        <div class="legendIcon"
                            style="width: 14px;height: 14px;background: #FF9500;border-radius: 3px 3px 3px 3px;margin-right: 10px;">
                        </div>
                        <div class="legendName" style="font-size: 12px;color: #FFFFFF;">大型车辆 </div>
                    </div>
                </div>
            </template> -->
        </SmallTitle>

        <div class="VehiclesEnteringCharts">
            <!-- <div class="VehiclesEnteringUnit">辆</div> -->
            <div class="VehiclesEntering" id="VehiclesEntering"></div>
        </div>
    </div>
</template>