import CooglMap from '@/components/CooglMap';
import { useGlobalModalServices } from '@/pages/GlobalModalServices/provider';
import services from '@/services';
import { useRequest } from 'ahooks';
import { memo, useEffect, useState } from 'react';
import { colorConfig } from '../DistrictMap';
import PopoverCardKnotty from '../DistrictMap/PopoverCardKnotty';
import PopoverCardWarn from '../DistrictMap/PopoverCardWarn';
import styles from './index.less';
const RiskIssue = ({
  checkedKeys,
  setDetailModalOpt,
}: // setModalOpt,
{
  checkedKeys: any[];
  // setModalOpt: (val: any) => void;
  setDetailModalOpt: (val: any) => void;
}) => {
  const { dispatch } = useGlobalModalServices();

  const [eventData, setEventData] = useState<any[]>([]);
  //风险
  const [fxSelectd, setFxSelectd] = useState<any>();
  //问题
  const [kontSelectd, setKontSelectd] = useState<any>();

  //预警点位
  const { data: earlyData } = useRequest(() =>
    services.DataBase.getSjdzInfoData({
      typeCode: 'zzcc-aq-yjxx',
      params: {
        pageNo: 1,
        pageSize: 10,
      },
    }),
  );

  useEffect(() => {
    //最新事件
    services.CityProblemApi.getUpToDateEventOther({
      page: 1,
      count: 10,
      // protrudeFlag: '1',
    }).then((res: any) => {
      console.log('getUpToDateEvent', res);
      if (res.code === 200) {
        setEventData(res.data?.items);
      }
    });
  }, []);

  return (
    <>
      {earlyData?.data?.data?.records
        ?.filter((item: any) => checkedKeys?.includes(item?.risklevel))
        ?.map((item: any, index: number) => {
          const point = [Number(item?.longitude), Number(item?.latitude)];

          return (
            <CooglMap.CustomOverlay
              key={index}
              position={point}
              onSet={async () => {
                try {
                  console.log(item);

                  setFxSelectd(item);
                } catch (error) {
                  console.log(error);
                }
              }}
            >
              <img
                data-event-key="set"
                src={colorConfig[item?.risklevel]?.icon}
                alt=""
                style={{ width: 46, height: 46, zIndex: 999 }}
              />
            </CooglMap.CustomOverlay>
          );
        })}
      {eventData
        ?.filter((item) =>
          checkedKeys?.includes(
            item?.protrudeFlag == '2' ? '突出问题' : '其他问题',
          ),
        )
        ?.map((item, index) => {
          const point = [Number(item?.lon), Number(item?.lat)];
          return (
            <CooglMap.CustomOverlay
              key={index}
              position={point}
              onWtDet={() => {
                setKontSelectd(item);
              }}
            >
              <img
                data-event-key="wtDet"
                src={
                  item?.protrudeFlag == '2'
                    ? require('@/assets/images/tuchuIc.png')
                    : require('@/assets/images/wtIc.png')
                }
                alt=""
                style={{ width: 46, height: 46, zIndex: 999 }}
              />
            </CooglMap.CustomOverlay>
          );
        })}
      {/**预警popover */}
      {fxSelectd && (
        <CooglMap.CustomOverlay
          position={[Number(fxSelectd?.longitude), Number(fxSelectd?.latitude)]}
          offset={{
            top: -50,
          }}
          onDetail={(e) => {
            setDetailModalOpt({
              open: true,
              eventId: fxSelectd?.riskId,
              ...fxSelectd,
            });
          }}
          onClose={(e) => {
            setFxSelectd(undefined);
          }}
        >
          <div className={styles.window}>
            <PopoverCardWarn data={fxSelectd}></PopoverCardWarn>
          </div>
        </CooglMap.CustomOverlay>
      )}
      {/**问题popover */}
      {kontSelectd && (
        <CooglMap.CustomOverlay
          position={[Number(kontSelectd?.lon), Number(kontSelectd?.lat)]}
          offset={{
            top: -50,
          }}
          onDetail={(e) => {
            dispatch.push('EventDetail', {
              title: '事件详情',
              w: 'fit-content',
              props: {
                eventId: kontSelectd?.eventId,
              },
            });
          }}
          onClose={(e) => {
            setKontSelectd(undefined);
          }}
        >
          <div className={styles.window}>
            <PopoverCardKnotty data={kontSelectd}></PopoverCardKnotty>
          </div>
        </CooglMap.CustomOverlay>
      )}
    </>
  );
};
export default memo(RiskIssue);
