import EmptyWithConditions from '@/components/EmptyWithConditions';
import BaseCard from '@/pages/GlobalModalServices/components/BaseCard';
import Loading from '@/pages/GlobalModalServices/components/Loading';
import { ChildrenModalMethods } from '@/pages/GlobalModalServices/type';
import services from '@/services';
import { useRequest } from 'ahooks';
import { Flex, Progress, Space } from 'antd';
import React, { memo, useMemo } from 'react';
import styles from './index.less';
/** @name 违法行为类型TOP5 */
const Top5: React.FC<{
  modalDispatch: ChildrenModalMethods;
  searchTime: any;
  total: number;
}> = memo((props) => {
  const { modalDispatch, searchTime, total } = props;

  const { data: wfxwsl, loading } = useRequest(
    () =>
      services.DataBase.getSjdzInfoData({
        typeCode: 'zzcc-xzcf-wfxwsl',
        params: {
          ...searchTime,
        },
      }),
    {
      refreshDeps: [searchTime],
    },
  );

  const wfList = useMemo(() => {
    const list = wfxwsl?.data?.data?.records?.slice(0, 5);

    return list?.map((item: any) => ({
      name: item?.wfxwlx,
      num: item?.num,
      percent: total ? ((item?.num / total) * 100).toFixed(2) : 0,
    }));
  }, [wfxwsl, total]);

  return (
    <BaseCard w={457} h={430} title="违法行为类型TOP5">
      <Loading loading={loading}>
        <EmptyWithConditions conditions={wfList?.length === 0}>
          {wfList?.map((item: any, index: number) => {
            return (
              <div
                key={index}
                className={styles.item}
                onClick={() => {
                  modalDispatch.push('AdministPunishList', {
                    title: `${item?.name}行政处罚列表`,

                    props: {
                      searchTime,
                      wfxw: item?.name,
                    },
                  });
                }}
              >
                <Flex align="center" justify="space-between">
                  <div className={styles.name}>{item.name}</div>
                  <Space size={30}>
                    <div>
                      <span className={styles.val}>{item.num}</span>
                      <span className={styles.unit}>件</span>
                    </div>
                    <div>
                      <span className={styles.val}>{item.percent}</span>
                      <span className={styles.unit}>%</span>
                    </div>
                  </Space>
                </Flex>
                <Progress
                  strokeColor={{
                    to: 'rgb(0, 185, 255)',
                    from: 'rgb(121, 255, 209)',
                  }}
                  percent={item?.percent}
                  showInfo={false}
                  size={{ height: 15 }}
                  trailColor="rgba(144, 205, 229, 0.22)"
                ></Progress>
              </div>
            );
          })}
        </EmptyWithConditions>
      </Loading>
    </BaseCard>
  );
});

export default Top5;
