/*
 * @Author: cclu
 * @Date: 2022-04-28 10:47:36
 * @LastEditTime: 2022-04-28 18:41:15
 * @LastEditors: Please set LastEditors
 * @Description: 应收账款预警
 * @FilePath: \cloud-platform\src\pages\busniess\analysis\components\TopCard.tsx
 */

import { Pie, G2 } from "@ant-design/charts";
import { StatisticCard } from "@ant-design/pro-card";
import { Card, Col, Row, Typography } from "antd";
import { useEffect, useState } from "react";
import type { contrctStaticCard, projectSummaryInfo } from '../data'
import numeral from "numeral";

const { Divider } = StatisticCard;

const PaymentWarnig = ({ loading, visitData }: { loading: boolean, visitData: projectSummaryInfo }) => {
    const G = G2.getEngine('canvas');

    const [activeData, setActiveData] = useState<contrctStaticCard | any>()
    const [textColor, setTextColor] = useState<string>()
  
    const pieConfig = {
        autoFit: true,
        appendPadding: 24,
        data: !loading ? visitData?.projectAnasisData : [],
        angleField: 'value',
        colorField: 'type',
        // height: 160,
        radius: 0.82,
        innerRadius: 0.65,
        legend: false,
        tooltip: false,
        color: ["#5B8FF9", "#3EC6C5", "#F3BF2C"],
        statistic: {
            title: {
                offsetY: -4,
                style: {
                    // whiteSpace: 'pre-wrap',
                    overflow: 'hidden',
                    textOverflow: 'ellipsis',
                    fontSize: 14,
                    color: 'rgba(0, 0, 0, 0.45)'
                },
                content: activeData?.type ? `${activeData?.type}占比` : ''
            },
            content: {
                style: {
                    whiteSpace: 'pre-wrap',
                    overflow: 'hidden',
                    textOverflow: 'ellipsis',
                    fontSize: 18,
                    fontWeight: 500
                },
                formatter: () => {
                    // const { width } = container.getBoundingClientRect();
                    if (activeData?.contract) {

                        const total = visitData?.ArrearageList.reduce((r, d) => r + d.ArrearageContract_Count, 0)

                        return `${numeral(activeData?.contract).divide(total).multiply(100).format('0,0.[00]')}%`;
                    }
                    return ''

                },
            },
        },
        label: {
            type: 'spider',
            labelHeight: 28,
            // content: '{name}\n{percentage}',
            formatter: (data, mappingData) => {
                const group = new G.Group({});
                group.addShape({
                    type: 'circle',
                    attrs: {
                        x: 0,
                        y: 0,
                        width: 6,
                        height: 6,
                        r: 5,
                        fill: mappingData.color,
                    },
                });
                group.addShape({
                    type: 'text',
                    attrs: {
                        x: 10,
                        y: 8,
                        text: `${data.type}`,
                        fill: '#333',
                    },
                });
                group.addShape({
                    type: 'text',
                    attrs: {
                        x: 0,
                        y: 25,
                        text: `${data.des}`,
                        fill: 'rgba(0, 0, 0, 0.35)',
                        //   fontWeight: 500,
                    },
                });
                return group;
            }
        },
        interactions: [
            {
                type: 'element-selected',

            },
            // {
            //     type: 'element-active',
            // },

        ],
    };
    const splitAmount = (value: any) => {
        const stringValue = `${value}`
        const [intValue, floatValue] = stringValue.split(".")
        return [numeral(intValue).format("0,0"), floatValue]
    }
    return (
        <Card
            title="应收账款预警"
            bordered={false}
            bodyStyle={{ padding:0, paddingLeft: 20, height:320 }}>
            <Row align="middle" gutter={10} >
                <Col span={8}>
                    <StatisticCard.Group direction={'column'}>
                        <StatisticCard

                            statistic={{

                                
                                // eslint-disable-next-line no-nested-ternary
                                value: activeData?.value ? (splitAmount(activeData?.value))[0] : (visitData?.staticCard.value ? (splitAmount(visitData?.staticCard.value))[0] : 0),
                                // eslint-disable-next-line no-nested-ternary
                                suffix: <><Typography.Text style={{ fontSize: 16 }}>.{activeData?.value ? (splitAmount(activeData?.value))[1] : (visitData?.staticCard.value ? (splitAmount(visitData?.staticCard.value))[1] : 0)}</Typography.Text> <Typography.Text type="secondary" style={{ fontSize: 14 }}>(万元)</Typography.Text></>,
                                title: <Typography.Text type="secondary" style={{ color: textColor }}>应收欠款({activeData?.des||'全部'})</Typography.Text>,
                                valueStyle: {
                                    fontSize: 30,
                                    fontFamily: "Bahnschrift Regular"
                                },

                            }}
                            bodyStyle={{ paddingRight: 0 }}
                            style={{ paddingRight: 0 }}
                        />
                        <Divider type="horizontal" />
                        <StatisticCard
                            statistic={{
                                title: <Typography.Text type="secondary" style={{ color: textColor }}>欠款合同</Typography.Text>,
                                value: activeData?.contract || visitData?.staticCard.contract,

                                suffix: <Typography.Text type="secondary" style={{ fontSize: 14 }}>(份)</Typography.Text>,
                                valueStyle: {
                                    fontSize: 30,
                                    fontFamily: "Bahnschrift Regular"
                                },

                            }}
                            bodyStyle={{ paddingRight: 0 }}

                        />

                    </StatisticCard.Group>
                </Col>
                <Col span={16} style={{ height: 300 }}>
                    <Pie {...pieConfig}
                        onReady={(plot) => {
                            let state = 0
                            plot.on('element:click', ({ data }: { evt: { data: any } }) => {
                                state = 1

                                const { color } = data.mappingData
                                setActiveData(data.data)
                                setTextColor(color)
                            });
                            plot.on('click', (evt) => {
								// const { data } = evt
                                
                                if(state===1){
                                    state=0
                                }else{
                                    setTextColor('rgba(0, 0, 0, 0.45)')
                                    setActiveData(visitData?.staticCard)
                                }
								
							});
                        }}
                    />
                </Col>
            </Row>
        </Card>
    )
}
export default PaymentWarnig;