/** @format */

import _ from 'lodash';
import { useEffect } from 'react';

interface DistrictSearchProps {
  background: string; // 多边形填充颜色
  borderWidth: number; // 线条宽度，默认为 1
  borderColor: string; // 线条颜色
  data: {
    level: string;
    name: string;
  }[];
  parentId: string;
}

const DistrictSearch = (props: DistrictSearchProps) => {
  const {
    parentId = '1',

    data = [
      {
        level: 'province',
        name: '浙江省',
      },
    ],
  } = props;

  useEffect(() => {
    if (!window.__map2d[parentId]?.map) return;
    setArea(data);
  }, [window.__map2d[parentId]?.map, data]);

  //利用行政区查询获取边界构建mask路径
  //也可以直接通过经纬度构建mask路径
  function setArea(area: any[]) {
    area &&
      area.length > 0 &&
      area.map(item => {
        const opts = {
          subdistrict: 0,
          extensions: 'all',
          level: item.level,
        };
        const district = new AMap.DistrictSearch(opts);
        district.search(item.name, function(status: any, result: any) {
          const bounds = result.districtList[0].boundaries;
          const mask = [];
          for (let i = 0; i < bounds.length; i += 1) {
            mask.push([bounds[i]]);
          }
          window.__map2d[parentId]?.map.setMask(mask);
          // window.__map2d[parentId]?.map.setViewMode('3D');

          //添加描边
          for (let i = 0; i < bounds.length; i += 1) {
            new AMap.Polyline({
              path: bounds[i],
              strokeColor: '#99ffff',
              strokeWeight: 2,
              map: window.__map2d[parentId]?.map,
            });
          }
        });
      });
  }

  return null;
};

export default DistrictSearch;