import DescriptionItem from '@/components/DescriptionItem';
import { useGlobalModalServices } from '@/pages/GlobalModalServices/provider';
import services from '@/services';
import { 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 { 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: '微软雅黑',

    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: '02',
      dateType: 'monthly',
      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: '02',
      dateType: 'month',
      objectId: areaId,
    };
    services.Physicalsign.getNormalEventTrendApi(params).then((res: any) => {
      console.log(res);
      if (res.code === 200) {
        setEventChartData(res.data);
      }
    });
  };

  useEffect(() => {
    getData();
    getEchartsData();
  }, []);
  //环卫车辆
  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}>
      <Flex vertical gap={20}>
        <DescriptionItem
          onClick={() => {
            dispatch.push('SanitationDisp');
          }}
          value={formatNumber(Number(eventCount))?.num}
          name="本月发现问题"
          unit={
            formatNumber(Number(eventCount), {
              one: '件',
              myriad: '万件',
            })?.unit
          }
          valueStyle={commonValueStyle}
          labelStyle={commonLabelStyle}
          unitStyle={commonUnitStyle}
          decimals={
            formatNumber(Number(eventCount), {
              one: '件',
              myriad: '万件',
            })?.unit == '件'
              ? 0
              : 2
          }
        />
        {/* <div>
          <LineCharts data={eventChartData || []} />
        </div> */}
        <Flex justify="space-between">
          <div
            onClick={() => {
              dispatch.push('SanitationResource', {
                // props: {
                //   data: selected,
                //   indexs: indexs,
                // },
              });
            }}
          >
            <DescriptionItem
              value={
                formatNumber(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}
              decimals={2}
            />
          </div>
          <div
            onClick={() => {
              dispatch.push('SanitationResource', {
                // props: {
                //   data: selected,
                //   indexs: indexs,
                // },
              });
            }}
          >
            <DescriptionItem
              value={formatNumber(hwryTotal)?.num}
              name="环卫人员"
              unit={
                formatNumber(hwryTotal, {
                  one: '人',
                  myriad: '万人',
                })?.unit
              }
              valueStyle={commonValueStyle}
              labelStyle={commonLabelStyle}
              unitStyle={commonUnitStyle}
              decimals={2}
            />
          </div>
        </Flex>
      </Flex>
    </div>
  );
};

export default EnvironmentalHealth;
