import upIcon from '@/assets/images/urbanSituation/up.png';
import Modal from '@/components/HncyModal';
import CgftEvent from '@/pages/GlobalModalServices/modals/CgftEvent';
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 classNames from 'classnames';
import { useEffect, useMemo, useState } from 'react';
import CountUp from 'react-countup';
import PeopleComplaintPage from '../PeopleComplaint';
import styles from './index.less';

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

const ProblemNew = () => {
  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 [activeKey, setActiveKey] = useState('');

  // 渲染弹窗内容
  const renderModal = useMemo(() => {
    const 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 />,
      PeopleComplaintPage: <PeopleComplaintPage />,
    };
    return comp[modalOpt?.type] || <></>;
  }, [modalOpt]);

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

  const groupCard = useMemo(() => {
    return {
      leftCard: [
        {
          name: '市城运平台',
          value: statisticsData.moreNum,
          modalConf: {
            type: 'urbanOperation',
            title: '市城运平台推送事件',
            eventType: '5',
          },
        },
        {
          name: '12345市民投诉',
          value: 0,
          modalConf: {
            type: 'PeopleComplaintPage',
            title: '12345市民投诉',
            isOther: '1',
            width: 1210,
            height: 758,
          },
        },
        {
          name: '诚管24高速通道',
          value: statisticsData.cityHighNum,
          modalConf: {
            type: 'CgftEvent',
            title: '诚管24高速通道处置事件',
            singleType: '1',
          },
        },
        {
          name: '数字城管',
          value: statisticsData.cityCommonNum,
          modalConf: {
            type: 'CgftEvent',
            title: '数字城管事件',
            singleType: '2',
          },
        },
        {
          name: '行业自闭环',
          value: statisticsData.otherSourceNum,
          modalConf: {
            type: 'otherEvent',
            title: '行业自闭环事件',
            isOther: '1',
          },
        },
      ],
      centerStatistic: [
        {
          name: '处置中',
          value: statisticsData.disposalNum,
          // value: statisticsData.toDisposedNum,
          unit: '件',
          modalConf: {
            type: 'toDisposed',
            title: '处置中事件',
          },
        },
        {
          name: '已办结',
          value: 0,
          unit: '件',
          modalConf: {
            type: 'completionRate',
            title: '已办结事件',
          },
        },
        {
          name: '委内疑难案件',
          value: statisticsData.problemNum,
          unit: '件',
          modalConf: {
            type: 'difficultEvents',
            title: '疑难案件',
            width: 2000,
          },
        },
        {
          name: '委外疑难案件',
          value: statisticsData.outsideProblemNum,
          unit: '件',
          modalConf: {
            type: 'difficultEvents',
            title: '疑难案件',
            width: 2000,
          },
        },
      ],
      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',
          },
        },
      ],
    };
  }, [statisticsData]);

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

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

  return (
    <div className={styles.wrap}>
      <Flex gap={34}>
        <Flex gap={15} vertical>
          {groupCard.leftCard.map((item) => (
            <Flex className={styles.card} key={item.name} align="center">
              <Flex
                vertical
                justify="center"
                className={classNames(styles.numCard, {
                  [styles.activeCard]: item.name === activeKey,
                })}
                onClick={() => {
                  setActiveKey(item.name);
                  setModalOpt({ open: true, ...item.modalConf });
                }}
              >
                <Space align="end">
                  <Statistic
                    valueStyle={{ fontSize: 30, lineHeight: 1 }}
                    value={item.value}
                    formatter={formatter}
                  />
                  <span className={styles.unit}>件</span>
                </Space>
                <div className={styles.name}>{item.name}</div>
              </Flex>
              <img src={upIcon} className={styles.upIcon} alt="" />
            </Flex>
          ))}
        </Flex>
        <Flex className={styles.centerWrap} vertical gap={40} align="center">
          <Space
            direction="vertical"
            style={{ cursor: 'pointer' }}
            onClick={() =>
              setModalOpt({
                open: true,
                type: 'generalSituation',
                title: '事件总体情况',
              })
            }
          >
            <Space>
              <Statistic
                value={statisticsData.total}
                valueStyle={{ fontSize: 36, lineHeight: 1 }}
                formatter={formatter}
              />
              <span className={styles.unit}>件</span>
            </Space>
            <span style={{ fontSize: 24, fontWeight: 700, color: '#fff' }}>
              事件总量
            </span>
          </Space>
          {groupCard.centerStatistic.map((item) => (
            <div
              key={item.name}
              style={{ cursor: 'pointer', textAlign: 'center' }}
              onClick={() => {
                if (item.modalConf.type === 'difficultEvents') return;
                setModalOpt({ open: true, ...item.modalConf });
              }}
            >
              <Space align="end">
                <Statistic
                  value={item.value}
                  valueStyle={{
                    fontSize: 30,
                    lineHeight: 1,
                  }}
                />
                <span className={styles.unit}>{item.unit}</span>
              </Space>
              <div className={styles.centerName}>{item.name}</div>
            </div>
          ))}
        </Flex>
      </Flex>

      <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 ProblemNew;
