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, { memo, useEffect, useState } from 'react';
import styles from './index.less';

const commonValueStyle = {
  background: 'linear-gradient(180deg, #AAFFF6 0%, #25BBFF 100%)',
  WebkitBackgroundClip: 'text',
  WebkitTextFillColor: 'transparent',
  fontFamily: 'D-DIN',
  fontSize: '36px',
  fontWeight: 700,
  lineHeight: 1.1,
};

const commonLabelStyle = {
  color: '#BCCEE9',

  fontSize: '20px',
  fontWeight: 400,
  lineHeight: 1.1,
};

const labelStyle = {
  ...commonLabelStyle,
  width: '90%',
};

const commonUnitStyle = {
  color: '#BCCEE9',
  fontSize: '20px',
  fontWeight: 400,
  lineHeight: 1.1,
};

/** @name 城市照明  */
const CityLighting: React.FC = memo(() => {
  const { dispatch } = useGlobalModalServices();

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

  /** 获取数据   */
  const getData = () => {
    services.DataBase.getSjdzInfoData({
      typeCode: 'hyzm-zxzmqk',
      params: {
        day: dayjs().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}>
      <Flex vertical gap={0}>
        <DescriptionItem
          value={dataSource?.total}
          name="市管功能照明灯盏数"
          unit="万盏"
          onClick={() => {
            dispatch.push('UrbanLighting', {
              props: {
                metaData: dataSource,
              },
            });
          }}
          valueStyle={commonValueStyle}
          labelStyle={commonLabelStyle}
          unitStyle={commonUnitStyle}
          decimals={2}
        />
        <Flex justify="space-between" style={{ marginTop: '20px' }}>
          <DescriptionItem
            value={dataSource?.yesterdayLightRate}
            name="昨日亮灯率"
            unit="%"
            valueStyle={commonValueStyle}
            labelStyle={labelStyle}
            unitStyle={commonUnitStyle}
            decimals={2}
          />
          <DescriptionItem
            value={dataSource?.yesterdayFaultNum}
            name="昨日故障数"
            unit="件"
            onClick={() => {
              dispatch.push('LightingFaultDisposal', {});
            }}
            valueStyle={commonValueStyle}
            labelStyle={labelStyle}
            unitStyle={commonUnitStyle}
            decimals={0}
          />
        </Flex>
      </Flex>
    </div>
  );
});

export default CityLighting;
