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(metaData.GISServerProjectName).then(
            res2 => {
                if (res2 && res2.units) {
                    setIsLoading(false)
                    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}/Cityinterface/rest/services/MapServer.svc/${metaData.GISServerProjectName}/GeoServerProxy/wms`,
                        blend: false,
                        params: 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>
                        <div style={{ top: "10px", right: "10px", position: "absolute", overflowY: "scroll", maxHeight: "480px", backgroundColor: "white" }}>
                            <ReactJson src={currentMeta} collapsed={true} />
                        </div>
                    </div>
                </div>
            </Spin>

        </SiteModal>
    )
}

export default VectorPreviewModal