import questionMark from '@/assets/images/questionMark.png';
import DescriptionItem from '@/components/DescriptionItem';
import { createDate } from '@/pages/GlobalModalServices/components/BaseDatePicker';
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 InspectionInfo: 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',
    marginLeft: '8px',
  };
  useEffect(() => {
    const time = createDate('month');
    services.DataBase.getSjdzInfoData({
      typeCode: 'hyzm-gl-rcxjtj',
      params: {
        glId: metaData?.id,
        startTime: time.value.start,
        endTime: time.value.end,
      },
    }).then((res: any) => {
      if (res.code === 200) {
        const records = res.data.data.records[0];

        setDataSource({
          num1: records.xjcs,
          num2: Number(records.ybfxbhs) + Number(records.ztfxbhs),
        });
      }
    });
  }, [metaData?.id]);
  const popoverContent = (
    <div className={styles.popoverContent}>
      <div>统计时间范围：</div>
      <div>上月21日到本月20日</div>
    </div>
  );
  return (
    <div className={styles.container}>
      <div className={styles.header}>
        <span className={styles.title}>巡检管理</span>
        <span className={styles.date}>
          {dayjs().format('YYYY年MM月')}
          <Popover
            content={popoverContent}
            placement="bottomRight"
            overlayClassName={styles.customPopover}
          >
            <img
              src={questionMark}
              alt="info"
              className={styles.questionIcon}
            />
          </Popover>
        </span>
      </div>
      <div className={styles.content}>
        <div className={styles.statsRow}>
          <DescriptionItem
            value={dataSource.num1}
            name="巡检次数"
            unit="次"
            valueStyle={commonValueStyle}
            labelStyle={commonLabelStyle}
            unitStyle={commonUnitStyle}
            onClick={() => {
              dispatch.push(
                'PipelineInspection',
                {
                  props: {
                    metaData,
                  },
                },
                2,
              );
            }}
          />
          <DescriptionItem
            value={dataSource.num2}
            name="发现病害"
            unit="处"
            valueStyle={commonValueStyle}
            labelStyle={commonLabelStyle}
            unitStyle={commonUnitStyle}
            onClick={() => {
              // 巡检发现病害列表弹窗
              dispatch.push(
                'PipelineDefectList',
                {
                  props: {
                    metaData,
                  },
                },
                2,
              );
            }}
          />
        </div>
      </div>
    </div>
  );
};

export default InspectionInfo;
