import industry1_1 from '@/assets/images/industryNew/industry1-1.png';
import industry1_2 from '@/assets/images/industryNew/industry1-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 { convertUnits, formatNumber } from '@/utils/ui';
import { useModel } from '@umijs/max';
import { useRequest } from 'ahooks';
import { Flex } from 'antd';
import React, { useEffect, useMemo, useState } from 'react';
import styles from './index.less';

const EnvironmentalHealth: React.FC = () => {
  const { dispatch } = useGlobalModalServices();
  const { initialState } = useModel('@@initialState');
  const { areaId } = initialState;
  const [eventCount, setEventCount] = useState(0);
  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 getData = () => {
    const params = {
      industry: '02',
      dateType: 'monthly',
      objectId: areaId,
    };
    services.Physicalsign.getNormalEventCountApi(params).then((res: any) => {
      console.log(res);
      if (res.code === 200) {
        setEventCount(res.data?.problemCount);
      }
    });
  };

  useEffect(() => {
    getData();
  }, []);

  //环卫车辆
  const { data: clzs } = useRequest(() =>
    services.DataBase.getSjdzInfoData({
      typeCode: 'zzcc-clzs',
    }),
  );
  //环卫人员
  const { data: hwrysl } = useRequest(() =>
    services.DataBase.getSjdzInfoData({
      typeCode: 'zzcc-hwrysl',
    }),
  );
  const hwryTotal = useMemo(() => {
    return (
      hwrysl?.data?.data?.records?.[0]?.female +
      hwrysl?.data?.data?.records?.[0]?.male
    );
  }, [hwrysl]);

  return (
    <div 
      className={styles.container} 
      onClick={() => navigateTo('environment')} 
      // style={{ cursor: 'pointer' }}
    >
      {/* 问题统计 */}
      {/* <DescriptionItem
        name="本月发现问题"
        unit={
          formatNumber(Number(eventCount), {
            one: '件',
            myriad: '万件',
          })?.unit
        }
        valueStyle={commonValueStyle1}
        labelStyle={commonLabelStyle}
        unitStyle={commonUnitStyle}
        style={{ justifyContent: 'start' }}
        // style={{width: '235px'}}
        decimals={
          formatNumber(Number(eventCount), {
            one: '件',
            myriad: '万件',
          })?.unit == '件'
            ? 0
            : 2
        }
        direction={'horizontal'}
        // onClick={() => {
        //   dispatch.push('SanitationDisp');
        // }}
        value={convertUnits(Number(eventCount))?.num}
      /> */}

      {/* 数据展示区 */}
      <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
            }
            valueStyle={commonValueStyle1}
            labelStyle={commonLabelStyle}
            unitStyle={commonUnitStyle}
            style={{ justifyContent: 'start' }}
     
            decimals={
              formatNumber(Number(eventCount), {
                one: '件',
                myriad: '万件',
              })?.unit == '件'
                ? 0
                : 2
            }
          
            // onClick={() => {
            //   dispatch.push('SanitationDisp');
            // }}
            value={convertUnits(Number(eventCount))?.num}
          />
        </div>
        <div className={styles.dataBox}>
          <img src={industry1_1} alt="" className={styles.bgImage} />
          <DescriptionItem
            value={
              convertUnits(clzs?.data?.data?.records?.[0]?.totalVehicleCount)
                ?.num
            }
            name="环卫车辆"
            unit={
              formatNumber(clzs?.data?.data?.records?.[0]?.totalVehicleCount, {
                one: '辆',
                myriad: '万辆',
              })?.unit
            }
            valueStyle={commonValueStyle}
            labelStyle={commonLabelStyle}
            unitStyle={commonUnitStyle}
            style={commonStyle}
            decimals={2}
            direction='vertical'
            // onClick={() => {
            //   dispatch.push('SanitationResource', {
            //     // props: {
            //     //   data: selected,
            //     //   indexs: indexs,
            //   });
            // }}
          />
        </div>
        <div className={styles.dataBox}>
          <img src={industry1_2} alt="" className={styles.bgImage} />
          <DescriptionItem
            value={convertUnits(hwryTotal)?.num}
            name="环卫人员"
            unit={
              formatNumber(hwryTotal, {
                one: '人',
                myriad: '万人',
              })?.unit
            }
            valueStyle={commonValueStyle}
            labelStyle={commonLabelStyle}
            unitStyle={commonUnitStyle}
            style={commonStyle}
            decimals={2}
            direction='vertical'
            // onClick={() => {
            //   dispatch.push('SanitationResource', {
            //     // props: {
            //     //   data: selected,
            //     //   indexs: indexs,
            //     // },
            //   });
            // }}
          />
        </div>
      </Flex>
    </div>
  );
};

export default EnvironmentalHealth;
