import EmptyWithConditions from '@/components/EmptyWithConditions';
import Tabs from '@/components/Tabs';
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, useState } from 'react';
import styles from './index.less';
/**中心城区 */
export const zxcq = [
  '新都区',
  '锦江区',
  '龙泉驿区',
  '金牛区',
  '武侯区',
  '温江区',
  '青白江区',
  '新津区',
  '成华区',
  '双流区',
  '青羊区',
  '郫都区',
];
/**城市新区 */
export const csxq = ['高新区', '天府新区', '东部新区'];
/**郊区新城 */
export const jqxc = [
  '简阳市',
  '都江堰市',
  '彭州市',
  '邛崃市',
  '崇州市',
  '金堂县',
  '大邑县',
  '蒲江县',
];

/** @name 办案数量TOP5 */
const Top5: React.FC<{
  modalDispatch: ChildrenModalMethods;
  searchTime: any;
  total: number;
}> = memo((props) => {
  const { modalDispatch, searchTime, total } = props;
  const [areaKey, setAreaKey] = useState('all');

  //办案数量top5
  const { data: qysl, loading } = useRequest(
    () =>
      services.DataBase.getSjdzInfoData({
        typeCode: 'zzcc-xzcf-qysl',
        params: {
          ...searchTime,
        },
      }),
    {
      refreshDeps: [searchTime],
    },
  );

  const baList = useMemo(() => {
    let list;
    if (areaKey === 'all') {
      list = qysl?.data?.data?.records?.slice(0, 5);
    }
    if (areaKey === 'zx') {
      list = qysl?.data?.data?.records
        ?.filter((item: any) => zxcq.includes(item?.gridName))
        ?.slice(0, 5);
    }
    if (areaKey === 'xc') {
      list = qysl?.data?.data?.records
        ?.filter((item: any) => csxq.includes(item?.gridName))
        ?.slice(0, 5);
    }
    if (areaKey === 'jq') {
      list = qysl?.data?.data?.records
        ?.filter((item: any) => jqxc.includes(item?.gridName))
        ?.slice(0, 5);
    }
    return list?.map((item: any) => ({
      name: item?.gridName,
      num: item?.num,
      percent: total ? ((item?.num / total) * 100).toFixed(2) : 0,
    }));
  }, [qysl, areaKey, total]);

  return (
    <BaseCard w={457} h={430} title="办案数量TOP5">
      <Tabs
        style={{
          background: 'transparent',
          height: '30px',
          marginTop: 10,
        }}
        itemStyle={{
          borderRadius: '25px',
          background: 'rgba(7, 50, 93, 0.8)',
          fontSize: '16px',
          marginLeft: 8,
        }}
        onChange={(e) => {
          setAreaKey(e);
        }}
        itemkey={'key'}
        items={[
          {
            key: 'all',
            label: '全部',
          },

          {
            key: 'xc',
            label: '城市新区',
          },
          {
            key: 'zx',
            label: '中心城区',
          },
          {
            key: 'jq',
            label: '县市新城',
          },
        ]}
      />
      <div className={styles.list}>
        <Loading loading={loading}>
          <EmptyWithConditions conditions={baList?.length === 0}>
            {baList?.map((item: any, index: number) => {
              return (
                <div
                  key={index}
                  className={styles.item}
                  onClick={() => {
                    modalDispatch.push('AdministPunishList', {
                      title: `${item?.name}行政处罚列表`,

                      props: {
                        searchTime,
                        ssqy: 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>
      </div>
    </BaseCard>
  );
});

export default Top5;
