import DescriptionItem from '@/components/DescriptionItem';
import { useGlobalModalServices } from '@/pages/GlobalModalServices/provider';
import { Flex } from 'antd';
import React from 'react';
import styles from './index.less';

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

  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',
    // fontFamily: '微软雅黑',
   
    fontWeight: 400,
    lineHeight: 1.1,
  };

  const commonUnitStyle = {
    color: '#BCCEE9',
    // fontFamily: '微软雅黑',
  
    fontWeight: 400,
    lineHeight: 1.1,
  };

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

  return (
    <div className={styles.container}>
      <Flex vertical gap={0}>
        <Flex gap={20}>
          <DescriptionItem
            value={14.05}
            name="本月建筑垃圾申报排放量"
            unit="万方"
            valueStyle={commonValueStyle}
            labelStyle={commonLabelStyle}
            unitStyle={commonUnitStyle}
            decimals={2}
            onClick={handleClick}
          />
          <DescriptionItem
            value={2387}
            name="本月发现问题"
            unit="件"
            valueStyle={commonValueStyle}
            labelStyle={commonLabelStyle}
            unitStyle={commonUnitStyle}
            decimals={0}
          />
        </Flex>
        <Flex gap={30}>
          <DescriptionItem
            value={56.82}
            name="本月生活垃圾焚烧量"
            unit="万吨"
            valueStyle={commonValueStyle}
            labelStyle={commonLabelStyle}
            unitStyle={commonUnitStyle}
            decimals={2}
          />
          <DescriptionItem
            value={14.05}
            name="本月生活垃圾处置量"
            unit="万吨"
            valueStyle={commonValueStyle}
            labelStyle={commonLabelStyle}
            unitStyle={commonUnitStyle}
            decimals={2}
          />
        </Flex>
        <div style={{ marginTop: '28px' }}>
          <DescriptionItem
            value={56.82}
            name="本月生活垃圾填埋量"
            unit="个"
            onClick={handleLivingGarbageClick}
            valueStyle={commonValueStyle}
            labelStyle={commonLabelStyle}
            unitStyle={commonUnitStyle}
            decimals={2}
          />
        </div>
      </Flex>
    </div>
  );
};

export default WasteDisposal;
