/*
 * @Author: cclu
 * @Date: 2022-04-28 10:47:36
 * @LastEditTime: 2022-04-28 18:55:44
 * @LastEditors: Please set LastEditors
 * @Description: 合同到期预警
 * @FilePath: \cloud-platform\src\pages\busniess\analysis\components\IntroduceRow.tsx
 */

import { Col, Row, Typography, Card } from "antd"

import { StatisticCard } from '@ant-design/pro-card';
import type { projectSummaryInfo } from '../data'
import type { StatisticProps } from '@ant-design/pro-card';

import { history } from "umi";
import { valueType } from "antd/lib/statistic/utils";
import { ReactChild, ReactFragment, ReactPortal, Key } from "react";


const { Divider, Statistic } = StatisticCard;


const topColResponsiveProps2 = {
    xs: 24,
    sm: 24,
    md: 24,
    lg: 24,
    xl: 24,
    style: { marginBottom: 24 },
};
const bodyStyle = {
    padding: '30px 0 30px 24px'

}



const IntroduceRow = ({ loading, visitData, contrctData }: { loading?: boolean, visitData?: projectSummaryInfo, contrctData: any }) => {

  
    const cardStatus = ['error', 'warning', 'processing', 'success', 'default',];
    return (
        <Card
            bordered={false}
            loading={loading}
            title="合同到期预警"
            style={{ marginBottom: 24, height: 410 }}>


            <Row gutter={24} >
               
                <Col {...topColResponsiveProps2} >
                    {/* 合同到期预警 */}
                    <StatisticCard.Group direction="column" >
                        <StatisticCard
                            loading={loading}
                            className="contract-statistic"
                            bodyStyle={bodyStyle}
                            statistic={{
                                title: <Typography.Text type="secondary" style={{ fontSize: 16 }}>半年内到期合同</Typography.Text>,
                                value: contrctData?.Expired_HalfYearCount,
                                suffix: <div><Typography.Text type="secondary" style={{ fontSize: 14 }}>(份)</Typography.Text></div>,
                                valueStyle: {
                                    fontSize: 30,
                                    fontFamily: "Bahnschrift Regular",
                                    lineHeight: 1.5
                                },
                                layout: "horizontal",

                            }}

                            onClick={() => {
                                history.push('/busniessproject/contract')
                            }}
                            style={{ width: "90%", minWidth: 250, paddingBottom: 26 }}

                        />
                        <Divider type="horizontal" />
                        <StatisticCard
                            onClick={() => {
                                history.push('/busniessproject/contract')
                            }}
                            loading={loading}
                            headerBordered={false}
                            bodyStyle={{ paddingTop: 40, paddingBottom: 0 }}
                        >
                            {
                                contrctData?.ContractHalfYearListExpired.map((n: { Expired_Count: valueType | undefined; Expired_Situation: boolean | ReactChild | ReactFragment | ReactPortal | null | undefined; }, i: Key) => {

                                    return <Statistic
                                    key={i}
                                        style={{ marginBottom: 16 }}
                                        value={n.Expired_Count}
                                        title={n.Expired_Situation}
                                        valueStyle={i === 0 ? { color: "#EE6363" } : {}}
                                        status={cardStatus[i] as StatisticProps['status']}
                                        suffix={<Typography.Text type="secondary" style={{ fontSize: 14 }}>(份)</Typography.Text>} layout="horizontal" />
                                })
                            }
                        </StatisticCard>

                    </StatisticCard.Group>
                </Col>

            </Row>
        </Card>
    )
}

export default IntroduceRow;