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 { useInterval } from 'ahooks';
import { Descriptions, Flex, Spin } from 'antd';
import BaseInfo from '../components/BaseInfo';
import CheckboxGroup, { items } from './CheckboxGroup';
import styles from './index.less';
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,
    loading: dqLoading,
  } = 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>
    );
  };
  const getMap = (data: string) => {
    try {
      return JSON.parse(data);
    } catch (error) {
      console.log(error);

      return {};
    }
  };
  return (
    <div className={styles.container}>
      <div style={{ width: '100%', height: 950 }}>
        <CooglMap.MapView
          zoom={13}
          ref={MapRef}
          center={{ x: 104, y: 30.7 }}
          showCustomComponent={false}
        >
          <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.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={2650}
        height={900}
      >
        {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}
      >
        {dqLoading ? (
          <div
            style={{
              width: '100%',
              height: '100%',
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
            }}
          >
            <Spin></Spin>
          </div>
        ) : (
          <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: any) => {
                  return (
                    <div style={{ marginBottom: 15 }}>
                      <div style={{ marginBottom: 10, fontSize: 20 }}>
                        {item?.projectName}
                      </div>
                      <div className={styles.pw}>
                        {item?.reportObjectList?.map((i: any) => {
                          return (
                            <div className={styles.item}>
                              <div style={{ color: 'rgb(202, 223, 252)' }}>
                                {i?.reportObject}
                                <span
                                  className={styles.tag}
                                  style={{
                                    color:
                                      i.normalFlag === '0' ? '#47ffa0' : 'red',
                                  }}
                                >
                                  {i.normalFlag === '0' ? '正常' : '异常'}
                                </span>
                              </div>
                              <div style={{ marginTop: 3 }}>
                                {Object.entries(
                                  getMap(i?.monitoringValue),
                                )?.map((it: any) => {
                                  return (
                                    <div>
                                      {it[0]}:{it[1]}
                                    </div>
                                  );
                                })}
                              </div>
                            </div>
                          );
                        })}
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
          </div>
        )}
      </Modal>
    </div>
  );
};

export default SafetyMap;
