<script setup lang="ts">
import './ContractInformation.less'
import ContractInformationIcon from '../../../../assets/image/ContractInformationIcon.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('ContractInformation1');
    if (!chartDom) return;
    myChart = echarts.init(chartDom);


    const chartDom2 = document.getElementById('ContractInformation2');
    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 ? '#00F6FF' : '#0C6370';
                    }
                },
                data: [((shareRevenue?.value.Contract_SignCount / realDataObj?.value.Contract_SignCount) * 100), 100 - ((shareRevenue?.value.Contract_SignCount / 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 ? '#00F6FF' : '#0C6370';
                    }
                },
                data: [((FixedRent?.value.Contract_SignCount / realDataObj?.value.Contract_SignCount) * 100), 100 - ((FixedRent?.value.Contract_SignCount / 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="ContractInformationBox">
        <div class="ContractInformationBigItem">
            <div class="ContractInformationBigLeft">
                <img :src="ContractInformationIcon" class="ContractInformationBigLeftImg" />
            </div>

            <div class="ContractInformationBigRight">
                <div class="ContractInformationBigRightLeft">
                    <div class="ContractInformationBigRightLabel">合同信息</div>
                    <div class="ContractInformationBigRightText">
                        <span class="ContractInformationBigRightSmallLabel">签约合同</span>
                        <span class="ContractInformationBigRightValue">{{ realDataObj?.Contract_SignCount || ''
                        }}</span>
                    </div>
                </div>

                <div class="ContractInformationBigRightRight">
                    <div class="ContractInformationBigRightRightValue">{{
                        realDataObj?.Contract_Amount ? realDataObj?.Contract_Amount.toLocaleString() : '' }}
                    </div>
                    <div class="ContractInformationBigRightRightUnit">万元</div>
                </div>

            </div>
        </div>


        <div class="ContractInformationSmallItem">
            <div class="ContractInformationSmallLeft" id="ContractInformation1"></div>
            <div class="ContractInformationSmallRight">
                <div class="ContractInformationSmallRightLeft">
                    <div class="ContractInformationSmallRightLeftTop">联合经营</div>
                    <div class="ContractInformationSmallRightLeftBottom">
                        <span class="ContractInformationSmallRightLeftBottomNormalText">合同</span>
                        <span class="ContractInformationSmallRightLeftBottomValue">{{ shareRevenue?.Contract_SignCount
                            || "" }}</span>
                        <span class="ContractInformationSmallRightLeftBottomNormalText"
                            style="margin-left: 10px;">占比</span>
                        <span class="ContractInformationSmallRightLeftBottomValue">
                            {{ realDataObj?.Contract_SignCount ? ((shareRevenue?.Contract_SignCount /
                                realDataObj?.Contract_SignCount) * 100).toFixed(2) + '%' : '-' }}
                        </span>
                    </div>
                </div>

                <div class="ContractInformationSmallRightRight">
                    <div class="ContractInformationSmallRightRightValue">{{
                        shareRevenue?.Contract_Amount ? shareRevenue?.Contract_Amount.toLocaleString() : '' }}
                    </div>
                    <div class="ContractInformationSmallRightRightUnit">万元</div>
                </div>
            </div>
        </div>

        <div class="ContractInformationSmallItem" style="border-bottom: none;padding-bottom: 0;">
            <div class="ContractInformationSmallLeft" id="ContractInformation2"></div>
            <div class="ContractInformationSmallRight">
                <div class="ContractInformationSmallRightLeft">
                    <div class="ContractInformationSmallRightLeftTop">委托运营管理</div>
                    <div class="ContractInformationSmallRightLeftBottom">
                        <span class="ContractInformationSmallRightLeftBottomNormalText">合同</span>
                        <span class="ContractInformationSmallRightLeftBottomValue">{{ FixedRent?.Contract_SignCount
                            || "" }}</span>
                        <span class="ContractInformationSmallRightLeftBottomNormalText"
                            style="margin-left: 10px;">占比</span>
                        <span class="ContractInformationSmallRightLeftBottomValue">
                            {{ realDataObj?.Contract_SignCount ? ((FixedRent?.Contract_SignCount /
                                realDataObj?.Contract_SignCount) * 100).toFixed(2) + '%' : '-' }}
                        </span>
                    </div>
                </div>

                <div class="ContractInformationSmallRightRight">
                    <div class="ContractInformationSmallRightRightValue">{{ FixedRent?.Contract_Amount ?
                        FixedRent?.Contract_Amount.toLocaleString() : '' }}
                    </div>
                    <div class="ContractInformationSmallRightRightUnit">万元</div>
                </div>
            </div>
        </div>
    </div>
</template>