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]);

  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 (
                <CooglMap.Polygon
                  fillColor={getColorByIndex(Number(item.qualitySign))!}
                  key={index}
                  strokeColor="#fff"
                  points={item.points}
                  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>
        ) : (
          <>
            <CooglMap.Polygon
              fillColor={getColorByIndex(Number(selectedData?.qualitySign))!}
              strokeColor="#fff"
              points={selectedData?.points}
              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>应急态 &lt;60</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;
