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


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: 'otherEvent',
            title: '其它渠道上报事件',
            isOther: '2'
          },
        }
      ],
      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