import DescriptionItem from '@/components/DescriptionItem';
import { useGlobalModalServices } from '@/pages/GlobalModalServices/provider';
import services from '@/services';
import { useModel } from '@umijs/max';
import { Flex } from 'antd';
import React, { useEffect, useState } from 'react';
import CountUp from 'react-countup';
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 [eventChartData, setEventChartData] = useState([]);

  const commonValueStyle = {
    background: 'linear-gradient(180deg, #AAFFF6 0%, #25BBFF 100%)',
    WebkitBackgroundClip: 'text',
    WebkitTextFillColor: 'transparent',
    fontFamily: 'D-DIN',
    fontSize: '30px',
    fontWeight: 700,
    lineHeight: 1.1,
  };

  const commonLabelStyle = {
    color: '#BCCEE9',
    // fontFamily: '微软雅黑',
    fontSize: '20px',
    fontWeight: 400,
    lineHeight: 1.1,
  };

  const labelStyle = {
    ...commonLabelStyle,
    width: '85%',
  };

  const commonUnitStyle = {
    color: '#BCCEE9',
    // fontFamily: '微软雅黑',
    fontSize: '20px',
    fontWeight: 400,
    lineHeight: 1.1,
  };

  const getData = () => {
    const params = {
      industry: '01',
      dateType: 'today',
      objectId: areaId,
    };
    services.Physicalsign.getNormalEventCountApi(params).then((res: any) => {
      console.log(res);
      if (res.code === 200) {
        setEventCount(res.data?.problemCount);
      }
    });
  };

  const getEchartsData = () => {
    const params = {
      industry: '01',
      dateType: 'month',
      objectId: areaId,
    };
    services.Physicalsign.getNormalEventTrendApi(params).then((res: any) => {
      console.log(res);
      if (res.code === 200) {
        setEventChartData(res.data);
      }
    });
  };

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

  return (
    <div className={styles.container}>
      <Flex vertical gap={15}>
        <div
          onClick={() => {
            dispatch.push('SanitationDisp', {
              title: '市容广告问题处置情况',
              props:{
                industry: '01',
              }
            });
          }}
        >
          <div>
            <CountUp
              className={styles.value}
              end={Number(eventCount)}
              style={commonValueStyle}
              preserveValue
              decimals={0}
            />
            {/* <div style={commonValueStyle}>--</div> */}
            <span className={styles.unit} style={commonUnitStyle}>
              件
            </span>
          </div>
          <div className={styles.label} style={commonLabelStyle}>
            本月发现问题
          </div>
        </div>

        {/* <div>
          <LineCharts data={eventChartData || []} />
        </div> */}
        <Flex justify="space-between" style={{ marginTop: 10 }}>
          <DescriptionItem
            value={56.01}
            name="共享单车投放数"
            unit="万辆"
            valueStyle={commonValueStyle}
            labelStyle={commonLabelStyle}
            unitStyle={commonUnitStyle}
            decimals={2}
          />
          <DescriptionItem
            value={12.25}
            name="”门前五包“ 签约率"
            unit="万户"
            valueStyle={commonValueStyle}
            labelStyle={commonLabelStyle}
            unitStyle={commonUnitStyle}
            decimals={2}
          />
        </Flex>
        <DescriptionItem
          style={{ marginTop: 10 }}
          value={36.6}
          name="批准设置广告招牌"
          unit="万个"
          valueStyle={commonValueStyle}
          labelStyle={commonLabelStyle}
          unitStyle={commonUnitStyle}
          decimals={2}
        />
      </Flex>
    </div>
  );
};

export default Advertisement;
