// import BMapView from '@/components/BMapView';
import CooglMap from '@/components/CooglMap';
import { useGlobalModalServices } from '@/pages/GlobalModalServices/provider';
import services from '@/services';
import { cqiDisplay, getColorByIndex, getCqiStatusStyle } from '@/utils/ui';
import { DownCircleFilled, UpCircleFilled } from '@ant-design/icons';
import { Flex, Space } from 'antd';
import React, { CSSProperties, useEffect, useRef, useState } from 'react';
import styles from './index.less';

const Map: React.FC = () => {
  const [expand, setExpand] = useState<number>();
  const ref = useRef(0);
  const { dispatch } = useGlobalModalServices();
  /** 是否启用百度地图 */
  const [isBmap, setIsBmap] = useState(false);
  const MapRef = useRef<any>();

  const [areaList, setAreaList] = useState<any>([]);
  const [allAreaMapData, setAllAreaMapData] = useState<any>([]);

  const [selectedArea,setSelectedArea] = useState<any>({});

  const p1 = [103.74243115816007, 30.79721665183887];

  const p2 = [104.48437948789275, 30.807638945537175];

  /**
   * @description 设置地图视野
   */
  const setViewport = () => {
    // const map = MapRef.current?.map as BMapGL.Map;
    // if (map) {
    //   map.setViewport([p1, p2]);
    // }
  };

  /** @description 移动视角到能显示全部覆盖物 */
  // useEffect(() => {
  //   setViewport();
  // }, [MapRef.current]);

  // 重点区域列表
  const getImportantAreaList = async () => {
    const params = {
      physicalSignType: 1,
      objectHierarchy: 19,
    };
    const res = await services.Physicalsign.getGroupObjectPhysicalSignIndex(
      params,
    );
    console.log(res);
    if (res.code === 200) {
      setAreaList(res.data);
    }
  };

  const getObjectPolygon = async () => {
    const params = {
      physicalSignType: 1,
      objectHierarchy: 19,
    };
    const res = await services.Physicalsign.getObjectPolygon(params);
    if (res.code === 200) {
      if (res.data?.length) {
        console.log(res.data);
        setAllAreaMapData(res.data);
      }
    }
  };

  useEffect(() => {
    getObjectPolygon();
    getImportantAreaList();
  }, []);

  return (
    <div className={styles.container}>
      {/* {isBmap ? (
        <BMapView
          zoom={13}
          ref={MapRef}
          style={{ width: '100%', height: '110%' }}
          center={new BMapGL.Point(104.066349, 30.658842)}
          onClick={(e) => console.log(e)}
        >
          <CustomOverlay position={BMapService.buildPoint(p1[0], p1[1])}>
            <div
              className={styles.indexMarker}
              onClick={(e) => {
                e.stopPropagation();

                dispatch.push('KeyAreaDetail', {
                  title: '市委市政府',
                });
              }}
            >
              <div className={styles.markerContent}>
                市委市政府<span style={{ color: getColorByIndex(89) }}>89</span>
              </div>
              <div
                className={styles.markerIcon}
                style={{ borderColor: getColorByIndex(89) }}
              ></div>
            </div>
          </CustomOverlay>
          <CustomOverlay position={BMapService.buildPoint(p2[0], p2[1])}>
            <div className={styles.indexMarker}>
              <div className={styles.markerContent}>
                市城管委
                <span style={{ color: getColorByIndex(98.5) }}>98.5</span>
              </div>
              <div
                className={styles.markerIcon}
                style={{ borderColor: getColorByIndex(98.5) }}
              ></div>
            </div>
          </CustomOverlay>
        </BMapView>
      ) : ( */}
      <CooglMap.MapView
        zoom={13}
        ref={MapRef}
        center={{ x: 104.066349, y: 30.658842 }}
      >
        {/* <CooglMap.CustomOverlay
          position={p1}
          onClick={() => {
            dispatch.push('KeyAreaDetail', {
              title: '市委市政府',
            });
          }}
          onSet={() => {
            console.log('hello world');
          }}
        >
          <div
            className={styles.indexMarker}
            style={
              {
                '--b-color': getColorByIndex(89),
              } as CSSProperties
            }
          >
            <div className={styles.markerContent} data-event-key="set">
              市委市政府<span>89</span>
            </div>
            <div className={styles.markerIcon}></div>
          </div>
        </CooglMap.CustomOverlay>
        <CooglMap.CustomOverlay position={p2}>
          <div className={styles.indexMarker}>
            <div className={styles.markerContent}>
              市城管委
              <span style={{ color: getColorByIndex(98.5) }}>98.5</span>
            </div>
            <div
              className={styles.markerIcon}
              style={{ borderColor: getColorByIndex(98.5) }}
            ></div>
          </div>
        </CooglMap.CustomOverlay> */}
        {allAreaMapData?.map((item: any) => (
          <CooglMap.CustomOverlay
            position={[item?.centerX, item?.centerY]}
            onClick={() => {
              dispatch.push('KeyAreaDetail', {
                title: item.objectName,
                props: {
                  objectId: item?.objectId,
                  cqi: item?.qualitySign,
                },
              });
            }}
            key={item.objectId}
          >
            <div className={styles.indexMarker}>
              <div className={styles.markerContent}>
                {item?.objectName}
                <span
                  style={{ color: getColorByIndex(item?.qualitySign) }}
                >
                  {cqiDisplay(item?.qualitySign)}
                </span>
              </div>
              <div
                className={styles.markerIcon}
                style={{
                  borderColor: getColorByIndex(item?.qualitySign),
                }}
              ></div>
            </div>
          </CooglMap.CustomOverlay>
        ))}
      </CooglMap.MapView>
      {/* )} */}

      <div className={styles.leftList}>
        <div className={styles.listTitle}>重点区域列表</div>
        <div>
          {areaList?.map((item:any, index:any) => {
            return (
              <div key={index}>
                <Flex
                  className={styles.listItem}
                  align="center"
                  justify="space-between"
                  onClick={() => {
                    if (expand === index) {
                      setExpand(undefined);
                      return;
                    }
                    ref.current = index;

                    setExpand(index);
                  }}
                >
                  <div>{item?.objGroup}</div>
                  <Space>
                    <div>{item?.objects?.length}</div>
                    <div>个</div>
                    {index === expand ? (
                      <UpCircleFilled style={{ color: '#1CC0FF' }} />
                    ) : (
                      <DownCircleFilled style={{ color: '#1CC0FF' }} />
                    )}
                  </Space>
                </Flex>
                {expand === index && (
                  <div className={styles.childWrap}>
                    {item?.objects.map((child, child_index) => {
                      return (
                        <Flex
                          key={child_index}
                          align="center"
                          className={styles.childItem}
                          justify="space-between"
                          onClick={() => setSelectedArea(child)}
                        >
                          <div>{child.objectName}</div>
                          <div
                            style={{
                              color: getCqiStatusStyle(child.cqi)?.color,
                            }}
                          >
                            {cqiDisplay(child.cqi)}
                          </div>
                        </Flex>
                      );
                    })}
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>

      <div className={styles.statusBar}>
        {/* <Space>
          <Switch onChange={setIsBmap}></Switch>
          <div>启用百度地图</div>
        </Space> */}
        <Space>
          <div className={styles.mark} style={{ backgroundColor: '#F24F4F' }} />
          <div>应急态</div>
        </Space>
        <Space>
          <div className={styles.mark} style={{ backgroundColor: '#FFA81A' }} />
          <div>预警态 &lt;85</div>
        </Space>
        <Space>
          <div className={styles.mark} style={{ backgroundColor: '#00B9FF' }} />
          <div>正常态 85-95</div>
        </Space>
        <Space>
          <div className={styles.mark} style={{ backgroundColor: '#57EF58' }} />
          <div>良好态 &gt;95</div>
        </Space>
      </div>
    </div>
  );
};

export default Map;
