import { CSSProperties, useRef, useState } from 'react';
// import { CustomOverlay, Polygon } from 'react-bmapgl';
import blueBg from '@/assets/images/SecurityServiceOverview/right/blueBg.png';
import orangeBg from '@/assets/images/SecurityServiceOverview/right/orangeBg.png';
import redBg from '@/assets/images/SecurityServiceOverview/right/redBg.png';
import yellowBg from '@/assets/images/SecurityServiceOverview/right/yellowBg.png';
import CooglMap from '@/components/CooglMap';

import styles from './index.less';
const DetMap = ({ data }: { data: any }) => {
  const colorConfig: Record<
    string,
    {
      color: CSSProperties['color'];
      bg: string;
      icon: string;
    }
  > = {
    红色风险: {
      //红色风险
      color: '#FFBCBC',
      bg: redBg,
      icon: 'redIcon',
    },
    橙色风险: {
      //橙色风险
      color: '#FDDFCE',
      bg: orangeBg,
      icon: 'orangeIcon',
    },
    黄色风险: {
      //黄色风险
      color: '#FFE892',
      bg: yellowBg,
      icon: 'yellowIcon',
    },
    一般风险: {
      //一般风险
      color: '#BFE4FF',
      bg: blueBg,
      icon: 'blueIcon',
    },
  };

  const MapRef = useRef<any>();

  const [searchParams, setSearchParams] = useState({
    parentTypeCode: 'dlql',
    lat: 30.680193,
    lon: 104.075555,
    distance: 1000,
    page: 1,
    count: 100,
  });
  // 事件详情弹窗
  const [detailModalOpt, setDetailModalOpt] = useState<any>({
    open: false,
    title: '',
    eventId: '',
  });
  const [wayModalOpt, setWayModalOpt] = useState<{
    open: boolean;
    title: string;
  }>({
    open: false,
    title: '道路桥梁情况',
  });

  return (
    <div className={styles.container}>
      <div
        style={{
          width: '100%',
          height: 760,
          borderRadius: 20,
          overflow: 'hidden',
        }}
      >
        <CooglMap.MapView
          zoom={13}
          ref={MapRef}
          center={{ x: 104, y: 30.75 }}
          showCustomComponent={false}
        >
          <>
            <CooglMap.CustomOverlay
              position={[Number(data?.longitude), Number(data?.latitude)]}
              onSet={() => {
                // setDetailModalOpt({
                //   open: true,
                //   eventId: item?.riskId,
                //   ...item,
                // });
              }}
            >
              <img
                data-event-key="set"
                src={require('@/assets/images/SecurityServiceOverview/mapGroup/icon1.png')}
                alt=""
                style={{ width: 52, height: 52, zIndex: 999 }}
              />
            </CooglMap.CustomOverlay>
          </>
          {/* <Fragment>
            {warnMark?.items?.map((item: any, index: number) => {
              const point = [Number(item?.x_pos), Number(item?.y_pos)];

              return (
                <CooglMap.CustomOverlay
                  key={index}
                  position={point}
                  onSet={() => {
                    setDetailModalOpt({
                      open: true,
                      eventId: item?.riskId,
                      ...item,
                    });
                  }}
                >
                  <img
                    data-event-key="set"
                    src={require(`@/assets/images/SecurityServiceOverview/right/${
                      colorConfig[item?.riskLevel]?.icon
                    }.png`)}
                    alt=""
                    style={{ width: 52, height: 52, zIndex: 999 }}
                  />
                </CooglMap.CustomOverlay>
              );
            })}
          </Fragment> */}
        </CooglMap.MapView>
      </div>
    </div>
  );
};

export default DetMap;
