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

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

let myChart: echarts.ECharts;

onMounted(async () => {

    const res = await handleGetSectionFlowCount()

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

    myChart = echarts.init(chartDom);

    const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        grid: {
            left: '0',    // 增加左侧空间
            right: '0',   // 增加右侧空间
            bottom: '0',
            top: '30',
            containLabel: true
        },
        toolbox: {
            feature: {
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        legend: {
            data: ['已收金额', '完成度'],
            top: 0,           // 贴顶部
            right: 0,         // 贴右侧
            textStyle: {
                color: '#fff' // 文字颜色为白色
            }
        },
        xAxis: [
            {
                type: 'category',
                data: res.category,
                axisPointer: {
                    type: 'shadow'
                },
                axisLabel: {
                    interval: 0, // 强制显示所有标签
                    rotate: 0,  // 如果标签过多，可以旋转角度（可选）
                    fontSize: 10 // 调整字体大小（可选）
                }
            }
        ],
        yAxis: {
            type: 'value',
            splitLine: { show: false }  // 隐藏刻度线
        },
        series: [
            {
                name: '已收金额',
                type: 'bar',
                barWidth: '6px', // 柱子宽度（可以是百分比或像素值，如 '40px'）
                showBackground: true, // 显示柱子背景
                backgroundStyle: {
                    color: '#142742', // 背景颜色（半透明）
                    borderRadius: [6, 6, 0, 0] // 背景圆角
                },
                itemStyle: {
                    borderRadius: [6, 6, 0, 0], // 柱子圆角（左上、右上、右下、左下）
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            { offset: 0, color: '#008CFF' }, // 顶部颜色
                            { offset: 1, color: '#00F6FF' }  // 底部颜色
                        ]
                    }
                },
                data: res.seriesData
            },

            {
                name: '完成度',
                type: 'line',
                tooltip: {
                    valueFormatter: function (value: any) {
                        return value;
                    }
                },
                itemStyle: {
                    borderRadius: [6, 6, 0, 0], // 柱子圆角（左上、右上、右下、左下）
                    color: "#FF9500"
                },
                data: res.seriesDataSecond
            }
        ]
    };


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

// 拿到断面流量数据
const handleGetSectionFlowCount = async () => {

    // "1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"
    let category: string[] = []
    let seriesData: number[] = []
    let seriesDataSecond: number[] = []
    let realData: string[] = []

    const req: any = {
        ProvinceCode: "530000",
        StatisticsYear: moment().subtract(1, 'd').format('YYYY')
    }
    const data = await handleGetProjectMonthlyArrearageList(req)

    console.log('dsaidjaiodjaos', data);

    let monthList: any = data.ProjectMonthlyCompleteList

    if (monthList && monthList.length > 0) {
        monthList.forEach((item: any) => {
            category.push(moment(`${item.Business_Month}01`).format('MM') + '月')
            seriesData.push(item.Payment_Amount)
            seriesDataSecond.push(item.Complete_Degree)
        })
    }


    let res = {
        category: category,// x轴的内容
        seriesData: seriesData,// y轴的数据
        seriesDataSecond: seriesDataSecond,
        realData: realData
    }

    return res

}

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

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

<template>
    <div class="TotalAccountsReceivableBox">
        <SmallTitle :title="'应收总额完成度'" />

        <div class="TotalAccountsReceivableCharts">
            <!-- <div class="trafficFlowCarUnit">万辆</div> -->
            <div class="TotalAccountsReceivable" id="TotalAccountsReceivable"></div>
        </div>
    </div>
</template>
