import { CSSProperties, Fragment, 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 services from '@/services';
import { useRequest } from '@umijs/max';
import { Flex } from 'antd';

import styles from './index.less';
const DetMap = () => {
  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: '道路桥梁情况',
  });
  // const { data: mapMark } = useRequest(
  //   () => services.CityRiskApi.findListForMap(searchParams),
  //   {
  //     refreshDeps: [searchParams],
  //   },
  // );
  // //safetyRiskEventMap
  // const { data: warnMark } = useRequest(
  //   () => services.CityRiskApi.safetyRiskEventMap(searchParams),
  //   {
  //     refreshDeps: [searchParams],
  //   },
  // );

 
  return (
    <div className={styles.container}>
      <div style={{ width: '100%', height: 800 }}>
        <CooglMap.MapView
          zoom={13}
          ref={MapRef}
          // center={{ x: 104.066349, y: 30.658842 }}
          center={{ x: 104, y: 30.55 }}
          showCustomComponent={false}
        >
          {/* <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;
