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

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

let myChart: echarts.ECharts;

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

// 初始运行的方法
const handleGoMounted = async () => {
    const res: any = await handleGetSectionFlowCount()
    console.log('多业态收入2', res)
    const chartDom = document.getElementById('MultiIndustryIncome');
    if (!chartDom) return;


    myChart = echarts.init(chartDom);

    const option = {
        xAxis: {
            type: 'category',
            boundaryGap: true,
            data: res.category
        },
        yAxis: {
            type: 'value',
            name: "万元",
            splitLine: { show: false }  // 隐藏刻度线
        },
        grid: {
            left: '0',    // 左侧间距
            right: '0',   // 右侧间距
            bottom: '0',    // 底部间距
            top: '30',       // 顶部间距
            containLabel: true // 确保坐标轴标签在grid内
        },
        series: [
            {
                data: res.seriesData,
                realData: res.realData,
                type: 'bar',
                smooth: true,
                showBackground: true,
                barWidth: '6',
                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: '#69BCFF'
                }
            }
        ],
        tooltip: {  // 新增 tooltip 配置
            trigger: 'axis',  // 触发类型：坐标轴触发
            axisPointer: {    // 坐标轴指示器配置
                type: 'shadow' // 阴影指示器（适合柱状图）
            },
            formatter: function (params: any) {  // 自定义提示框内容
                // params 是数组，包含当前 hover 的所有系列数据
                console.log('paramsparamsparams', params);

                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);
    myChart.resize();
    window.addEventListener('resize', resizeChart);
}

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

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

// 拿到入区车辆的趋势
const handleGetSectionFlowCount = async () => {
    const req: any = {
        ProvinceCode: '530000',
        // StatisticsDate: moment().subtract(1, 'd').format('YYYY-MM-DD'),
        StatisticsDate: '2025-04-30',
        BusinessTradeIds: -1,
        DataType: 2,
        ServerpartId: props.currentService?.SERVERPART_ID || "",
    }

    const data = await handleGetBusinessTradeRevenue(req)

    console.log('多业态收入', data)
    let list: any = data.BusinessTradeRank
    let category: any = []
    let seriesData: any = []
    let realData: any = []

    if (list && list.length > 0) {
        list.forEach((item: any) => {
            category.push(item.name)
            seriesData.push(Number(item.value) / 10000)
            realData.push(item.data)
        })
    }


    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="MultiIndustryIncomeBox">
        <SmallTitle :title="'多业态收入'"></SmallTitle>

        <div class="MultiIndustryIncomeCharts">
            <!-- <div class="MultiIndustryIncomeUnit">万元</div> -->
            <div class="MultiIndustryIncome" id="MultiIndustryIncome"></div>

            <!-- <div class="YOYBox"></div>
            <div class="QOQBox"></div> -->
        </div>
    </div>
</template>