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

interface PropsType {
  data: any;

  onClose?: () => void;
}

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

  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}>待派遣</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 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.l}
      offset={{
        top: -50,
      }}
      onClose={onClose!}
    >
      <div className={styles.window}>
        <div className={styles.header}>
          道路交通设施
          <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>
  );
};

export default InfoWindow;
