import React, { useEffect, useState, useRef } from 'react';
import SiteModal from '@/components/Modal/SiteModa';
import { Input, Cascader, Button, message, Spin } from 'antd';
import {
  gcj_decrypt,
  exetent2AmapPoint,
  lngLat2WebMercator,
  plan2AMapbound,
  webMercator2LngLat,
} from '@/utils/transformUtil';
import { GetAllConfig, GetMetaData } from '@/services/gis/gis';
import ReactJson from 'react-json-view';
import { tr } from 'voca';
const { Search } = Input;
const VectorPreviewModal = props => {
  const { metaData } = props;

  const mapID = useRef();
  const [currentMeta, setCurrentMeta] = useState();
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    if (document.getElementById('map-container')) {
      if (!mapID.current) {
        // 1.加载底图
        let m = new window.AMap.Map('map-container');
        mapID.current = m;
      }
    }
  }, [props]);
  useEffect(() => {
    let map = mapID.current;
    map && map.clearMap();
    map && map.remove(map.getLayers());
    setIsLoading(true);
    map &&
      GetMetaData({ mapServerName: metaData.GISServerProjectName }).then(res2 => {
        setIsLoading(false);
        if (res2 && res2.units) {
          setCurrentMeta(res2);
          const layers = res2.layers || [];
          const workspace = res2.mapName.split('_')[0];
          const subLayers = layers
            .filter(layer => layer.subLayerIds && layer.subLayerIds.length === 0)
            .map(layer => layer.name);
          const paramLayers = `${workspace}:${subLayers.join(',')}`;
          const params = {
            LAYERS: paramLayers,
            VERSION: '1.1.1',
            _site: '',
          };
          const wmsOption = {
            tileSize: 512,
            url: `${location.origin}/PandaGIS/MapServer/Export/${
              metaData.GISServerProjectName
            }/GeoServerProxy/wms`,
            blend: false,
            params,
            zooms: [2, 20],
          };
          let wms = new window.AMap.TileLayer.WMS(wmsOption);
          map.add(wms);
          setIsLoading(true);
          // wms.complete(() => {
          //     setIsLoading(false)
          // })
          wms.on('complete', () => {
            setIsLoading(false);
          });
          const extent = res2.fullExtent;
          if (extent.xmax < 100000000 && extent.xmax > 0) {
            const a = webMercator2LngLat(extent.xmin, extent.ymin);
            const b = webMercator2LngLat(extent.xmax, extent.ymax);
            const southWest = new AMap.LngLat(a[0], a[1]);
            const northEast = new AMap.LngLat(b[0], b[1]);

            mapID.current.setBounds(new AMap.Bounds(southWest, northEast));
          }
        }
      });
  }, [metaData]);
  const resetmap = () => {};

  const getInitConfig = () => {};
  const onSubmit = () => {};
  return (
    <SiteModal
      {...props}
      title="管网预览"
      bodyStyle={{ width: '100%', minHeight: '100px' }}
      style={{ top: 200, borderRadius: '20px' }}
      width="1050px"
      cancelText="取消"
      okText="确认"
      onOk={() => onSubmit()}
    >
      <Spin spinning={isLoading}>
        <div style={{ width: '1000px', height: '500px' }}>
          <div style={{ width: '1000px', height: '500px', position: 'absolute' }}>
            <div id="map-container" style={{ width: '1000px', height: '500px' }} />
            <div
              style={{
                top: '10px',
                right: '10px',
                position: 'absolute',
                overflowY: 'scroll',
                maxHeight: '480px',
                maxWidth: '250px',
                backgroundColor: 'white',
              }}
            >
              {/* <ReactJson src={currentMeta} /> */}
            </div>
          </div>
        </div>
      </Spin>
    </SiteModal>
  );
};

export default VectorPreviewModal;
