<script setup lang="ts">
import SmallTitle from '../smallTitle/smallTitle.vue';
import './PaymentProgress.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 } from '../../service';

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

let myChart: echarts.ECharts;
// 自定义颜色列表
const colorList = ['#FF9500', '#00FFB7', '#FFD900', '#00FFB7', '#0094FF', '#7D4CD2'];
// 收款
let receivePayment = ref<any>()

onMounted(async () => {

    const res: any = await handleGetData()

    const chartDom = document.getElementById('progressPieBox');
    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 handleGetData = async () => {

    // 拿到现在的到期金额收款进度
    const req: any = {
        ProvinceCode: '530000',
    }

    const data = await handleGetContractExpiredInfo(req)
    console.log('首款完成进度', data);

    receivePayment.value = data

    let category: string[] = ["未到期金额", "到期金额"]
    let seriesData: number[] = [data.UnExpired_Amount, data.Expired_Amount]
    let realData: string[] = []


    let res = {
        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="PaymentProgressBox">
        <SmallTitle :title="'收款完成进度'" />

        <div class="progressBox">
            <div class="progressBoxTop">
                <div class="boxTopLeft">到期金额收款进度</div>
                <div class="boxTopRight">
                    <span class="progressBoxrightLabel">总金额：</span>
                    <span class="progressBoxrightValue">{{ receivePayment?.Paid_Amount ? receivePayment?.Paid_Amount :
                        ""
                        }}</span>
                    <span class="progressBoxrightUnit">万元</span> 
                </div>
            </div>

            <div class="progressContent">
                <div class="progressHave" :style="{ width: receivePayment?.Complete_Degree + '%' }"></div>
                <div class="haveText">{{ receivePayment?.Complete_Degree ? receivePayment?.Complete_Degree + '%' : '' }}
                </div>
            </div>

            <div class="progressPieBox">
                <div class="progressPieLeft" id="progressPieBox"></div>

                <div class="progressPieRight">
                    <div class="progressPieItem" style="margin-bottom: 30px;">
                        <div class="progressPieItemLeft">
                            <div class="itemIcon" style="background-color: #FF9500;"></div>
                            <div class="itemName">未到期金额</div>
                        </div>
                        <div class="progressPieItemRight">
                            <div class="itemValue">{{ receivePayment?.UnExpired_Amount }}</div>
                            <div class="itemUnit">元</div>
                        </div>
                    </div>
                    <div class="progressPieItem">
                        <div class="progressPieItemLeft">
                            <div class="itemIcon" style="background-color: #00FFB7;"></div>
                            <div class="itemName">到期金额</div>
                        </div>
                        <div class="progressPieItemRight">
                            <div class="itemValue">{{ receivePayment?.Expired_Amount }}</div>
                            <div class="itemUnit">元</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>