
import { RingProgress, Progress } from "@ant-design/charts";
import { Card, Col, Row, Typography } from "antd";
import { Liquid } from '@ant-design/plots';

import styles from '../analysis.less'

import { StatisticCard } from "@ant-design/pro-card";
import numeral from "numeral";
import '../analysis.less'

const { Statistic, Divider } = StatisticCard;
type CustomerCardProps = {
    loading: boolean,
    contrctData: any,
    totalContractCount: number
}

const ContractCard = ({ loading, contrctData, totalContractCount }: CustomerCardProps) => {
    const colors = ["#F3BF2C", "#5B8FF9", "#3EC6C5"]
    const liquidConfig = {
       height:150,
        autoFit: true,
        percent: 0.25,
        outline: {
          border: 2,
          distance: 2,
        },
        wave: {
          length: 128,
        },
      };
  
    const progessConfig = {
        height: 30,
        width: 230,
        autoFit: true,
        percent: contrctData?.Expired_HalfYearCount / totalContractCount,
        color: ['#5B8FF9', '#E8EDF3'],
    }
    return (
        <Card
            title="合同到期预警"
            loading={loading}
            bordered={false}
            bodyStyle={{ padding: 0, paddingTop: 16, paddingBottom: 20 }}
            style={{ marginBottom: 24 }}

        >
            <Row align="middle">
                <Col  xl={8} lg={24} md={24} sm={24} xs={24}>
                    <StatisticCard.Group direction={'row'}>
                        <StatisticCard
                            className="contract-statistic"
                            bodyStyle={{ paddingRight: 0 }}
                            title={<Typography.Text type="secondary">半年内到期合同</Typography.Text>}
                            statistic={{
                                value: contrctData?.Expired_HalfYearCount,
                                suffix: <div><Typography.Text type="secondary" style={{ fontSize: 14 }}>(份)</Typography.Text><Typography.Text type="secondary" style={{ fontSize: 14 ,position:"absolute",right:0,marginTop:16}}>{totalContractCount}</Typography.Text></div>,
                                valueStyle: {
                                    fontSize: 30,
                                    fontFamily: "Bahnschrift Regular",
                                    lineHeight: 1
                                },
                                // description: <Statistic title="" value={totalContractCount} style={{textAlign:"right"}}/>,
                            }}
                            chart={
                                <Progress {...progessConfig} />
                            }
                            footer={
                                <>
                                    {
                                        contrctData?.ContractHalfYearListExpired.map(n => {

                                            return <Statistic value={n.Expired_Count} title={n.Expired_Situation} suffix={<Typography.Text type="secondary" style={{ fontSize: 14 }}>(份)</Typography.Text>} layout="horizontal" />
                                        })
                                    }
                                </>
                            }
                            style={{ width: "100%",minWidth:250 }}
                        />
                        <Divider type={'vertical'} />
                    </StatisticCard.Group>
                </Col>
                <Col xl={16} lg={24} md={24} sm={24} xs={24}>
                    <Row align="middle" gutter={10}>
                        {
                            contrctData?.ContractHalfYearListExpired.map((n, i) => {

                                const percent = numeral(n.Expired_Count).divide(contrctData.Expired_HalfYearCount).value()
                                const color = colors[i]

                                const config = {
                                    ...liquidConfig, color, percent
                                    , statistic: {
                                        offsetY: -8,
                                        title: {
                                            style: {
                                                color: 'rgba(0,0,0,0.35)',
                                                fontSize: '12px',
                                                lineHeight: '14px',
                                               
                                            },
                                            formatter: () => n.Expired_Situation.replace("到期",""),
                                        },
                                        content:{
                                            // offsetY: -18,
                                            style: {
                                                // color: colors[i],
                                                fontSize: 18,
                                                fontFamily: "Bahnschrift Regular",
                                            }
                                        }
                                    },
                                }
                                return <Col span={8} >
                                    
                                    <Liquid  {...config} />

                                    
                                </Col>
                            })
                        }

                        {/* <Col span={8}>
                            <RingProgress {...pressConfig2} />
                        </Col>
                        <Col span={8}>
                            <RingProgress {...pressConfig3} />
                        </Col> */}

                    </Row>
                </Col>

            </Row>
        </Card>
    )
}

export default ContractCard;