import industry5_1 from '@/assets/images/industryNew/industry5-1.png';
import industry5_3 from '@/assets/images/industryNew/industry5-3.png';
import industry6_1 from '@/assets/images/industryNew/industry6-1.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';
import { useDashboard } from '@/pages/Home_v_2504/components/context';

const MunicipalFacilities: React.FC = () => {
  const { dispatch } = useGlobalModalServices();
  const { navigateTo } = useDashboard();

  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 = {
    marginTop: '-4px',
    padding: '0px 0 0 4px',
  };
  //病害总数
  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} onClick={() => navigateTo('municipal')}>
      <Flex gap={15}>
        <div className={styles.dataBox}>
          <img
            src={industry6_1}
            alt=""
            className={styles.bgImage}
            style={{ left: '19%' }}
          />
          <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');
            // }}
          />
        </div>
        <div className={styles.dataBox}>
          <img src={industry5_1} alt="" className={styles.bgImage} />
          <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}
          />
        </div>
        <div className={styles.dataBox}>
          <img src={industry5_3} alt="" className={styles.bgImage} />
          <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}
          />
        </div>
      </Flex>
    </div>
  );
};

export default MunicipalFacilities;
