import bottom from '@/assets/images/urbanSituation/bottom.png';
import upIcon from '@/assets/images/urbanSituation/up.png';
import { useGlobalModalServices } from '@/pages/GlobalModalServices/provider';
import services from '@/services';
import { formatNumber } from '@/utils/ui';
import type { StatisticProps } from 'antd';
import { Flex, Space, Statistic } from 'antd';
import React, { memo, useEffect, useMemo, useState } from 'react';
import CountUp from 'react-countup';
import styles from './index.less';
// import PeopleComplaint111 from '../PeopleComplaint';

const formatter: StatisticProps['formatter'] = (value: any) => {
  return (
    <CountUp
      end={formatNumber(value)?.num as number}
      separator=""
      decimals={formatNumber(value)?.unit == '万件' ? 2 : 0}
    />
  );
};

const Problem: React.FC = memo(() => {
  const [modalOpt, setModalOpt] = useState<{
    open: boolean;
    title: string;
    type: string;
    width?: number;
    height?: number;
    singleType?: string;
    isOther?: string;
    collectionMode?: string;
  }>({
    open: false,
    title: '',
    type: '',
  });

  const [statisticsData, setStatisticsData] = useState<any>({});

  const { dispatch } = useGlobalModalServices();

  const groupCard = useMemo(() => {
    return {
      topCard: [
        {
          name: '诚管24高速通道',

          value: statisticsData.cityHighNum,

          modalConf: {
            type: 'CgftEvent',
            title: '诚管24高速通道处置情况',
            singleType: '1',
          },
          unit: formatNumber(statisticsData.cityHighNum)?.unit,
        },
        {
          name: '智慧蓉城提级通道',
          value: statisticsData.moreNum,
          // value: formatNumber(statisticsData.moreNum)?.num,
          modalConf: {
            type: 'UrbanOperation',
            title: '智慧蓉城提级通道处置情况',
            eventType: '5',
          },
          unit: formatNumber(statisticsData.moreNum)?.unit,
        },
        {
          name: '诚管24普通通道',
          value: statisticsData.cityCommonNum,
          // value: formatNumber(statisticsData.cityCommonNum)?.num,
          modalConf: {
            type: 'CgftEvent',
            title: '诚管24普通通道处置情况',
            singleType: '2',
          },
          unit: formatNumber(statisticsData.cityCommonNum)?.unit,
        },
        {
          name: '行业自闭环通道',
          value: statisticsData.otherSourceNum,
          // value: formatNumber(statisticsData.otherSourceNum)?.num,
          modalConf: {
            type: 'OtherEvent',
            title: '行业自闭环通道处置情况',
            isOther: '1',
          },
          unit: formatNumber(statisticsData.otherSourceNum)?.unit,
        },
      ],
      centerStatistic: [
        {
          name: '待处置',
          //value: statisticsData.disposalNum,
          // value: statisticsData.toDisposedNum,
          value: formatNumber(statisticsData.disposalNum)?.num,
          // unit: '件',
          modalConf: {
            type: 'ToDisposed',
            title: '待处置事件',
          },
          unit: formatNumber(statisticsData.disposalNum)?.unit,
        },
        {
          name: '办结率',
          value: statisticsData.completionRate?.toFixed(2),
          unit: '%',
          modalConf: {
            type: 'CompletionRate',
            title: '处置完成率',
          },
        },
        {
          name: '委内疑难案件',
          // value: statisticsData.problemNum,
          value: formatNumber(statisticsData.problemNum)?.num,
          // unit: '件',
          modalConf: {
            type: 'DifficultEvents',
            title: '疑难案件',
            width: 2000,
          },
          unit: formatNumber(statisticsData.problemNum)?.unit,
        },
        {
          name: '委外疑难案件',
          //value: statisticsData.outsideProblemNum,
          value: formatNumber(statisticsData.outsideProblemNum)?.num,
          // unit: '件',
          modalConf: {
            type: 'DifficultEvents',
            title: '疑难案件',
            width: 2000,
          },
          unit: formatNumber(statisticsData.outsideProblemNum)?.unit,
        },
      ],
      bottomCard: [
        {
          name: '市民投诉',
          value: statisticsData.smtsNum,
          //value: formatNumber(statisticsData.smtsNum)?.num,
          modalConf: {
            type: 'CollectionEvent',
            title: '市民投诉事件',
            collectionMode: '0',
          },
          unit: formatNumber(statisticsData.smtsNum)?.unit,
        },
        {
          name: '智能感知',
          value: statisticsData.wlgzNum,
          //value: formatNumber(statisticsData.wlgzNum)?.num,
          unit: formatNumber(statisticsData.wlgzNum)?.unit,
          modalConf: {
            type: 'CollectionEvent',
            title: '智能感知事件',
            collectionMode: '2',
          },
        },
        {
          name: '监督员上报',
          value: statisticsData.rgxcNum,
          //value: formatNumber(statisticsData.rgxcNum)?.num,
          unit: formatNumber(statisticsData.rgxcNum)?.unit,
          modalConf: {
            type: 'CollectionEvent',
            title: '监督员上报事件',
            collectionMode: '1',
          },
        },

        {
          name: '行走成都',
          value: statisticsData.otherNum,
          //value: formatNumber(statisticsData.otherNum)?.num,
          unit: formatNumber(statisticsData.otherNum)?.unit,
          modalConf: {
            type: 'CollectionEvent',
            title: '行走成都事件',
            collectionMode: '4',
          },
        },
      ],
    };
  }, [statisticsData]);

  const getStatisticsData = () => {
    services.CityProblemApi.getCityProblemStatistics().then((res) => {
      if (res.code === 200) {
        setStatisticsData(res.data);
      }
    });
  };

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

  // 点击事件总量时触发数据更新
  const handleGeneralSituationClick = () => {
    dispatch.push('GeneralSituation', {
      title: '事件总体情况',
    });
  };

  return (
    <div className={styles.wrap}>
      <div className={styles.content}>
        <Flex gap={19}>
          {groupCard.topCard.map((item) => (
            <div className={styles.card} key={item.name}>
              <div
                className={styles.numCard}
                onClick={() => {
                  dispatch.push(item.modalConf.type as any, {
                    title: item.name,
                    props: {
                      ...item.modalConf,
                    },
                  });
                }}
              >
                <Space align="end">
                  <Statistic
                    valueStyle={{ fontSize: 36, lineHeight: 1 }}
                    value={item.value}
                    formatter={formatter}
                  />
                  <span className={styles.unit}>{item?.unit}</span>
                </Space>
                <div className={styles.name}>{item.name}</div>
              </div>
              <img src={upIcon} style={{ width: 23, height: 53 }} alt="" />
            </div>
          ))}
        </Flex>

        <div className={styles.center}>
          <Space
            style={{ cursor: 'pointer' }}
            onClick={handleGeneralSituationClick}
          >
            <span className={styles.totalName}>事件总量</span>
            <Space align="end">
              <Statistic
                valueStyle={{ fontSize: 36, lineHeight: 1 }}
                value={statisticsData.total}
                formatter={formatter}
              />
              <span>件</span>
            </Space>
          </Space>
          <Flex justify="space-around" style={{ width: '100%' }}>
            {groupCard.centerStatistic.map((item) => (
              <div
                key={item.name}
                style={{ cursor: 'pointer', textAlign: 'center' }}
                onClick={() => {
                  dispatch.push(item.modalConf.type as any, {
                    title: item.name,
                    props: {
                      ...item.modalConf,
                    },
                  });
                }}
              >
                <Space align="end">
                  <Statistic
                    value={item.value}
                    valueStyle={{
                      fontSize: 30,
                      lineHeight: 1,
                    }}
                    precision={item?.unit == '件' ? 0 : 2}
                  />
                  <span className={styles.unit}>{item.unit}</span>
                </Space>
                <div className={styles.centerName}>{item.name}</div>
              </div>
            ))}
          </Flex>
        </div>

        <div style={{ textAlign: 'center' }}>
          <img src={bottom} style={{ width: 480, height: 76 }} alt="" />
        </div>

        <Flex gap={19}>
          {groupCard.bottomCard.map((item) => (
            <div className={styles.card} key={item.name}>
              <div
                className={styles.numCard}
                style={{ justifyContent: 'center' }}
                onClick={() => {
                  dispatch.push(item.modalConf.type as any, {
                    title: item.name,
                    props: {
                      ...item.modalConf,
                    },
                  });
                }}
              >
                <Space align="end">
                  <Statistic
                    valueStyle={{ fontSize: 36, lineHeight: 1 }}
                    value={item.value}
                    formatter={formatter}
                  />
                  <span>{item?.unit}</span>
                </Space>
                <div className={styles.name}>{item.name}</div>
              </div>
            </div>
          ))}
        </Flex>
      </div>
    </div>
  );
});

export default Problem;
