import industry2_1 from '@/assets/images/industryNew/industry2-1.png';
import industry2_2 from '@/assets/images/industryNew/industry2-2.png';
import industryTitle1 from '@/assets/images/industryNew/industryTitle1.png';
import industryTitle2 from '@/assets/images/industryNew/industryTitle2.png';
import DescriptionItem from '@/components/DescriptionItem';
import { useGlobalModalServices } from '@/pages/GlobalModalServices/provider';
import services from '@/services';
import { useRequest } from 'ahooks';
import { Flex } from 'antd';
import dayjs from 'dayjs';
import React from 'react';
import styles from './index.less';

const WasteDisposal: React.FC = () => {
  const { dispatch } = useGlobalModalServices();

  const { data: emitTotal } = useRequest(() =>
    services.DataBase.getSjdzInfoData({
      typeCode: 'zzcc-jzlj-aqytjpfl',
      params: {
        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: infoData } = useRequest(() =>
    services.DataBase.getSjdzInfoData({
      typeCode: 'zzcc-shlj-czzl',
      params: {
        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];
      }
      throw new Error('获取数据失败');
    }),
  );

  const { data: dumpTotal } = useRequest(() =>
    services.DataBase.getSjdzInfoData({
      typeCode: 'zzcc-jzlj-wgqddwh',
      params: {
        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 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',
  };

  const handleClick = (activeTab?: string) => {
    dispatch.push('ConstructionWaste', {
      style: {
        top: 30,
      },
      props:{
        activeTab
      }
    });
  };

  const handleLivingGarbageClick = () => {
    dispatch.push('LivingGarbage', {
      style: {
        top: 30,
      },
    });
  };

  return (
    <div className={styles.container}>
      {/* 生活垃圾区域 */}
      <div className={styles.section}>
        <img
          src={industryTitle1}
          alt="生活垃圾"
          className={styles.titleImage}
          onClick={handleLivingGarbageClick}
        />
        <div className={styles.dataBox}>
          <img src={industry2_1} alt="" className={styles.bgImage} />
          <Flex gap={35}>
            <DescriptionItem
               value={infoData?.total}
              name="本月处置总量"
              unit="万吨"
              valueStyle={commonValueStyle}
              labelStyle={commonLabelStyle}
              unitStyle={commonUnitStyle}
              decimals={2}
              onClick={handleLivingGarbageClick}
              style={commonStyle}
            />
            <DescriptionItem
               value={infoData?.fsl}
              name="本月焚烧量"
              unit="万吨"
              valueStyle={commonValueStyle}
              labelStyle={commonLabelStyle}
              unitStyle={commonUnitStyle}
              decimals={2}
              style={commonStyle}
              onClick={handleLivingGarbageClick}
            />
            <DescriptionItem
                value={infoData?.tml}
              name="本月填埋量"
              unit="万吨"
              valueStyle={commonValueStyle}
              labelStyle={commonLabelStyle}
              unitStyle={commonUnitStyle}
              decimals={2}
              style={commonStyle}
              onClick={handleLivingGarbageClick}
            />
          </Flex>
        </div>
      </div>

      {/* 建筑垃圾区域 */}
      <div className={styles.section}>
        <img
          src={industryTitle2}
          alt="建筑垃圾"
          className={styles.titleImage}
          onClick={()=>{handleClick('1')}}
        />
        <div className={styles.dataBox}>
          <img src={industry2_2} alt="" className={styles.bgImage} />
          <Flex gap={35}>
            <DescriptionItem
              value={emitTotal}
              name="本月申报排放量"
              unit="万方"
              valueStyle={commonValueStyle}
              labelStyle={commonLabelStyle}
              unitStyle={commonUnitStyle}
              decimals={2}
              style={commonStyle}
              onClick={()=>{handleClick('1')}}
            />
            <DescriptionItem
              value={dumpTotal}
              name="本月发现问题"
              unit="件"
              valueStyle={commonValueStyle}
              labelStyle={commonLabelStyle}
              unitStyle={commonUnitStyle}
              decimals={0}
              style={commonStyle}
              onClick={()=>{
                handleClick('2')
              }}
            />
          </Flex>
        </div>
      </div>
    </div>
  );
};

export default WasteDisposal;
