import industry2_2 from '@/assets/images/industryNew/industry2-2.png';
import industry6_1 from '@/assets/images/industryNew/industry6-1.png';
import DescriptionItem from '@/components/DescriptionItem';
import { useGlobalModalServices } from '@/pages/GlobalModalServices/provider';
import { useDashboard } from '@/pages/Home_v_2504/components/context';
import services from '@/services';
import { useModel } from '@umijs/max';
import { useRequest } from 'ahooks';
import { Flex } from 'antd';
import dayjs from 'dayjs';
import React from 'react';
import styles from './index.less';

const ConstructionWaste: React.FC = () => {
  const { dispatch } = useGlobalModalServices();
  const { initialState } = useModel('@@initialState');
  const { areaId } = initialState;
  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: 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: 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 handleClick = (activeTab?: string) => {
    dispatch.push('ConstructionWaste', {
      style: {
        top: 30,
      },
      props:{
        activeTab
      }
    });
  };
  return (
    <div
      className={styles.container}
      onClick={() => navigateTo('constructionWaste')}
      // style={{ cursor: 'pointer' }}
    >
      {/* 数据展示区 */}
      <Flex gap={15}>
        <div className={styles.dataBox}>
          <img
            src={industry6_1}
            alt=""
            className={styles.bgImage}
            style={{ left: '19%' }}
          />
         <DescriptionItem
              value={dumpTotal}
              name="本月发现问题"
              unit="件"
              valueStyle={commonValueStyle}
              labelStyle={commonLabelStyle}
              unitStyle={commonUnitStyle}
              decimals={0}
              style={commonStyle}
              // onClick={()=>{
              //   handleClick('2')
              // }}
            />
        </div>
        <div className={styles.dataBox}>
          <img src={industry2_2} alt="" className={styles.bgImage} />
          <DescriptionItem
              value={emitTotal}
              name="本月申报排放量"
              unit="万方"
              valueStyle={commonValueStyle}
              labelStyle={commonLabelStyle}
              unitStyle={commonUnitStyle}
              decimals={1}
              style={commonStyle}
              // onClick={()=>{handleClick('1')}}
            />
        </div>
      </Flex>
    </div>
  );
};

export default ConstructionWaste;
