import industry5_1 from '@/assets/images/industryNew/industry5-1.png';
import industry5_2 from '@/assets/images/industryNew/industry5-2.png';
import industryTitle3 from '@/assets/images/industryNew/industryTitle3.png';
import industryTitle4 from '@/assets/images/industryNew/industryTitle4.png';
import DescriptionItem from '@/components/DescriptionItem';
import { useGlobalModalServices } from '@/pages/GlobalModalServices/provider';
import services from '@/services';
import { convertUnits, formatNumber } from '@/utils/ui';
import { useRequest } from 'ahooks';
import { Flex } from 'antd';
import dayjs from 'dayjs';
import React from 'react';
import styles from './index.less';

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

  const commonLabelStyle = {
    color: '#BCCEE9',
    fontSize: '16px',
    fontWeight: 400,
    marginTop: '-8px', // 添加这行来缩短间距
  };

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

  const commonStyle = {
    marginTop: '-14px',
    // padding: '0px 0 0 0px',
    // width: '100px',
    // height: '20px',
  };
  //病害总数
  const { data: total } = useRequest(() =>
    services.DataBase.getSjdzInfoData({
      typeCode: 'zzcc-dq-dlqlbhxx',
      params: {
        type: 0,
        startTime: dayjs().startOf('month').format('YYYY-MM-DD'),
        endTime: dayjs().endOf('month').format('YYYY-MM-DD'),
      },
    }).then((res) => {
      if (res.code === 200) {
        return res?.data?.data?.records?.[0]?.total;
      }
      throw new Error('获取数据失败');
    }),
  );
  //桥梁总数
  const { data: bridgeTotal } = useRequest(() =>
    services.DataBase.getSjdzInfoData({
      typeCode: 'zzcc-dq-qsqlzszmj',
    }).then((res) => {
      if (res.code === 200) {
        return res?.data?.data?.records?.[0];
      }
      throw new Error('获取数据失败');
    }),
  );
  //道路总数
  const { data: roadTotal } = useRequest(() =>
    services.DataBase.getSjdzInfoData({
      typeCode: 'zzcc-dq-qsdlzs',
    }).then((res) => {
      if (res.code === 200) {
        return res?.data?.data?.records?.[0];
      }
      throw new Error('获取数据失败');
    }),
  );


  const handleBridgeClick = () => {
    dispatch.push('BridgeManage', {
      props: {
        defaultViewType: 'bridge',
      },
    });
  };

  const handleRoadClick = () => {
    dispatch.push('BridgeManage', {
      props: {
        defaultViewType: 'road',
      },
    });
  };

  // 管廊数据
  const { data: glzsData } = useRequest(() =>
    services.DataBase.getSjdzInfoData({
      typeCode: 'hygl-glzs',
    }).then((res) => {
      if (res.code === 200) {
        return res?.data?.data?.records[0] || {};
      }
      throw new Error('获取数据失败');
    }),
  );

  return (
    <div className={styles.container}>
      {/* 城市道桥区域 */}
      <div className={styles.section}>
        <img
          src={industryTitle3}
          alt="城市道桥"
          className={styles.titleImage}
          onClick={handleBridgeClick}
        />
        <div className={styles.dataBox}>
          <img src={industry5_1} alt="" className={styles.bgImage} />
          <Flex gap={35}>
            <DescriptionItem
              value={convertUnits(Number(bridgeTotal?.num))?.num}
              name="全市桥梁"
              unit={
                formatNumber(Number(bridgeTotal?.num), {
                  one: '座',
                  myriad: '万座',
                })?.unit
              }
              valueStyle={commonValueStyle}
              labelStyle={commonLabelStyle}
              unitStyle={commonUnitStyle}
              decimals={
                formatNumber(Number(bridgeTotal?.num),{
                  one: '座',
                  myriad: '万座',
                })?.unit == '座' ? 0 : 2
              }
              style={commonStyle}
              onClick={handleBridgeClick}
            />
            <DescriptionItem
              
              value={convertUnits(Number(roadTotal?.num))?.num}
              name="全市道路"
              unit={
                formatNumber(Number(roadTotal?.num), {
                  one: '条',
                  myriad: '万条',
                })?.unit
              }
              valueStyle={commonValueStyle}
              labelStyle={commonLabelStyle}
              unitStyle={commonUnitStyle}
              decimals={
                formatNumber(Number(roadTotal?.num),{
                  one: '条',
                  myriad: '万条',
                })?.unit == '条' ? 0 : 2
              }
              style={commonStyle}
              onClick={handleRoadClick}
            />
            <DescriptionItem
              value={convertUnits(Number(total))?.num}
              name="本月发现道桥病害"
              unit={formatNumber(Number(total))?.unit}
              valueStyle={commonValueStyle}
              labelStyle={commonLabelStyle}
              unitStyle={commonUnitStyle}
              decimals={formatNumber(Number(total))?.unit == '件' ? 0 : 2}
              style={commonStyle}
              onClick={() => {
                dispatch.push('BridgeMaintenanceList');
              }}
            />
          </Flex>
        </div>
      </div>

      {/* 综合管廊区域 */}
      <div className={styles.section}>
        <img
          src={industryTitle4}
          alt="综合管廊"
          className={styles.titleImage}
          onClick={() => {
            dispatch.push('PipelinePassage');
          }}
        />
        <div className={styles.dataBox}>
          <img src={industry5_2} alt="" className={styles.bgImage} />
          <Flex gap={35}>
            <DescriptionItem
              value={glzsData?.zs}
              name="综合管廊"
              unit="条"
              valueStyle={commonValueStyle}
              labelStyle={commonLabelStyle}
              unitStyle={commonUnitStyle}
              decimals={0}
              style={commonStyle}
              onClick={() => {
                dispatch.push('PipelinePassage');
              }}
            />
            <DescriptionItem
              value={glzsData?.baoy + glzsData?.weixiu}
              name="上月完成管廊维护"
              unit="处"
              valueStyle={commonValueStyle}
              labelStyle={commonLabelStyle}
              unitStyle={commonUnitStyle}
              decimals={0}
              style={commonStyle}
            />
          </Flex>
        </div>
      </div>
    </div>
  );
};

export default MunicipalFacilities;
