import industry3_1 from '@/assets/images/industryNew/industry3-1.png';
import industry3_2 from '@/assets/images/industryNew/industry3-2.png';
import DescriptionItem from '@/components/DescriptionItem';
import { useGlobalModalServices } from '@/pages/GlobalModalServices/provider';
import services from '@/services';
import { Flex } from 'antd';
import dayjs from 'dayjs';
import React, { useEffect, useState } from 'react';
import styles from './index.less';

const CityLighting: React.FC = () => {
  const { dispatch } = useGlobalModalServices();
  const commonValueStyle = {
    background: 'linear-gradient(180deg, #9CF8F7 0%, #25BBFF 100%)',
    WebkitBackgroundClip: 'text',
    WebkitTextFillColor: 'transparent',
    fontFamily: 'D-DIN',
    fontSize: '30px',
    fontWeight: 700,
  };

  const commonValueStyle1 = {
    ...commonValueStyle,
    marginLeft: 15,
  };

  const commonLabelStyle = {
    color: '#BCCEE9',
    fontSize: '16px',
    fontWeight: 400,
  };

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

  const commonStyle = {
    // marginBottom: '-10px'
    marginTop: '-10px',
    padding: '0px 0 0 10px',
  };

  const [dataSource, setDataSource] = useState<{
    total: number;
    yesterdayLightRate: number;
    yesterdayFaultNum: number;
  }>();

  /** 获取数据   */
  const getData = () => {
    services.DataBase.getSjdzInfoData({
      typeCode: 'hyzm-zxzmqk',
      params: {
        day: dayjs().subtract(1, 'day').format('YYYY-MM-DD'),
      },
    }).then((res) => {
      if (res.code === 200) {
        const record = res.data?.data?.records[0];

        const data = {
          total: parseFloat(((record?.zmd ?? 0) / 10000).toFixed(2)),
          yesterdayLightRate: record?.ldl,
          yesterdayFaultNum: record?.gzs,
        };

        setDataSource(data);
      }
    });
  };

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

  return (
    <div className={styles.container}>
      {/* 灯盏数统计 */}
      <DescriptionItem
        value={dataSource?.total}
        name="市管功能照明灯盏数"
        unit="万盏"
        valueStyle={commonValueStyle1}
        labelStyle={commonLabelStyle}
        unitStyle={commonUnitStyle}
        decimals={2}
        direction={'horizontal'}
        style={{ justifyContent: 'start', marginBottom: '6px' }}
        // style={{width: '265px', marginBottom: '6px'}}
        onClick={() => {
          dispatch.push('UrbanLighting', {
            props: {
              metaData: dataSource,
            },
          });
        }}
      />

      {/* 数据展示区 */}
      <Flex gap={20}>
        <div className={styles.dataBox}>
          <img src={industry3_1} alt="" className={styles.bgImage} />
          <DescriptionItem
            value={dataSource?.yesterdayLightRate}
            name="昨日亮灯率"
            unit="%"
            onClick={() => {
              dispatch.push('UrbanLighting', {
                props: {
                  metaData: dataSource,
                },
              });
            }}
            valueStyle={commonValueStyle}
            labelStyle={commonLabelStyle}
            unitStyle={commonUnitStyle}
            decimals={2}
            style={commonStyle}
          />
        </div>
        <div className={styles.dataBox}>
          <img src={industry3_2} alt="" className={styles.bgImage} />
          <DescriptionItem
            value={dataSource?.yesterdayFaultNum}
            name="昨日故障数"
            unit="件"
            valueStyle={commonValueStyle}
            labelStyle={commonLabelStyle}
            unitStyle={commonUnitStyle}
            decimals={0}
            style={commonStyle}
            onClick={() => {
              dispatch.push('LightingFaultDisposal', {});
            }}
          />
        </div>
      </Flex>
    </div>
  );
};

export default CityLighting;
