import { useAjax } from "@/Hook/useAjax";
import { getCorpDuplicateFanRepeatOfCorpUserListApi, GetProps } from "@/pages/weComTask/API/heavyPowderMAS";
import { Card, Flex, Spin, Statistic } from "antd";
import React, { useState } from "react";
import { useEffect } from "react";
import style from '../heavyPowder/index.less';

/**
 * 添加客服数量分布
 * @param param0 
 * @returns 
 */
const RepeatOfCorpUser: React.FC<{ queryParmas: GetProps }> = ({ queryParmas }) => {

    /**************************************/
    const [data, setData] = useState<Record<string, number>>({});

    const getCorpDuplicateFanRepeatOfCorpUserList = useAjax((params) => getCorpDuplicateFanRepeatOfCorpUserListApi(params))
    /**************************************/

    useEffect(() => {
        if (queryParmas?.aCorpIds.length > 0 && queryParmas?.bCorpIds.length > 0) {
            getCorpDuplicateFanRepeatOfCorpUserList.run(queryParmas).then(res => {
                if (res?.data) {
                    setData(res.data)
                } else {
                    setData({})
                }
            })
        }
    }, [queryParmas])

    return <Card
        variant="borderless"
        title={<strong>添加客服数量分布</strong>}
    >
        <Spin spinning={getCorpDuplicateFanRepeatOfCorpUserList.loading}>
            <Flex vertical gap={7}>
                <div className={style.item}>
                    <span>去重后企微用户总数</span>
                    <div className={style.num}>
                        <Statistic value={data?.total_user_num || 0} valueStyle={{ fontSize: 14 }} />
                    </div>
                </div>
                <div className={style.item}>
                    <span>查询组未识别用户</span>
                    <div className={style.num}>
                        <Statistic value={data?.query_qc_null_num || 0} valueStyle={{ fontSize: 14 }} />
                    </div>
                </div>
                <div className={style.item}>
                    <span>对照组未识别用户</span>
                    <div className={style.num}>
                        <Statistic value={data?.control_qc_null_num || 0} valueStyle={{ fontSize: 14 }} />
                    </div>
                </div>
                <div className={style.item}>
                    <span>{`用户添加>1客服号人数`}</span>
                    <div className={style.num}>
                        <Statistic value={data?.add_gt1_cnt || 0} valueStyle={{ fontSize: 14 }} />
                        （<Statistic
                            value={data?.add_gt1_rate ? data?.add_gt1_rate * 100 : 0}
                            valueStyle={data?.add_gt1_rate > 0.3 ? { color: '#cf1322', fontSize: 14 } : { color: '#3f8600', fontSize: 14 }}
                            suffix="%"
                            precision={2}
                        />）
                    </div>
                </div>
                <div className={style.item}>
                    <span>仅添加1名客服人数</span>
                    <div className={style.num}>
                        <Statistic value={data?.add_1_cnt || 0} valueStyle={{ fontSize: 14 }} />
                        （<Statistic
                            value={data?.add_1_rate ? data?.add_1_rate * 100 : 0}
                            valueStyle={data?.add_1_rate > 0.5 ? { color: '#cf1322', fontSize: 14 } : { color: '#3f8600', fontSize: 14 }}
                            suffix="%"
                            precision={2}
                        />）
                    </div>
                </div>
                <div className={style.item}>
                    <span>添加2名客服人数</span>
                    <div className={style.num}>
                        <Statistic value={data?.add_2_cnt || 0} valueStyle={{ fontSize: 14 }} />
                        （<Statistic
                            value={data?.add_2_rate ? data?.add_2_rate * 100 : 0}
                            valueStyle={data?.add_2_rate > 0.1 ? { color: '#cf1322', fontSize: 14 } : { color: '#3f8600', fontSize: 14 }}
                            suffix="%"
                            precision={2}
                        />）
                    </div>
                </div>
                <div className={style.item}>
                    <span>添加3名客服人数</span>
                    <div className={style.num}>
                        <Statistic value={data?.add_3_cnt || 0} valueStyle={{ fontSize: 14 }} />
                        （<Statistic
                            value={data?.add_3_rate ? data?.add_3_rate * 100 : 0}
                            valueStyle={data?.add_3_rate > 0.09 ? { color: '#cf1322', fontSize: 14 } : { color: '#3f8600', fontSize: 14 }}
                            suffix="%"
                            precision={2}
                        />）
                    </div>
                </div>
                <div className={style.item}>
                    <span>添加4名客服人数</span>
                    <div className={style.num}>
                        <Statistic value={data?.add_4_cnt || 0} valueStyle={{ fontSize: 14 }} />
                        （<Statistic
                            value={data?.add_4_rate ? data?.add_4_rate * 100 : 0}
                            valueStyle={data?.add_4_rate > 0.08 ? { color: '#cf1322', fontSize: 14 } : { color: '#3f8600', fontSize: 14 }}
                            suffix="%"
                            precision={2}
                        />）
                    </div>
                </div>
                <div className={style.item}>
                    <span>添加5名客服人数</span>
                    <div className={style.num}>
                        <Statistic value={data?.add_5_cnt || 0} valueStyle={{ fontSize: 14 }} />
                        （<Statistic
                            value={data?.add_5_rate ? data?.add_5_rate * 100 : 0}
                            valueStyle={data?.add_5_rate > 0.07 ? { color: '#cf1322', fontSize: 14 } : { color: '#3f8600', fontSize: 14 }}
                            suffix="%"
                            precision={2}
                        />）
                    </div>
                </div>
                <div className={style.item}>
                    <span>添加5名客服以上人数</span>
                    <div className={style.num}>
                        <Statistic value={data?.add_gt5_cnt || 0} valueStyle={{ fontSize: 14 }} />
                        （<Statistic
                            value={data?.add_gt5_rate ? data?.add_gt5_rate * 100 : 0}
                            valueStyle={data?.add_gt5_rate > 0.06 ? { color: '#cf1322', fontSize: 14 } : { color: '#3f8600', fontSize: 14 }}
                            suffix="%"
                            precision={2}
                        />）
                    </div>
                </div>
            </Flex>
        </Spin>
    </Card>
};

export default React.memo(RepeatOfCorpUser);