import EmptyWithConditions from '@/components/EmptyWithConditions';
import BaseCard from '@/pages/GlobalModalServices/components/BaseCard';
import { BaseDate } from '@/pages/GlobalModalServices/components/BaseDatePicker';
import services from '@/services';
import { Flex, Progress, Space } from 'antd';
import React, { memo, useEffect, useState } from 'react';
import styles from './index.less';
/** @name 高发类型TOP3 */
const TypeTop3: React.FC<{ date: BaseDate }> = memo((props) => {
  const { date } = props;

  const [dataSource, setDataSource] = useState<
    {
      name: string;
      num: number;
      percent: string;
    }[]
  >([]);
  const getData = () => {
    services.DataBase.getSjdzInfoData({
      typeCode: 'hyzm-zm-gzgftj',
      params: {
        type: '2',
        startTime: date.value.start,
        endTime: date.value.end,
      },
    }).then((res) => {
      if (res.code === 200) {
        const record = res.data.data.records[0];
        const { list = [], total } = record;

        const data = list.map((v: any) => {
          console.log(Number((v.num / total).toFixed(2)));
          return {
            name: v.key,
            num: v.num,
            percent: Number(((v.num / total) * 100).toFixed(2)),
          };
        });
        setDataSource(data);
      }
    });
  };

  useEffect(() => {
    getData();
  }, [date]);

  return (
    <BaseCard w={650} h={306} title="高发类型TOP3">
      <EmptyWithConditions conditions={dataSource.length === 0}>
        {dataSource.slice(0, 3).map((item, index) => {
          return (
            <div key={index} className={styles.item}>
              <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(121, 255, 209)',
                  from: 'rgb(0, 185, 255)',
                }}
                percent={Number(item?.percent)}
                showInfo={false}
                size={{ height: 15 }}
                trailColor="rgba(144, 205, 229, 0.22)"
              ></Progress>
            </div>
          );
        })}
      </EmptyWithConditions>
    </BaseCard>
  );
});

export default TypeTop3;
