import questionMark from '@/assets/images/questionMark.png';
import DescriptionItem from '@/components/DescriptionItem';
import { useGlobalModalServices } from '@/pages/GlobalModalServices/provider';
import services from '@/services';
import { Popover } from 'antd';
import dayjs from 'dayjs';
import React, { useEffect, useState } from 'react';
import styles from './index.less';

const MaintenanceInfo: React.FC<{
  metaData: any;
}> = ({ metaData }) => {
  const { dispatch } = useGlobalModalServices();
  const [dataSource, setDataSource] = useState({
    num1: 0,
    num2: 0,
  });
  const commonValueStyle = {
    fontFamily: 'D-DIN Exp',
    fontSize: '36px',
    fontWeight: '700',
    background: 'linear-gradient(180deg, #9CF8F7 0%, #25BBFF 100%)',
    WebkitBackgroundClip: 'text',
    WebkitTextFillColor: 'transparent',
  };

  const commonLabelStyle = {
    color: '#BCCEE9',
    fontSize: '20px',
    marginTop: '-4px',
  };

  const commonUnitStyle = {
    color: '#BCCEE9',
    fontSize: '20px',
  };

  const popoverContent = (
    <div className={styles.popoverContent}>
      <div>统计时间范围：</div>
      <div>上月21日到本月20日</div>
    </div>
  );

  useEffect(() => {
    const endTime = dayjs().set('date', 20).format('YYYY-MM-DD');

    const startTime = dayjs()
      .subtract(1, 'month')
      .set('date', 21)
      .format('YYYY-MM-DD');

    services.DataBase.getSjdzInfoData({
      typeCode: 'hyzm-gl-rxwhqk',
      params: {
        startTime: startTime,
        endTime: endTime,
        glId: metaData.id,
      },
    }).then((res: any) => {
      if (res.code === 200) {
        const records = res.data.data.records[0];

        setDataSource({
          num1: records.btjg.rcby + records.btjg.rcwx,
          num2: records.fsss.rcby + records.fsss.rcwx,
        });
      }
    });
  }, [metaData?.id]);

  return (
    <div className={styles.container}>
      <div className={styles.header}>
        <span className={styles.title}>维护管理</span>
        <span className={styles.date}>
          {dayjs().format('YYYY年MM月')}
          {/* <img src={pipeMapCheck} alt="info" className={styles.infoIcon} /> */}
          <Popover
            content={popoverContent}
            placement="bottomRight"
            overlayClassName={styles.customPopover}
          >
            <img
              src={questionMark}
              alt="info"
              className={styles.questionIcon}
            />
          </Popover>
        </span>
      </div>
      <div className={styles.content}>
        <DescriptionItem
          value={dataSource.num1}
          name="本体维护保养"
          unit="处"
          valueStyle={commonValueStyle}
          labelStyle={commonLabelStyle}
          onClick={() => {
            // 管廊维护列表弹窗
            dispatch.push(
              'PipelineMaintenance',
              {
                title: `${metaData.name}维护列表`,
                props: {
                  metaData,
                },
              },
              2,
            );
          }}
          unitStyle={commonUnitStyle}
        />
        <DescriptionItem
          value={dataSource.num2}
          name="附属设施维护保养"
          unit="处"
          valueStyle={commonValueStyle}
          labelStyle={commonLabelStyle}
          unitStyle={commonUnitStyle}
          onClick={() => {
            // 管廊维护列表弹窗
            dispatch.push(
              'PipelineMaintenance',
              {
                title: `${metaData.name}维护列表`,
                props: {
                  metaData,
                },
              },
              2,
            );
          }}
        />
      </div>
    </div>
  );
};

export default MaintenanceInfo;
