import DescriptionItem from '@/components/DescriptionItem';
import { createDate } from '@/pages/GlobalModalServices/components/BaseDatePicker';
import { useGlobalModalServices } from '@/pages/GlobalModalServices/provider';
import services from '@/services';
import { useSetState } from 'ahooks';
import dayjs from 'dayjs';
import React, { useEffect } from 'react';
import styles from './index.less';

const AssessmentInfo: React.FC<{
  metaData: any;
}> = (props) => {
  const { dispatch } = useGlobalModalServices();

  const { metaData } = props;

  const [dataSource, setDataSource] = useSetState({
    time: '',
    val1: '',
    val2: '',
  });

  const commonUnitStyle = {
    // 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',
  };

  useEffect(() => {
    const time = createDate('prev_year');
    services.DataBase.getSjdzInfoData({
      typeCode: 'hyzm-gl-ffssjclb',
      params: {
        glId: metaData?.id,
        startTime: time.value.start,
        endTime: time.value.end,
        pageSize: 1,
        pageNo: 0,
      },
    }).then((res: any) => {
      if (res.code === 200) {
        // console.log('res', res);
        const record = res.data?.data?.records?.[0].list?.[0];
        setDataSource({
          val2: record?.zhpg,
          time: dayjs(record?.wcrq).format('YYYY年'),
        });
      }
    });
    services.DataBase.getSjdzInfoData({
      typeCode: 'hyzm-gl-btjgjcpg',
      params: {
        glId: metaData?.id,
        startTime: time.value.start,
        endTime: time.value.end,
        pageSize: 1,
        pageNo: 0,
      },
    }).then((res) => {
      if (res.code === 200) {
        const record = res.data?.data?.records?.[0].list?.[0];

        setDataSource({
          val1: record?.jg,
        });
      }
    });
  }, [metaData?.id]);

  return (
    <div className={styles.container}>
      <div className={styles.header}>
        <span className={styles.title}>检测评估</span>
        <span className={styles.date}>{dataSource.time}</span>
      </div>
      <div className={styles.content}>
        <div className={styles.statsRow}>
          <DescriptionItem
            value={1}
            name="本体结构等级"
            unit={dataSource.val1 ?? '--'}
            valueStyle={{ display: 'none' }}
            unitStyle={{ ...commonUnitStyle, fontFamily: 'D-DIN Exp' }}
            labelStyle={commonLabelStyle}
            onClick={() => {
              // 管廊检测评估弹窗-本体
              dispatch.push(
                'PipelineAssessment',
                {
                  props: {
                    facilityType: 'main',
                  },
                },
                2,
              );
            }}
          />
          <DescriptionItem
            value={1}
            name="附属设施等级"
            unit={dataSource?.val2 ?? '--'}
            valueStyle={{ display: 'none' }}
            // unitStyle={{...commonUnitStyle, fontFamily: 'D-DIN Exp'}}
            unitStyle={commonUnitStyle}
            labelStyle={commonLabelStyle}
            onClick={() => {
              // 管廊检测评估弹窗-附属设施检测评估基础信息
              dispatch.push(
                'PipelineAssessment',
                {
                  props: {
                    facilityType: 'auxiliary',
                  },
                },
                2,
              );
            }}
          />
        </div>
      </div>
    </div>
  );
};

export default AssessmentInfo;
