import CooglMap from '@/components/CooglMap';
import services from '@/services';
import BMapService from '@/utils/mapService';
import { getColorByIndex } from '@/utils/ui';
import { useModel } from '@umijs/max';
import { Space } from 'antd';
import React, {
  CSSProperties,
  Fragment,
  useEffect,
  useRef,
  useState,
} from 'react';
import DistrictDetailBar from '../DIstrictDetailBar';
import styles from './index.less';

/** 地图 */
const DistrictMap: React.FC = () => {
  /** @description store */
  const { selectDistrict, areaListDto } = useModel('regionalIndex');

  const MapRef = useRef<any>();

  /** 是否启用百度地图 */
  const [isBmap, setIsBmap] = useState(false);

  const [data, setData] = useState<any[]>([]);

  useEffect(() => {
    services.Physicalsign.getObjectPolygon({
      physicalSignType: 1,
      objectHierarchy: 1,
    }).then((res) => {
      console.log(res);
      setData(res.data);
    });
  }, []);

  const [selectedData, setSelectedData] = useState<any>({});
  /**
   * @description 设置地图视野
   */
  const setViewport = () => {
    const points = areaListDto
      .map((item) => {
        return BMapService.buildPoints(item.points);
      })
      .flat(1);

    const map = MapRef.current?.map as BMapGL.Map;
    if (map) {
      map.setViewport(points);
    }
  };
  console.log(data, selectedData);
  useEffect(() => {
    const temp = data?.find((v) => v?.objectId === selectDistrict?.objectId);

    setSelectedData(temp);
  }, [data, selectDistrict]);
console.log(selectedData);

  return (
    <div className={styles.container}>
      <CooglMap.MapView
        zoom={13}
        ref={MapRef}
        center={{ x: 104.066349, y: 30.658842 }}
      >
        {!selectDistrict ? (
          <Fragment>
            {data?.map((item, index) => {
              return item?.multiPoints.map((it) => {
                return (
                  <CooglMap.Polygon
                    fillColor={getColorByIndex(Number(item.qualitySign))!}
                    key={index}
                    strokeColor="#fff"
                    points={it}
                    strokeWidth={2}
                    fillOpacity={0.2}
                  ></CooglMap.Polygon>
                );
              });
            })}
            {data?.map((item, index) => {
              const point = [Number(item.centerX), Number(item.centerY)];

              return (
                <CooglMap.CustomOverlay key={index} position={point}>
                  <div
                    className={styles.indexMarker}
                    style={
                      BMapService.getMakerCSS(
                        Number(item.qualitySign),
                      ) as CSSProperties
                    }
                  >
                    {Number(item.qualitySign)}
                  </div>
                </CooglMap.CustomOverlay>
              );
            })}
          </Fragment>
        ) : (
          <>
            {selectedData?.multiPoints?.map((it) => {
              return (
                <CooglMap.Polygon
                  fillColor={
                    getColorByIndex(Number(selectedData?.qualitySign))!
                  }
                  strokeColor="#fff"
                  points={it}
                  strokeWidth={2}
                  fillOpacity={0.2}
                ></CooglMap.Polygon>
              );
            })}

            <CooglMap.CustomOverlay
              position={[
                Number(selectedData?.centerX),
                Number(selectedData?.centerY),
              ]}
            >
              <div
                className={styles.indexMarker}
                style={
                  BMapService.getMakerCSS(
                    Number(selectedData?.qualitySign),
                  ) as CSSProperties
                }
              >
                {Number(selectedData?.qualitySign)}
              </div>
            </CooglMap.CustomOverlay>
          </>
        )}
      </CooglMap.MapView>

      {selectDistrict && (
        <div className={styles.districtName}>{selectDistrict.objectName}</div>
      )}
      <div className={styles.statusBar}>
        <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>

      {selectDistrict && <DistrictDetailBar></DistrictDetailBar>}
    </div>
  );
};

export default DistrictMap;
