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 Modal from '@/components/HncyModal';
import services from '@/services';
import { useRequest } from '@umijs/max';
import { Descriptions, Flex } from 'antd';
import BaseInfo from '../components/BaseInfo';
import CheckboxGroup, { items } from './CheckboxGroup';
import styles from './index.less';
import { useInterval } from 'ahooks';
const SafetyMap = () => {
  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 [isBmap, setIsBmap] = useState(false);
  const MapRef = useRef<any>();
  const [count, setCount] = useState(0);

  useInterval(() => {
    setCount(count + 1);
  }, 1000);
  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],
    },
  );

  const { data, run } = useRequest(
    services.CityRiskApi.safetyMonitoringObjectInfo,
    {
      manual: true,
    },
  );
  /** 标题渲染 */
  const titleRender = () => {
    return (
      <Flex align="center" className={styles.modalTitle}>
        <div className={styles.title}>{detailModalOpt?.eventType}</div>
        <span
          className={styles.tag}
          style={{
            backgroundImage: `url(${
              colorConfig[detailModalOpt?.riskLevelName]?.bg
            })`,
            color: colorConfig[detailModalOpt?.riskLevelName]?.color,
          }}
        >
          {detailModalOpt?.riskLevelName}
        </span>
        <span className={styles.type}>{detailModalOpt?.position}</span>
      </Flex>
    );
  };
  return (
    <div className={styles.container}>
      {isBmap ? (
        <></>
          // <BMapView
        //   zoom={13}
        //   ref={MapRef}
        //   style={{ width: '100%', height: '110%' }}
        //   center={new BMapGL.Point(104.066349, 30.658842)}
        // >
        //   <Fragment>
        //     {warnMark?.items?.map((item: any, index: number) => {
        //       const point = [Number(item?.x_pos), Number(item?.y_pos)];
        //       if (index === 0) {
        //         return (
        //           <CustomOverlay position={point}>
        //             <div
        //               className={styles.newWarn}
        //               onClick={() => {
        //                 setDetailModalOpt({
        //                   open: true,
        //                   eventId: item?.riskId,
        //                   ...item,
        //                 });
        //               }}
        //             >
        //               <img
        //                 src={require(`@/assets/images/SecurityServiceOverview/right/${
        //                   colorConfig[item?.riskLevel]?.icon
        //                 }.png`)}
        //                 alt=""
        //                 style={{ width: 111, height: 111 }}
        //               />
        //             </div>
        //           </CustomOverlay>
        //         );
        //       }
        //       return (
        //         <CustomOverlay position={point}>
        //           <img
        //             src={require(`@/assets/images/SecurityServiceOverview/right/${
        //               colorConfig[item?.riskLevel]?.icon
        //             }.png`)}
        //             alt=""
        //             style={{ width: 92, height: 92 }}
        //             onClick={() => {
        //               setDetailModalOpt({
        //                 open: true,
        //                 eventId: item?.riskId,
        //                 ...item,
        //               });
        //             }}
        //           />
        //         </CustomOverlay>
        //       );
        //     })}
        //     {mapMark?.items?.map((item: any, index: number) => {
        //       const point = [Number(item?.x_pos), Number(item?.y_pos)];

        //       return (
        //         <CustomOverlay position={point}>
        //           <img
        //             src={
        //               items?.find(
        //                 (it) => it.typeCode === searchParams.parentTypeCode,
        //               )?.icon
        //             }
        //             alt=""
        //             style={{ width: 52, height: 52 }}
        //             onClick={() => {
        //               setWayModalOpt({
        //                 open: true,
        //                 title: item?.parentData?.typeName,
        //                 parentCode: item?.parentTypeCode,
        //                 typeCode: item?.parentTypeCode,
        //                 ...item,
        //               });
        //               run({ id: item?.id });
        //             }}
        //           />
        //         </CustomOverlay>
        //       );
        //     })}
        //   </Fragment>
        // </BMapView>
      ) : (
      
        <div style={{ width: '150%', height: 1430 }}>
          <CooglMap.MapView
            zoom={13}
            ref={MapRef}
            center={{ x: 104.066349, y: 30.658842 }}
          
          >
            <Fragment>
              {mapMark?.items?.map((item: any, index: number) => {
                const point = [Number(item?.x_pos), Number(item?.y_pos)];

                return (
                  <CooglMap.CustomOverlay
                    key={index}
                    position={point}
                    onSet1={() => {
                      try {
                        setWayModalOpt({
                          open: true,
                          title: item?.parentData?.typeName,
                          parentCode: item?.parentTypeCode,
                          typeCode: item?.parentTypeCode,
                          ...item,
                        });
                        run({ id: item?.id });
                      } catch (error) {
                        console.log(error);
                        
                      }
                   
                    }}
                  >
                    <img
                      data-event-key="set1"
                      src={
                        items?.find(
                          (it) => it.typeCode === searchParams.parentTypeCode,
                        )?.icon
                      }
                      alt=""
                      style={{ width: 52, height: 52, zIndex: 999 }}
                    />
                  </CooglMap.CustomOverlay>
                );
              })}
              {warnMark?.items?.map((item: any, index: number) => {
                const point = [Number(item?.x_pos), Number(item?.y_pos)];
                if (index === 0&&count<10) {
                  return (
                    <CooglMap.CustomOverlay
                      position={point}
                      onSet={() => {
                        setDetailModalOpt({
                          open: true,
                          eventId: item?.riskId,
                          ...item,
                        });
                      }}
                    >
                      <div className={styles.newWarn} data-event-key="set">
                        <img
                          src={require(`@/assets/images/SecurityServiceOverview/right/${
                            colorConfig[item?.riskLevel]?.icon
                          }.png`)}
                          alt=""
                          style={{ width: 91, height: 91, zIndex: 999 }}
                        />
                      </div>
                    </CooglMap.CustomOverlay>
                  );
                }
                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 className={styles.cutMap}>
        {/* <Space>
          <Switch onChange={() => setIsBmap(!isBmap)}></Switch>
          <div>启用百度地图</div>
        </Space> */}
      </div>
      <div className={styles.checkBox}>
        <CheckboxGroup
          onCheck={(e) => {
            setSearchParams({ ...searchParams, parentTypeCode: e });
          }}
          checkCode={searchParams.parentTypeCode}
        />
      </div>
      {/* 事件详情 */}
      <Modal
        open={detailModalOpt?.open}
        titleRender={titleRender}
        onCancel={() => {
          setDetailModalOpt({
            open: false,
            title: '事件详情',
            eventId: '',
          });
        }}
        width={1144}
        height={740}
      >
        {detailModalOpt?.open && (
          <BaseInfo
            eventId={detailModalOpt?.eventId}
            detail={detailModalOpt}
            onChangeOpt={(val) => {
              console.log(val);

              setDetailModalOpt({
                ...detailModalOpt,
                position: val?.position,
                eventType: val?.event_type,
                riskLevelName: val?.risklevel,
              });
            }}
          />
        )}
      </Modal>
      {/**道路桥梁情况 */}
      <Modal
        open={wayModalOpt?.open}
        title={data?.monitoring_object_name}
        onCancel={() => setWayModalOpt({ open: false, title: '' })}
        width={650}
        height={846}
      >
        <div className={styles.detCon}>
          <div className={styles.detTitleWarp}>
            <img src={data?.photos} alt="" className={styles.img} />
            <div>
              {data?.monitoring_object_name}
              <div className={styles.tag}>
                {data?.monitoring_object_type_name}
              </div>
            </div>
          </div>
          <Descriptions column={1}>
            <Descriptions.Item label="所属区域">{data?.area}</Descriptions.Item>
            <Descriptions.Item label="设施位置">
              {data?.position}
            </Descriptions.Item>
            <Descriptions.Item label="责任单位">
              {data?.accountability_unit}
            </Descriptions.Item>
          </Descriptions>
          <div className={styles.content}>
            <div>{data?.status}</div>
            <div className={styles.warp}>
              {data?.projectList?.map((item) => {
                return (
                  <div>
                    <div>{item?.projectName}</div>
                    <div className={styles.pw}>
                      {item?.reportObjectList?.map((i) => {
                        return <div>{i?.reportObject}</div>;
                      })}
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </Modal>
    </div>
  );
};

export default SafetyMap;
