import { useAjax } from "@/Hook/useAjax";
import { getCorpDuplicateFanRepeatAnalyzeListApi, GetProps } from "@/pages/weComTask/API/heavyPowderMAS";
import { Card, Flex, Space, Spin, Statistic, Tooltip } from "antd";
import React, { useState } from "react";
import { useEffect } from "react";
import style from '../heavyPowder/index.less';
import { QuestionCircleOutlined } from "@ant-design/icons";


const RepeatAnalyze: React.FC<{ queryParmas: GetProps }> = ({ queryParmas }) => {

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

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

    return <Card
        variant="borderless"
        title={<strong>重粉分析</strong>}
    >
        <Spin spinning={getCorpDuplicateFanRepeatAnalyzeList.loading}>
            <Flex vertical gap={7}>
                <div className={style.item}>
                    <span>查询组总用户</span>
                    <div className={style.num}>
                        <Statistic value={data?.query_total_num || 0} valueStyle={{ fontSize: 14 }} />
                    </div>
                </div>
                <div className={style.item}>
                    <span>对照组总用户</span>
                    <div className={style.num}>
                        <Statistic value={data?.control_total_num || 0} valueStyle={{ fontSize: 14 }} />
                    </div>
                </div>
                <div className={style.item}>
                    <span>查询组净值用户数</span>
                    <div className={style.num}>
                        <Statistic value={data?.query_only_num || 0} valueStyle={{ fontSize: 14 }} />
                    </div>
                </div>
                <div className={style.item}>
                    <span>对照组净值用户数</span>
                    <div className={style.num}>
                        <Statistic value={data?.control_only_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>重粉数</span>
                    <div className={style.num}>
                        <Statistic value={data?.overlap_num || 0} valueStyle={{ fontSize: 14 }} />
                    </div>
                </div>
                <div className={style.item}>
                    <Space>
                       <span>重粉比</span>
                        <Tooltip title="(查询组内用户在对照组内重粉数)/查询组净值企微用户数">
                            <QuestionCircleOutlined />
                        </Tooltip>
                    </Space>
                    <div className={style.num}>
                        <Statistic
                            value={data?.query_overlap_rate ? data?.query_overlap_rate * 100 : 0}
                            valueStyle={data?.query_overlap_rate > 0.2 ? { color: '#cf1322', fontSize: 14 } : { color: '#3f8600', fontSize: 14 }}
                            suffix="%"
                            precision={2}
                        />
                    </div>
                </div>
                <div className={style.item}>
                    <span>交叉重粉数</span>
                    <div className={style.num}>
                        <Statistic value={data?.cross_overlap_num || 0} valueStyle={{ fontSize: 14 }} />
                    </div>
                </div>
                <div className={style.item}>
                    <Space>
                        <span>查询组非重粉占比</span>
                        <Tooltip title="(查询组总企微用户数-交叉重粉数)/查询组总企微用户数">
                            <QuestionCircleOutlined />
                        </Tooltip>
                    </Space>
                    <div className={style.num}>
                        <Statistic
                            value={data?.query_non_overlap_rate ? data?.query_non_overlap_rate * 100 : 0}
                            valueStyle={data?.query_non_overlap_rate > 0.1 ? { color: '#cf1322', fontSize: 14 } : { color: '#3f8600', fontSize: 14 }}
                            suffix="%"
                            precision={2}
                        />
                    </div>
                </div>
            </Flex>
        </Spin>
    </Card>
};

export default React.memo(RepeatAnalyze);