import DescriptionItem from '@/components/DescriptionItem';
import BaseCard from '@/pages/GlobalModalServices/components/BaseCard';
import { BaseDate } from '@/pages/GlobalModalServices/components/BaseDatePicker';
import services from '@/services';
import { Flex } from 'antd';
import React, { memo, useEffect, useState } from 'react';
import styles from './index.less';

/** @name 照明故障总数 */
const Info: React.FC<{ date: BaseDate }> = memo((props) => {
  const { date } = props;

  const [dataSource, setDataSource] = useState<{
    total: number;
    disposalNum: number;
    completedNum: number;
  }>({
    total: 0,
    disposalNum: 0,
    completedNum: 0,
  });
  const getData = () => {
    services.DataBase.getSjdzInfoData({
      typeCode: 'hyzm-zm-gzczqk',
      params: {
        startTime: date.value.start,
        endTime: date.value.end,
      },
    }).then((res) => {
      if (res.code === 200) {
        const record = res.data.data.records[0];
        setDataSource({
          total: record.zs,
          disposalNum: record.czz,
          completedNum: record.ywc,
        });
      }
    });
  };

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

  return (
    <BaseCard w={648} h={172} title={`照明故障总数 ${dataSource.total} 件`}>
      <Flex gap={20} style={{ marginTop: 10 }}>
        <Flex justify="space-between" align="center" className={styles.item}>
          <DescriptionItem
            value={dataSource.disposalNum}
            name="处置中"
            style={{ width: '100%' }}
            labelStyle={{
              fontSize: 22,
              color: 'rgb(203, 237, 255)',
            }}
            valueStyle={{
              fontSize: 26,
            }}
            unit="件"
            direction="horizontal"
          ></DescriptionItem>
        </Flex>
        <Flex justify="space-between" align="center" className={styles.item}>
          <DescriptionItem
            value={dataSource.completedNum}
            name="已处置"
            style={{ width: '100%' }}
            unit="件"
            labelStyle={{
              fontSize: 22,
              color: 'rgb(203, 237, 255)',
            }}
            valueStyle={{
              fontSize: 26,
            }}
            direction="horizontal"
          ></DescriptionItem>
        </Flex>
      </Flex>
    </BaseCard>
  );
});

export default Info;
