<script setup lang="ts">
import SmallTitle from '../smallTitle/smallTitle.vue';
import './AccountsReceivableWarning.less'
import * as echarts from 'echarts/core';
import { PieChart } from 'echarts/charts';
import {
    GridComponent,
    TitleComponent,
    TooltipComponent,
    LegendComponent
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import { onBeforeUnmount, onMounted, ref } from 'vue';
import wallet from '../../../../assets/image/wallet.png'
import { handleGetContractExpiredInfo, handleGetProjectSummaryInfo } from '../../service';

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

let myChart: echarts.ECharts;
let myChart2: echarts.ECharts;
// 自定义颜色列表
const colorList = ['#FF307C', '#FF9500', '#00FFB7'];
const colorListSecond = ['#FF307C', '#FF9500', '#00FFB7'];
// tab列表
const tabList = [
    { label: "应收账款预警", value: 1 },
    { label: "合同到期预警", value: 2 },
]
// 选择的tab
let selectTab = ref<number>(1)
// 应收账款预警
let AccountsReceivableWarning = ref<any>()
// 图例列表
let legendList = ref<any>([])


onMounted(async () => {
    await handleHaveFirstPie()
    await handleHaveSecond()
})

// 获取数据
const handleGetData = async () => {
    let category: string[] = []
    let seriesData: number[] = []
    let realData: string[] = []

    const req: any = {
        // ProvinceCode: "530000",
        ProvinceCode: "340000",
    }
    const data = await handleGetProjectSummaryInfo(req)

    console.log('dsajoidasjodasjoida', data);

    // 应收账款预警
    let ArrearageList = data.ArrearageList

    AccountsReceivableWarning.value = data


    if (ArrearageList && ArrearageList.length > 0) {
        ArrearageList.forEach((item: any) => {
            category.push(item.Overdue_Situation)
            seriesData.push(item.Arrearage_Amount)
        })
    }

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

// 修改选择的tab
// const handleChangeSelectTab = async (value: number) => {
//     selectTab.value = value
//     if (value === 1) {
//         await handleHaveFirstPie()
//     } else {
//         await handleHaveSecond()
//     }
// }

// 拿到第一个
const handleHaveFirstPie = async () => {
    const res: any = await handleGetData()
    const chartDom = document.getElementById('AccountsReceivableWarningPieBox1');
    if (!chartDom) return;

    myChart = echarts.init(chartDom);

    const option = {
        tooltip: {
            trigger: 'item',
            backgroundColor: '#fff',  // 白色背景
            borderColor: '#fff',     // 白色边框
            textStyle: {
                color: '#333',       // 文字颜色
                fontSize: 14
            },
            formatter: function (params: any) {
                return `
                <div style="font-weight:bold">${params.name}  ${params.value}%</div>
            `;
            }
        },
        graphic: {  // 关键配置：在图表中心添加图片
            elements: [
                {
                    type: 'image',
                    style: {
                        image: wallet,
                        width: 83,
                        height: 83
                    },
                    left: 'center',
                    top: 'center',
                    z: 10
                }
            ]
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['80%', '100%'],
                center: ['50%', '50%'],  // 关键修改：强制居中 [水平位置, 垂直位置]
                avoidLabelOverlap: false,

                itemStyle: {
                    color: function (params: any) {
                        return colorList[params.dataIndex];
                    }
                },
                label: {
                    show: false
                },
                emphasis: false,
                labelLine: {
                    show: false
                },
                data: res.seriesData
            }
        ]
    };

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

const handleGetDataSecond = async () => {
    let category: string[] = []
    let seriesData: number[] = []
    let realData: string[] = []

    const req: any = {
        // ProvinceCode: "530000",
        ProvinceCode: "340000",
    }
    const data = await handleGetContractExpiredInfo(req)

    console.log('dasdasjdasoijdo', data);

    // 应收账款预警
    let ContractHalfYearListExpired = data.ContractHalfYearListExpired

    AccountsReceivableWarning.value = data


    if (ContractHalfYearListExpired && ContractHalfYearListExpired.length > 0) {
        ContractHalfYearListExpired.forEach((item: any) => {
            category.push(item.Expired_Situation)
            seriesData.push(item.Expired_Count)
        })
    }

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

// 拿到第二个
const handleHaveSecond = async () => {
    const res: any = await handleGetDataSecond()
    const chartDom = document.getElementById('AccountsReceivableWarningPieBox2');
    if (!chartDom) return;

    myChart2 = echarts.init(chartDom);

    const option = {
        tooltip: {
            trigger: 'item',
            backgroundColor: '#fff',  // 白色背景
            borderColor: '#fff',     // 白色边框
            textStyle: {
                color: '#333',       // 文字颜色
                fontSize: 14
            },
            formatter: function (params: any) {
                return `
                <div style="font-weight:bold">${params.name}  ${params.value}%</div>
            `;
            }
        },
        graphic: {  // 关键配置：在图表中心添加图片
            elements: [
                {
                    type: 'image',
                    style: {
                        image: wallet,
                        width: 83,
                        height: 83
                    },
                    left: 'center',
                    top: 'center',
                    z: 10
                }
            ]
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['80%', '100%'],
                center: ['50%', '50%'],  // 关键修改：强制居中 [水平位置, 垂直位置]
                avoidLabelOverlap: false,

                itemStyle: {
                    color: function (params: any) {
                        return colorListSecond[params.dataIndex];
                    }
                },
                label: {
                    show: false
                },
                emphasis: false,
                labelLine: {
                    show: false
                },
                data: res.seriesData
            }
        ]
    };

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

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

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


</script>

<template>
    <div class="AccountsReceivableWarningBox">

        <!-- <div class="selectTabBox">
            <div :class="selectTab === item.value ? 'tabItem selectTabItem' : 'tabItem'"
                v-for="(item, index) in tabList" :key="index" @click="handleChangeSelectTab(item.value)">{{ item.label
                }}</div>
        </div> -->

        <div class="AccountsReceivableWarningContent">

            <SmallTitle :title="'应收账款预警'" />

            <div class="AccountsReceivableWarningPie" style="margin-top: 25px;">
                <div class="progressPieLeft" id="AccountsReceivableWarningPieBox1"></div>

                <div class="progressPieRight">
                    <div class="progressPieTop">
                        <div class="progressPieTopItem">
                            <div class="progressPieTopItemLabel">应收欠款(全部)</div>
                            <div class="progressPieTopItemValueBox">
                                <span class="progressPieTopItemValue">{{
                                    AccountsReceivableWarning?.Arrearage_Amount || '-' }}</span>
                                <span class="progressPieTopItemUnit">万元</span>
                            </div>
                        </div>
                        <div class="progressPieTopItem">
                            <div class="progressPieTopItemLabel">欠款合同</div>
                            <div class="progressPieTopItemValueBox">
                                <span class="progressPieTopItemValue">{{
                                    AccountsReceivableWarning?.ArrearageContract_Count || '-' }}</span>
                                <span class="progressPieTopItemUnit">份</span>
                            </div>
                        </div>
                    </div>

                    <div class="progressPieBottom">
                        <div class="progressPieBottomItem">
                            <div class="progressPieBottomItemTop">
                                <div class="progressPieBottomItemTopLegend" :style="{ background: colorList[0] }"></div>
                                <div class="progressPieBottomItemTopLabel">重大</div>
                            </div>

                            <div class="progressPieBottomItemBottom">
                                3个月内
                            </div>
                        </div>

                        <div class="progressPieBottomItem">
                            <div class="progressPieBottomItemTop">
                                <div class="progressPieBottomItemTopLegend" :style="{ background: colorList[1] }"></div>
                                <div class="progressPieBottomItemTopLabel">严重</div>
                            </div>

                            <div class="progressPieBottomItemBottom">
                                3-6个月
                            </div>
                        </div>

                        <div class="progressPieBottomItem">
                            <div class="progressPieBottomItemTop">
                                <div class="progressPieBottomItemTopLegend" :style="{ background: colorList[2] }"></div>
                                <div class="progressPieBottomItemTopLabel">一般</div>
                            </div>

                            <div class="progressPieBottomItemBottom">
                                ≥6个月
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <SmallTitle :title="'合同到期预警'" style="margin-top: 21px;" />

            <div class="AccountsReceivableWarningPie" style="margin-top: 25px;">
                <div class="progressPieLeft" id="AccountsReceivableWarningPieBox2"></div>

                <div class="progressPieRight">
                    <div class="progressPieTop" style="border-bottom: none;">
                        <div class="progressPieTopItem">
                            <div class="progressPieTopItemLabel">半年内到期合同</div>
                            <div class="progressPieTopItemValueBox">
                                <span class="progressPieTopItemValue">{{
                                    AccountsReceivableWarning?.Expired_HalfYearCount || '-' }}</span>
                                <span class="progressPieTopItemUnit">份</span>
                            </div>
                        </div>
                    </div>

                    <div class="progressPieBottomSecond">
                        <div class="progressPieBottomItem"
                            v-for="(item, index) in AccountsReceivableWarning?.ContractHalfYearListExpired"
                            :key="index">
                            <div class="progressPieBottomItemTop">
                                <div class="progressPieBottomItemTopLegend"
                                    :style="{ background: colorListSecond[index] }">
                                </div>
                                <div class="progressPieBottomItemTopLabel">{{ item.Expired_Situation || "" }}</div>
                            </div>

                            <div class="progressPieBottomItemBottomValueBox">
                                <div class="progressPieBottomItemBottomValue">{{ item.Expired_Count || "" }}</div>
                                <div class="progressPieBottomItemBottomUnit">份</div>
                            </div>
                        </div>


                    </div>

                </div>
            </div>
        </div>
    </div>
</template>