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 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';

const Advertisement: React.FC = () => {
  const { initialState } = useModel('@@initialState');
  const { areaId } = initialState;
  const { dispatch } = useGlobalModalServices();
  const [eventCount, setEventCount] = useState(0);

  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 = {
    // marginBottom: '-10px'
    marginTop: '-10px',
    padding: '10px 0 0 10px',
  };

  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}>
      <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' }}
        direction={'horizontal'}
        onClick={() => {
          dispatch.push('SanitationDisp', {
            title: '市容广告问题处置情况',
            props: {
              industry: '01',
            },
          });
        }}
      />

      <Flex gap={10}>
        <div className={styles.dataBox}>
          <img src={industry4_1} alt="" className={styles.bgImage} />
          <DescriptionItem
            value={18.21}
            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;
