import industry2_3 from '@/assets/images/industryNew/industry2-3.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 HouseholdWaste: 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: 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 handleLivingGarbageClick = () => {
    dispatch.push('LivingGarbage', {
      style: {
        top: 30,
      },
    });
  };

  return (
    <div
      className={styles.container}
      onClick={() => navigateTo('domesticWaste')}
      // style={{ cursor: 'pointer' }}
    >
      {/* 数据展示区 */}
      <Flex gap={15}>
        <div className={styles.dataBox}>
          <img
            src={industry6_1}
            alt=""
            className={styles.bgImage}
            style={{ left: '19%' }}
          />
          <DescriptionItem
            direction="vertical"
            name="本月发现问题"
            // unit={
            //   formatNumber(Number(eventCount), {
            //     one: '件',
            //     myriad: '万件',
            //   })?.unit
            // }
            unit="件"
            valueStyle={commonValueStyle1}
            labelStyle={commonLabelStyle}
            unitStyle={commonUnitStyle}
            style={{ justifyContent: 'start' }}
            // decimals={
            //   formatNumber(Number(eventCount), {
            //     one: '件',
            //     myriad: '万件',
            //   })?.unit == '件'
            //     ? 0
            //     : 2
            // }
            // value={convertUnits(Number(eventCount))?.num}
            showTextToValue
            value={'--'}
          />
        </div>
        <div className={styles.dataBox}>
          <img src={industry2_3} alt="" className={styles.bgImage} />
          <DescriptionItem
            value={infoData?.total}
            name="本月处置总量"
            unit="万吨"
            valueStyle={commonValueStyle}
            labelStyle={commonLabelStyle}
            unitStyle={commonUnitStyle}
            decimals={1}
            // onClick={handleLivingGarbageClick}
            style={commonStyle}
          />
        </div>
      </Flex>
    </div>
  );
};

export default HouseholdWaste;
