import React, { useEffect, useRef, useState } from 'react';
import loader from '@/components/AMap/loader';
import getMarker from './marker';
import geoPolygon from './geoPolygon';
import Styles from './style.less';

const plugins = [];

export default (props) => {
  const container = useRef();
  const amapRef = useRef();
  const [map, setMap] = useState();

  useEffect(() => {
    loader(plugins).then((AMap) => {
      amapRef.current = AMap;
      const mapInst = new AMap.Map(container.current, {
        mapStyle: 'amap://styles/669a7d8709a9bab0945747a1a1db3327',
        // mapStyle: 'amap://styles/blue',
        zoom: 10,
        resizeEnable: true,
        center: [112.092716, 32.681642],
      });

      // 遮罩层;
      geoPolygon(AMap, mapInst);

      //
      setMap(mapInst);
    });
  }, []);

  useEffect(() => {
    if (!map) return;

    // 先搞一个 marker demo
    getMarker(amapRef.current, map, {
      position: [112.092716, 32.681642],
      extData: { value: '68辆' },
    });
  }, [map]);

  return (
    <div className={Styles['geo-map-container']}>
      {/* 占位图片 */}
      <div className={Styles['geo-map-header']}>
        <div />
        <div />
        <div />
      </div>

      <div className={Styles['geo-map-body']}>
        <div ref={container} />
      </div>

      {/* 占位图片 */}
      <div className={Styles['geo-map-footer']}>
        <div />
        <div />
        <div />
      </div>
    </div>
  );
};