/*
 * @Author: cclu
 * @Date: 2022-04-28 10:47:36
 * @LastEditTime: 2022-09-26 11:52:09
 * @LastEditors: zzy 411037547@qq.com
 * @Description: 分析页头部汇总信息
 * @FilePath: \cloud-platform\src\pages\busniess\analysis\components\TopCard.tsx
 */

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

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


import numeral from "numeral";
import IconFont from "@/components/IconFont";
import { FileTextOutlined, TransactionOutlined } from "@ant-design/icons";
import { history } from "umi";
import {Pie, RingProgress} from "@ant-design/charts";
import React from "react";


const { Divider, Statistic } = StatisticCard;

const topColResponsiveProps = {
    xs: 24,
    sm: 24,
    md: 24,
    lg: 24,
    xl: 16,
    style: { marginBottom: 24 },
};

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

}

const splitAmount = (value: any) => {
    const stringValue = `${value}`
    const [intValue, floatValue] = stringValue.split(".")
    return [numeral(intValue).format("0,0"), floatValue]
}

const TopCard = ({ loading, visitData, contrctData }: { loading: boolean, visitData: projectSummaryInfo, contrctData: any }) => {
    const contractColors = ["#6596F6", "#6bdbab"]
    const compayColors = ["#F3BF2C", "#5e6aa5"]
    // 迷你进度条
    const ringProgress = (value: number, color: string) => {
        const config = {
            height: 66,
            width: 66,
            autoFit: false,
            percent: value,
            color: [color || '#F4664A', '#E8EDF3'],
            innerRadius: 0.68,
            radius: 0.88,
            statistic: {

                content: {
                    formatter: () => ''
                }
            },
        };
        return <RingProgress {...config} />;
    };
    // 本年新增招商饼图配置
    const pieConfig = {
        autoFit: true,
        appendPadding: 24,
        data: [
            {
                type: '今年应收',
                value: visitData?.NewlyAccount_Amount,
            },
            {
                type: '新增招商金额',
                value: visitData?.NewlyContract_Amount,
            }],
        angleField: 'value',
        colorField: 'type',
        // height: 160,
        radius: 0.98,
        innerRadius: 0.65,
        legend: false,
        tooltip: false,
        color: ["#5E6AA5", "#E7EAEE"],
        statistic: {
            title: {
                offsetY: -4,
                style: {
                    // whiteSpace: 'pre-wrap',
                    overflow: 'hidden',
                    textOverflow: 'ellipsis',
                    fontSize: 14,
                    color: 'rgba(0, 0, 0, 0.45)'
                },
                customHtml: (container, view, datum) => {
                    // const { width } = container.getBoundingClientRect();

                    // const total = data.reduce((r, d) => r + d.value, 0)

                    return datum ? datum.type : '新增招商金额';

                },
            },
            content: {
                offsetY: 4,
                style: {
                    whiteSpace: 'pre-wrap',
                    overflow: 'hidden',
                    textOverflow: 'ellipsis',
                    fontSize: 20,
                    fontWeight: 500,
                    fontFamily: "Bahnschrift Regular"
                },

                customHtml: (container, view, datum) => {
                    // const { width } = container.getBoundingClientRect();
                    // const total = data.reduce((r, d) => r + d.value, 0);
                    return <>
                        <Typography.Text>{numeral(datum?.value || visitData?.NewlyContract_Amount).format('0.[0000]')}</Typography.Text>
                        <Typography.Text type="secondary" style={{ fontSize: 12, fontWeight: 500 }}>万元</Typography.Text></>;
                },
            },
        },
        label: {
            type: 'inner',
            autoHide: true,
            style: {
                display: 'none',
                fontSize: 0,
            },
        },
        interactions: [
            {
                type: 'element-selected',
            },
            // {
            //   type: 'element-active',
            // },
            {
                type: 'pie-statistic-active',
            },
            {
                type: 'element-highlight',
            },
        ],
        state: {
            // 设置 active 激活状态的样式
            active: {
                //   animate: { duration: 100, easing: 'easeLinear' },
                style: {
                    lineWidth: 0,

                },
            },
        }
    };

    return (
        <Row gutter={24} >
            {/* 合同信息 */}
            <Col {...topColResponsiveProps} >
                <StatisticCard.Group direction="row" hoverable>
                    <StatisticCard
                        loading={loading}

                        statistic={{
                            icon: <Avatar style={{ backgroundColor: "#E8EDF7" }} size={60}
                                icon={<IconFont name="icon-hetongxinxi" size={"30"} />}></Avatar>,
                            value: visitData?.Contract_Amount ? (splitAmount(visitData?.Contract_Amount))[0] : 0,
                            suffix: <>
                                <Typography.Text style={{ fontSize: 16 }}>
                                    .{(splitAmount(visitData?.Contract_Amount))[1]}</Typography.Text>
                                <Typography.Text type="secondary" style={{ fontSize: 14 }}>(万元)</Typography.Text></>,
                            title: <Typography.Text type="secondary">合同信息</Typography.Text>,
                            valueStyle: {
                                fontSize: 30,
                                fontFamily: "Bahnschrift Regular"
                            },

                            description: (
                                <>
                                    <StatisticCard.Statistic
                                        title={<Typography.Text type="secondary">签约合同</Typography.Text>}
                                        value={visitData?.Contract_SignCount}
                                        style={{ marginTop: 2, fontSize: 14 }}
                                        valueStyle={{ color: "#6596F6" }} />
                                </>
                            )
                        }}

                        bodyStyle={{ ...bodyStyle, borderLeft: "2px solid #6596f6" }}
                        onClick={() => {
                            history.push('/busniessproject/contract')
                        }}
                    >
                    </StatisticCard>
                    <Divider type="vertical" />
                    {visitData?.BusinessTypeSummaryList.map((n, i) => <StatisticCard
                        loading={loading}
                        key={i}
                        statistic={{
                            value: n?.Contract_Amount ? (splitAmount(n?.Contract_Amount))[0] : 0,
                            suffix: <>
                                <Typography.Text style={{ fontSize: 16 }}>.{(splitAmount(n?.Contract_Amount))[1]}</Typography.Text>
                                <Typography.Text type="secondary" style={{ fontSize: 14 }}>(万元)</Typography.Text></>,
                            title: <Typography.Text type="secondary" >{n.BusinessType === 1000 ? '合作分成' : '固定租金'}</Typography.Text>,
                            valueStyle: {
                                fontSize: 30,
                                fontFamily: "Bahnschrift Regular"
                            },
                            description: (
                                <Space size="large" style={{ marginTop: 2, fontSize: 14 }}>
                                    <Statistic title="合同" value={n?.Contract_SignCount} />
                                    <Statistic title="占比" value={numeral(n?.Contract_SignCount / visitData?.Contract_SignCount * 100).format('0,0.00')} suffix="%" />
                                </Space>
                            )
                        }}
                        chart={ringProgress(n?.Contract_SignCount / visitData?.Contract_SignCount, contractColors[i])}
                        chartPlacement="left"
                        bodyStyle={{ ...bodyStyle }}
                        onClick={() => {
                            history.push('/busniessproject/contract')
                        }}
                    >
                    </StatisticCard>)}
                </StatisticCard.Group>
                {/* 签约商户 */}
                <StatisticCard.Group direction="row" hoverable style={{ marginTop: 24 }}>
                    <StatisticCard
                        loading={loading}
                        bordered={false}
                        statistic={{
                            icon: <Avatar style={{ backgroundColor: "#E9EBF5" }} size={60}
                                icon={<IconFont name="icon-qianyueshanghu" style={{ color: "#737FB9" }} size="30" />}></Avatar>,
                            value: visitData?.Contractor_Count,
                            suffix: <Typography.Text type="secondary" style={{ fontSize: 14 }}>(个)</Typography.Text>,
                            title: <Typography.Text type="secondary">签约商户</Typography.Text>,
                            valueStyle: {
                                fontSize: 30,
                                fontFamily: "Bahnschrift Regular"
                            },
                            description: (
                                <>
                                    <StatisticCard.Statistic
                                        title={<Typography.Text type="secondary">欠款商户</Typography.Text>}
                                        value={visitData?.ArrearageMerchant_Count}
                                        style={{ marginTop: 2, fontSize: 14 }}
                                        valueStyle={{ color: "#F3BF2C" }} />
                                </>
                            )
                        }}
                        onClick={() => {
                            history.push('/busniess/payment')
                        }}
                        bodyStyle={{ ...bodyStyle, borderLeft: "2px solid #737FB9" }}
                    >
                    </StatisticCard>
                    <Divider type="vertical" />
                    {visitData?.BusinessTypeSummaryList.map((n, i) => <StatisticCard
                        loading={loading}
                        key={i}
                        statistic={{

                            value: n?.Contractor_Count,
                            suffix: <Typography.Text type="secondary" style={{ fontSize: 14 }}>(个)</Typography.Text>,
                            title: <Typography.Text type="secondary" >{n.BusinessType === 1000 ? '合作分成' : '固定租金'}</Typography.Text>,
                            valueStyle: {
                                fontSize: 30,
                                fontFamily: "Bahnschrift Regular"
                            },

                            description: (
                                <Space size="large" style={{ marginTop: 2, fontSize: 14 }}>
                                    <Statistic title="欠款商户" value={n?.ArrearageMerchant_Count} />
                                    <Statistic title="欠款占比" value={numeral(n?.Arrearage_Amount / visitData?.Arrearage_Amount * 100).format('0,0.00')} suffix="%" />
                                </Space>
                            )
                        }}
                        chart={ringProgress(n?.Arrearage_Amount / visitData?.Arrearage_Amount, compayColors[i])}
                        chartPlacement="left"
                        bodyStyle={{ ...bodyStyle }}
                        onClick={() => {
                            history.push('/busniess/payment')
                        }}
                    >
                    </StatisticCard>)}
                </StatisticCard.Group>
            </Col>

            {/* 本年新增招商 */}
            <Col {...topColResponsiveProps2} >
                <Card
                    title="本年新增招商"
                    bordered={false}
                    bodyStyle={{ padding: 0, paddingLeft: 20, height: 280 }}>
                    <Row align="middle" gutter={10} >
                        <Col span={10}>
                            <StatisticCard.Group direction={'column'}>
                                <StatisticCard
                                    statistic={{
                                        icon: <Avatar shape="square" style={{ backgroundColor: "#EBECEE", marginTop: 4, borderRadius: 6 }}
                                            size={30} icon={<FileTextOutlined style={{ color: "#4D5766" }} />}></Avatar>,
                                        title: <Typography.Text type="secondary" >新增招商合同</Typography.Text>,
                                        value: visitData?.NewlyContract_Count,
                                        suffix: <Typography.Text type="secondary" style={{ fontSize: 12 }}>(份)</Typography.Text>,
                                        valueStyle: {
                                            fontSize: 20,
                                            fontFamily: "Bahnschrift Regular"
                                        },
                                        style: {
                                            fontSize: 14,
                                        }
                                    }}
                                    bodyStyle={{ padding: 12, paddingLeft: 22, backgroundColor: "#F8F8F8", borderRadius: 8, }}
                                />

                                <StatisticCard
                                    statistic={{
                                        icon: <Avatar shape="square" style={{ backgroundColor: "#EBECEE", marginTop: 4, borderRadius: 6 }}
                                            size={30} icon={<TransactionOutlined style={{ color: "#4D5766" }} />}></Avatar>,
                                        value: visitData?.NewlyAccount_Amount ? (splitAmount(visitData?.NewlyAccount_Amount))[0] : 0,
                                        suffix: <>
                                            <Typography.Text style={{ fontSize: 14 }}>
                                                .{visitData?.NewlyAccount_Amount ? (splitAmount(visitData?.NewlyAccount_Amount))[1] : 0}
                                            </Typography.Text>
                                            <Typography.Text type="secondary" style={{ fontSize: 12 }}>(万元)</Typography.Text></>,
                                        title: <Typography.Text type="secondary">今年应收</Typography.Text>,
                                        valueStyle: {
                                            fontSize: 20,
                                            fontFamily: "Bahnschrift Regular"
                                        },
                                        style: {
                                            fontSize: 14,
                                        }

                                    }}
                                    bodyStyle={{ padding: 12, paddingLeft: 22, backgroundColor: "#F8F8F8", borderRadius: 8, }}
                                    style={{ marginTop: 24 }}
                                />
                            </StatisticCard.Group>
                        </Col>
                        {/* 本年新增招商饼图 */}
                        <Col span={14} style={{ height: 260 }}>
                            {visitData?.NewlyContract_Amount && <Pie  {...pieConfig} />}
                        </Col>
                    </Row>
                </Card>
            </Col>
        </Row>
    )
}

export default TopCard;
