<script setup lang="ts">
import './SignedClients.less'
import SignedClientsIcon from '../../../../assets/image/SignedClientsIcon.png'
import { onBeforeUnmount, onMounted, ref } from 'vue';
import { handleGetProjectSummaryInfo } from '../../service';

import * as echarts from 'echarts/core';
import { PieChart } from 'echarts/charts';
import {
    GridComponent,
    TitleComponent,
    TooltipComponent,
    LegendComponent
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';


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

let myChart: echarts.ECharts;
let myChart2: echarts.ECharts;

// 当前的数据
let realDataObj = ref<any>()
// 合作分成
let shareRevenue = ref<any>()
// 固定租金
let FixedRent = ref<any>()

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

// 拿到数据
const handleGetData = async () => {
    const req: any = {
        ProvinceCode: '530000'
    }
    const data = await handleGetProjectSummaryInfo(req)


    console.log('handleGetDatahandleGetDatahandleGetDatahandleGetData', data);
    realDataObj.value = data

    shareRevenue.value = data.BusinessTypeSummaryList[0]
    FixedRent.value = data.BusinessTypeSummaryList[1]



    const chartDom = document.getElementById('SignedClients1');
    if (!chartDom) return;
    myChart = echarts.init(chartDom);


    const chartDom2 = document.getElementById('SignedClients2');
    if (!chartDom) return;
    myChart2 = echarts.init(chartDom2);


    const option1 = {
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['80%', '100%'],
                center: ['50%', '50%'],  // 关键修改：强制居中 [水平位置, 垂直位置]
                avoidLabelOverlap: false,
                label: {
                    show: false
                },
                emphasis: false,
                labelLine: {
                    show: false
                },
                itemStyle: {
                    color: function (params: any) {
                        // 自定义颜色逻辑
                        return params.dataIndex === 0 ? '#FF9500' : '#634B24';
                    }
                },
                data: [((shareRevenue?.value.ArrearageMerchant_Count / realDataObj?.value.Contract_SignCount) * 100), 100 - ((shareRevenue?.value.ArrearageMerchant_Count / realDataObj?.value.Contract_SignCount) * 100)]
            }
        ]
    };

    const option2 = {
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['80%', '100%'],
                center: ['50%', '50%'],  // 关键修改：强制居中 [水平位置, 垂直位置]
                avoidLabelOverlap: false,
                label: {
                    show: false
                },
                emphasis: false,
                labelLine: {
                    show: false
                },
                itemStyle: {
                    color: function (params: any) {
                        // 自定义颜色逻辑
                        return params.dataIndex === 0 ? '#FF9500' : '#634B24';
                    }
                },
                data: [((FixedRent?.value.ArrearageMerchant_Count / realDataObj?.value.Contract_SignCount) * 100), 100 - ((FixedRent?.value.ArrearageMerchant_Count / realDataObj?.value.Contract_SignCount) * 100)]
            }
        ]
    };



    myChart.setOption(option1);
    myChart.resize();

    myChart2.setOption(option2);
    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="SignedClientsBox">
        <div class="SignedClientsBigItem">
            <div class="SignedClientsBigLeft">
                <img :src="SignedClientsIcon" class="SignedClientsBigLeftImg" />
            </div>

            <div class="SignedClientsBigRight">
                <div class="SignedClientsBigRightLeft">
                    <div class="SignedClientsBigRightLabel">签约客户</div>
                    <div class="SignedClientsBigRightText">
                        <span class="SignedClientsBigRightSmallLabel">欠款商户</span>
                        <span class="SignedClientsBigRightValue" style="color: #FF9500;">{{
                            realDataObj?.ArrearageMerchant_Count || ''
                        }}</span>
                    </div>
                </div>

                <div class="SignedClientsBigRightRight">
                    <div class="SignedClientsBigRightRightValue">{{ realDataObj?.Contractor_Count || '' }}
                    </div>
                    <div class="SignedClientsBigRightRightUnit">个</div>
                </div>

            </div>
        </div>


        <div class="SignedClientsSmallItem">
            <div class="SignedClientsSmallLeft" id="SignedClients1"></div>
            <div class="SignedClientsSmallRight">
                <div class="SignedClientsSmallRightLeft">
                    <div class="SignedClientsSmallRightLeftTop">合作分成</div>
                    <div class="SignedClientsSmallRightLeftBottom">
                        <span class="SignedClientsSmallRightLeftBottomNormalText">欠款商户</span>
                        <span class="SignedClientsSmallRightLeftBottomValue">{{
                            shareRevenue?.ArrearageMerchant_Count
                            || "" }}</span>
                        <span class="SignedClientsSmallRightLeftBottomNormalText" style="margin-left: 10px;">欠款占比</span>
                        <span class="SignedClientsSmallRightLeftBottomValue">
                            {{ realDataObj?.ArrearageMerchant_Count ? ((shareRevenue?.ArrearageMerchant_Count /
                                realDataObj?.ArrearageMerchant_Count) * 100).toFixed(2) + '%' : '-' }}
                        </span>
                    </div>
                </div>

                <div class="SignedClientsSmallRightRight">
                    <div class="SignedClientsSmallRightRightValue">{{ shareRevenue?.Contractor_Count || '' }}
                    </div>
                    <div class="SignedClientsSmallRightRightUnit">个</div>
                </div>
            </div>
        </div>

        <div class="SignedClientsSmallItem" style="border-bottom: none;padding-bottom: 0;">
            <div class="SignedClientsSmallLeft" id="SignedClients2"></div>
            <div class="SignedClientsSmallRight">
                <div class="SignedClientsSmallRightLeft">
                    <div class="SignedClientsSmallRightLeftTop">固定租金</div>
                    <div class="SignedClientsSmallRightLeftBottom">
                        <span class="SignedClientsSmallRightLeftBottomNormalText">欠款商户</span>
                        <span class="SignedClientsSmallRightLeftBottomValue">{{ FixedRent?.ArrearageMerchant_Count
                            || "" }}</span>
                        <span class="SignedClientsSmallRightLeftBottomNormalText" style="margin-left: 10px;">欠款占比</span>
                        <span class="SignedClientsSmallRightLeftBottomValue">
                            {{ realDataObj?.ArrearageMerchant_Count ? ((FixedRent?.ArrearageMerchant_Count /
                                realDataObj?.ArrearageMerchant_Count) * 100).toFixed(2) + '%' : '-' }}
                        </span>
                    </div>
                </div>

                <div class="SignedClientsSmallRightRight">
                    <div class="SignedClientsSmallRightRightValue">{{ FixedRent?.Contractor_Count || '' }}
                    </div>
                    <div class="SignedClientsSmallRightRightUnit">个</div>
                </div>
            </div>
        </div>
    </div>
</template>