import CooglMap from '@/components/CooglMap';
import { CloseCircleOutlined } from '@ant-design/icons';
import { ConfigProvider, Descriptions, Image } from 'antd';
import React, { useState } from 'react';
import styles from './index.less';

import Modal from '@/components/HncyModal';
import EventDetail from '@/pages/Common/Event/EventDetail';

interface PropsType {
  data: any;

  onClose?: () => void;
}

const InfoWindow: React.FC<PropsType> = (props) => {
  const { data, onClose } = props;

  // 事件详情弹窗
  const [detailModalOpt, setDetailModalOpt] = useState<{
    open: boolean;
    title: string;
    eventId: string;
  }>({
    open: false,
    title: '',
    eventId: ''
  })

  const labelStyle = {
    color: 'rgb(203, 237, 255)',
    fontSize: 16,
  };
  const renderContent = () => {
    switch (data.type) {
      case 1:
        return (
          <div className={styles.type1Content}>
            <Image
              className={styles.qImg}
              width="100%"
              src={require('@/assets/images/keyArea/img.png')}
            ></Image>
            <div className={styles.overTime}>已超期 105 天</div>
            <Descriptions
              style={{ marginTop: 16 }}
              column={1}
              labelStyle={labelStyle}
              contentStyle={{
                color: '#fff',
                fontSize: 16,
              }}
            >
              <Descriptions.Item label="上报时间">
                2024-05-28 10:20:20
              </Descriptions.Item>
              <Descriptions.Item label="发生位置">
                锦江区牛市口街道办事...
              </Descriptions.Item>
            </Descriptions>
            <div className={styles.btnGroup}>
              <div className={styles.btn}>查看详情</div>
            </div>
          </div>
        );
      case 2:
        return (
          <div className={styles.type1Content}>
            <Image
              className={styles.qImg}
              width="100%"
              src={require('@/assets/images/keyArea/img.png')}
            ></Image>
            <div className={styles.toBeProcessed}>{data?.caseStatusName}</div>
            <Descriptions
              style={{ marginTop: 16 }}
              column={1}
              labelStyle={labelStyle}
              contentStyle={{
                color: '#fff',
                fontSize: 16,
              }}
            >
              <Descriptions.Item label="上报时间">
                {data?.reportTime}
              </Descriptions.Item>
              <Descriptions.Item label="发生位置">
                {data?.address}
              </Descriptions.Item>
            </Descriptions>
            <div className={styles.btnGroup}>
              <div className={styles.btn} 
               onClick={() => {
                // setDetailModalOpt({ open: true, title: '事件详情', eventId: data.eventId })
              }}>查看详情</div>
            </div>
          </div>
        );
      case 3:
        return (
          <div className={styles.type3Content}>
            <div className={styles.avatarWrapper}>
              <Image
                className={styles.avatar}
                width={90}
                height={90}
                src={require('@/assets/images/keyArea/avatar.png')}
              ></Image>
              <Descriptions
                column={1}
                title={'市级监督员 - 张明明'}
                labelStyle={labelStyle}
                contentStyle={{
                  color: '#fff',
                  fontSize: 16,
                  textOverflow: 'ellipsis',
                  whiteSpace: 'nowrap',
                  overflow: 'hidden',
                }}
              >
                <Descriptions.Item label="工卡号">
                  XDSDWE15266
                </Descriptions.Item>
                <Descriptions.Item label="联系电话">
                  15887465232
                </Descriptions.Item>
              </Descriptions>
            </div>
            <Descriptions
              column={1}
              labelStyle={labelStyle}
              contentStyle={{
                color: '#fff',
                fontSize: 16,
              }}
            >
              <Descriptions.Item label="责任网格">
                迪庆街道、崇阳街道、迪庆街道、崇阳街道、迪庆街道、崇阳街道、迪庆街道、崇阳街道、
              </Descriptions.Item>
            </Descriptions>
            <div className={styles.btnGroup}>
              <div className={styles.btn}>查看详情</div>
            </div>
          </div>
        );
      case 4:
        return (
          <div className={styles.type4Content}>
            <Image
              className={styles.qImg}
              width="100%"
              src={require('@/assets/images/keyArea/img.png')}
            ></Image>

            <div className={styles.btnGroup}>
              <div className={styles.btn}>查看详情</div>
            </div>
          </div>
        );
      case 5:
        return (
          <div className={styles.type5Content}>
            <Descriptions
              style={{ marginTop: 16 }}
              column={2}
              labelStyle={labelStyle}
              contentStyle={{
                color: '#fff',
                fontSize: 16,
              }}
            >
              <Descriptions.Item label="设备ID">SDFSDFS156</Descriptions.Item>
              <Descriptions.Item label="设备类型">AI固定视频</Descriptions.Item>
              <Descriptions.Item label="感知场景" span={2}>
                垃圾分类
              </Descriptions.Item>
              <Descriptions.Item label="所在位置" span={2}>
                XXXXXXXXXXXXXXXXXXXXXX
              </Descriptions.Item>
            </Descriptions>
            <div className={styles.todayQNum}>
              今日识别问题<span>1208</span>件
            </div>
            <div className={styles.btnGroup}>
              <div className={styles.btn}>运行视频</div>
              <div className={styles.btn}>发现问题</div>
            </div>
          </div>
        );
      case 6:
        return (
          <div className={styles.type6Content}>
            <Descriptions
              style={{ marginTop: 16 }}
              column={2}
              labelStyle={labelStyle}
              contentStyle={{
                color: '#fff',
                fontSize: 16,
              }}
            >
              <Descriptions.Item label="设备ID">SDFSDFS156</Descriptions.Item>
              <Descriptions.Item label="设备状态">
                <span style={{ color: 'green' }}>在线</span>
              </Descriptions.Item>
              <Descriptions.Item label="设备类型">AI车载</Descriptions.Item>
              <Descriptions.Item label="车辆类型">公交车</Descriptions.Item>
            </Descriptions>
            <div className={styles.todayQNum}>
              今日识别问题<span>1208</span>件
            </div>
            <div className={styles.btnGroup}>
              <div className={styles.btn}>运行轨迹</div>

              <div className={styles.btn}>运行视频</div>
              <div className={styles.btn}>识别问题</div>
              <div className={styles.btn}>运行详情</div>
            </div>
          </div>
        );
      case 7:
        return (
          <div className={styles.type1Content}>
            <Image
              className={styles.qImg}
              width="100%"
              src={require('@/assets/images/keyArea/img.png')}
            ></Image>
            <div className={styles.toBeProcessed}>待派遣</div>
            <Descriptions
              style={{ marginTop: 16 }}
              column={1}
              labelStyle={labelStyle}
              contentStyle={{
                color: '#fff',
                fontSize: 16,
              }}
            >
              <Descriptions.Item label="预警时间：">
                2024-05-28 10:20:20
              </Descriptions.Item>
              <Descriptions.Item label="预警地点：">
                锦江区牛市口街道办事...
              </Descriptions.Item>
            </Descriptions>
            <div className={styles.btnGroup}>
              <div className={styles.btn}>查看详情</div>
            </div>
          </div>
        );
      default:
        return <div>无内容</div>;
    }
  };

  return (
    <>
      <CooglMap.CustomOverlay
        position={[data?.lon, data?.lat]}
        offset={{
          top: -50,
        }}
        onClose={onClose!}
      >
        <div className={styles.window}>
          <div className={styles.header}>
            {data?.standardEventTitle}
            <div data-event-key="close">
              <CloseCircleOutlined />
            </div>
          </div>
          <ConfigProvider
            theme={{
              components: {
                Descriptions: {
                  itemPaddingBottom: 4,
                  titleColor: '#fff',
                  titleMarginBottom: 10,
                },
              },
            }}
          >
            <div className={styles.content}>{renderContent()}</div>
          </ConfigProvider>
        </div>
      </CooglMap.CustomOverlay>
      <Modal
        open={detailModalOpt?.open}
        title={detailModalOpt?.title}
        onCancel={() => setDetailModalOpt({ open: false, title: '', eventId: '' })}
        width={1160}
        height={950}
      >
        <EventDetail eventId={detailModalOpt?.eventId} />
      </Modal>
    </>
  );
};

export default InfoWindow;
