import bottom from '@/assets/images/urbanSituation/bottom.png';
import upIcon from '@/assets/images/urbanSituation/up.png';
import Modal from '@/components/HncyModal';
import AnalysisCompletionRate from '@/pages/GlobalModalServices/modals/AnalysisCompletionRate';
import CgftEvent from '@/pages/GlobalModalServices/modals/CgftEvent';
import CollectionEvent from '@/pages/GlobalModalServices/modals/CollectionEvent';
import DifficultEvents from '@/pages/GlobalModalServices/modals/DifficultEvents';
import GeneralSituation from '@/pages/GlobalModalServices/modals/GeneralSituation';
import OtherEvent from '@/pages/GlobalModalServices/modals/OtherEvent';
import ToDisposed from '@/pages/GlobalModalServices/modals/ToDisposed';
import UrbanOperation from '@/pages/GlobalModalServices/modals/UrbanOperation';
import services from '@/services';
import type { StatisticProps } from 'antd';
import { Flex, Space, Statistic } from 'antd';
import { ReactNode, useEffect, useMemo, useState } from 'react';
import CountUp from 'react-countup';
import styles from './index.less';

const formatter: StatisticProps['formatter'] = (value) => (
  <CountUp end={value as number} separator="" />
);

/**
 *
 * @description 城市问题
 */

const Problem = () => {
  const [modalOpt, setModalOpt] = useState<{
    open: boolean;
    title: string;
    type: string; // 弹窗类型：todayNum 今日事件数，disposalNum 待处理事件数
    width?: number;
    height?: number;
    singleType?: string;
    isOther?: string;
    collectionMode?: string;
  }>({
    open: false,
    title: '',
    type: '',
  });

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

  // 渲染弹窗内容
  const renderModal: ReactNode = useMemo(() => {
    let comp: any = {
      CgftEvent: <CgftEvent singleType={modalOpt?.singleType as string} />,
      urbanOperation: <UrbanOperation />,
      otherEvent: <OtherEvent isOther={modalOpt?.isOther as string} />,
      collectionEvent: (
        <CollectionEvent collectionMode={modalOpt?.collectionMode as string} />
      ),
      toDisposed: <ToDisposed />,
      completionRate: <AnalysisCompletionRate />,
      difficultEvents: <DifficultEvents />,
      generalSituation: <GeneralSituation />, // 事件汇总
    };
    return comp[modalOpt?.type] || <></>;
  }, [modalOpt]);

  const groupCard = useMemo(() => {
    return {
      topCard: [
        {
          name: '诚管24高速通道',
          value: statisticsData.cityHighNum,
          modalConf: {
            type: 'CgftEvent',
            title: '诚管24高速通道处置情况',
            singleType: '1',
          },
        },
        {
          name: '智慧蓉城提级通道',
          value: statisticsData.moreNum,
          modalConf: {
            type: 'urbanOperation',
            title: '智慧蓉城提级通道处置情况',
            eventType: '5',
          },
        },
        {
          name: '诚管24普通通道',
          value: statisticsData.cityCommonNum,
          modalConf: {
            type: 'CgftEvent',
            title: '诚管24普通通道处置情况',
            singleType: '2',
          },
        },
        {
          name: '行业自闭环通道',
          value: statisticsData.otherSourceNum,
          modalConf: {
            type: 'otherEvent',
            title: '行业自闭环通道处置情况',
            isOther: '1',
          },
        },
      ],
      bottomCard: [
        {
          name: '市民投诉',
          value: statisticsData.smtsNum,
          modalConf: {
            type: 'collectionEvent',
            title: '市民投诉事件',
            collectionMode: '0',
          },
        },
        {
          name: '智能感知',
          value: statisticsData.wlgzNum,
          modalConf: {
            type: 'collectionEvent',
            title: '智能感知事件',
            collectionMode: '2',
          },
        },
        {
          name: '监督员上报',
          value: statisticsData.rgxcNum,
          modalConf: {
            type: 'collectionEvent',
            title: '监督员上报事件',
            collectionMode: '1',
          },
        },
        {
          name: '行走成都',
          value: statisticsData.otherNum,
          modalConf: {
            type: 'collectionEvent',
            title: '行走成都事件',
            collectionMode: '4',
          },
        },
      ],
      centerStatistic: [
        {
          name: '待处置',
          value: statisticsData.disposalNum,
          unit: '件',
          modalConf: {
            type: 'toDisposed',
            title: '待处置事件',
          },
        },
        {
          name: '办结率',
          value: statisticsData.completionRate,
          unit: '%',
          modalConf: {
            type: 'completionRate',
            title: '办结率分析',
            width: 1228,
            height: 846,
          },
        },
        {
          name: '委内疑难案件',
          value: statisticsData.insideProblemNum,
          unit: '件',
          modalConf: {
            type: 'difficultEvents',
            title: '疑难案件',
            width: 2000,
          },
        },
        {
          name: '委外疑难案件',
          value: statisticsData.outsideProblemNum,
          unit: '件',
          modalConf: {
            type: 'difficultEvents',
            title: '疑难案件',
            width: 2000,
          },
        },
      ],
    };
  }, [statisticsData]);

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

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

  return (
    <div className={styles.wrap}>
      <div className={styles.header}>
        <span className={styles.title}>运行态势</span>
      </div>
      <div className={styles.content}>
        <Flex gap={37}>
          {groupCard.topCard.map((item) => (
            <div className={styles.card} key={item.name}>
              <div
                className={styles.numCard}
                onClick={() => setModalOpt({ open: true, ...item.modalConf })}
              >
                <Space>
                  <Statistic value={item.value} formatter={formatter} />
                  <span>件</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={() =>
              setModalOpt({
                open: true,
                type: 'generalSituation',
                title: '事件总体情况',
              })
            }
          >
            <span>事件总量</span>
            <Statistic value={statisticsData.total} formatter={formatter} />
            <span>件</span>
          </Space>
          <Flex justify="space-around">
            {groupCard.centerStatistic.map((item) => (
              <div
                key={item.name}
                style={{ cursor: 'pointer' }}
                onClick={() => {
                  if (item.modalConf.type === 'difficultEvents') return;
                  setModalOpt({ open: true, ...item.modalConf });
                }}
              >
                <Space>
                  <Statistic value={item.value} />
                  <span className={styles.unit}>{item.unit}</span>
                </Space>
                <div>{item.name}</div>
              </div>
            ))}
          </Flex>
        </div>
        <div style={{ textAlign: 'center' }}>
          <img src={bottom} style={{ width: 575, height: 53 }} alt="" />
        </div>
        <Flex gap={37}>
          {groupCard.bottomCard.map((item) => (
            <div className={styles.card} key={item.name}>
              <div
                className={styles.numCard}
                onClick={() => setModalOpt({ open: true, ...item.modalConf })}
              >
                <Space>
                  <Statistic value={item.value} formatter={formatter} />
                  <span>件</span>
                </Space>
                <div className={styles.name}>{item.name}</div>
              </div>
            </div>
          ))}
        </Flex>
      </div>

      <Modal
        open={modalOpt?.open}
        title={modalOpt?.title}
        onCancel={() => setModalOpt({ open: false, title: '', type: '' })}
        width={modalOpt?.width ?? 1772}
        height={modalOpt?.height ?? 846}
      >
        {renderModal}
      </Modal>
    </div>
  );
};

export default Problem;
