import industry4_1 from '@/assets/images/industryNew/industry4-1.png';
import industry4_2 from '@/assets/images/industryNew/industry4-2.png';
import industry4_3 from '@/assets/images/industryNew/industry4-3.png';
import industry6_1 from '@/assets/images/industryNew/industry6-1.png';
import DescriptionItem from '@/components/DescriptionItem';
import { useGlobalModalServices } from '@/pages/GlobalModalServices/provider';
import services from '@/services';
import { convertUnits, formatNumber } from '@/utils/ui';
import { useModel } from '@umijs/max';
import { Flex } from 'antd';
import React, { useEffect, useState } from 'react';
import styles from './index.less';
import { useDashboard } from '@/pages/Home_v_2504/components/context';
const Advertisement: React.FC = () => {
  const { initialState } = useModel('@@initialState');
  const { areaId } = initialState;
  const { dispatch } = useGlobalModalServices();
  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: '01',
      dateType: 'monthly',
      objectId: areaId,
    };
    services.Physicalsign.getNormalEventCountApi(params).then((res: any) => {
      // console.log(res);
      if (res.code === 200) {
        setEventCount(res.data?.problemCount);
      }
    });
  };

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

  return (
    <div className={styles.container} onClick={() => navigateTo('cityAppearance')}>
      <Flex gap={15}>
        <div className={styles.dataBox}>
          <img
            src={industry6_1}
            alt=""
            className={styles.bgImage}
            style={{ left: '19%' }}
          />
          <DescriptionItem
            value={convertUnits(Number(eventCount))?.num}
            name="本月发现问题"
            unit={formatNumber(Number(eventCount))?.unit}
            valueStyle={commonValueStyle1}
            labelStyle={commonLabelStyle}
            unitStyle={commonUnitStyle}
            decimals={
              formatNumber(Number(eventCount), {
                one: '件',
                myriad: '万件',
              })?.unit == '件'
                ? 0
                : 2
            }
            style={{ justifyContent: 'start' }}

            // onClick={() => {
            //   dispatch.push('SanitationDisp', {
            //     title: '市容广告问题处置情况',
            //     props: {
            //       industry: '01',
            //     },
            //   });
            // }}
          />
        </div>
        <div className={styles.dataBox}>
          <img src={industry4_1} alt="" className={styles.bgImage} />
          <DescriptionItem
            value={89.1}
            name="共享单车"
            unit="万辆"
            valueStyle={commonValueStyle}
            labelStyle={commonLabelStyle}
            unitStyle={commonUnitStyle}
            decimals={1}
            style={commonStyle}
          />
        </div>
      </Flex>

      {/* <Flex gap={10}>
        <div className={styles.dataBox}>
          <img src={industry4_1} alt="" className={styles.bgImage} />
          <DescriptionItem
            value={89.05}
            name="共享单车投放"
            unit="万辆"
            valueStyle={commonValueStyle}
            labelStyle={commonLabelStyle}
            unitStyle={commonUnitStyle}
            decimals={2}
            style={commonStyle}
          />
        </div>
        <div className={styles.dataBox}>
          <img src={industry4_2} alt="" className={styles.bgImage1} />
          <DescriptionItem
            value={100}
            name="门前五包签约率"
            unit="%"
            valueStyle={commonValueStyle}
            labelStyle={commonLabelStyle}
            unitStyle={commonUnitStyle}
            decimals={0}
            style={commonStyle}
          />
        </div>
        <div className={styles.dataBox}>
          <img src={industry4_3} alt="" className={styles.bgImage2} />

          <DescriptionItem
            value={3350}
            name="全市户外广告"
            unit="余个"
            valueStyle={commonValueStyle}
            labelStyle={commonLabelStyle}
            unitStyle={commonUnitStyle}
            decimals={0}
            style={commonStyle}
          />
        </div>
      </Flex> */}
    </div>
  );
};

export default Advertisement;
