<template>
    <div :id="mapContainerName" class="map-container">

    </div>
</template>
<script lang="ts" setup>
import {ref,onMounted,defineExpose,defineEmits} from "vue";
import { generateUUID} from '@/components/MapboxMaps/src/tool'
import { WktToGeojson } from '@/components/MapboxMaps/src/WktGeojsonTransform';
import  mapboxgl,{ Map, Popup } from 'mapbox-gl';
import {MAPBOX_TOKEN,TINADITU_TOKEN,MAP_VIEWER} from './config.ts'
import {getPolygonCenter} from '@/api/tiankongdi'
import axios from 'axios'
import { waiData } from "./linyishi";
import { getAppEnvConfig } from '@/utils/env';
import dayjs from 'dayjs';
const { VITE_GLOB_API_URL } = getAppEnvConfig();
const VITE_GLOB_API_URL_VAR = ref<String>(VITE_GLOB_API_URL);

const {VITE_GLOB_YINGXIANG_SERVER} = getAppEnvConfig();
const mapContainerName = ref<String>()
mapContainerName.value = "mapContainer-"+generateUUID();
// 

const emits = defineEmits(["onload","handlerGetDetails"])

let map:Map;

// init map
const initMap = () => {
    return new mapboxgl.Map({
        container:mapContainerName.value,
        language: 'zh-cmn',
        projection: 'equirectangular', // wgs84参考系
        style: {
            glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
            version: 8,
            sources: {
                'dianzi': {
                    type: 'raster',
                    tiles: [
                        `https://t0.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=${TINADITU_TOKEN}`,
                    ],
                    tileSize: 256,
                },
                'dianzi-biaozhu': {
                    type: 'raster',
                    tiles: [
                        `https://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=${TINADITU_TOKEN}`,
                    ],
                    tileSize: 256,
                },
                'weixing': {
                    type: 'raster',
                    tiles: [
                        `http://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=${TINADITU_TOKEN}`,
                    ],
                    tileSize: 256,
                },
                'yingxiang': {
                    type: 'raster',
                    tiles: [
                        VITE_GLOB_YINGXIANG_SERVER,
                    ],
                    tileSize: 256,
                }
            },
            layers: [
                
                {
                    id: 'dianzi-biaozhu',
                    type: 'raster',
                    source: 'dianzi-biaozhu',
                    layout: {
                        visibility: 'visible',
                    }
                },{
                    id: 'weixing',
                    type: 'raster',
                    source: 'weixing',
                    layout: {
                        visibility: 'none',
                    }
                },
                {
                    id: 'yingxiang',
                    type: 'raster',
                    source: 'yingxiang',
                    layout: {
                        visibility: 'none',
                    }
                },{
                    id: 'dianzi',
                    type: 'raster',
                    source: 'dianzi',
                    layout: {
                        visibility: 'visible',
                    }
                }
            ],
        },
        maxZoom:24,
        minZoom:8,
        zoom: 10,
        pitch:0,
        center: [117.984425,35.270654],
    });
};

// 获取图斑面数据
const polygonVisibility = ref<String>("none");

function handlerLoadPolygon(code="",filter="",type=""){
    let sql_filter;
    if(code){
        sql_filter = "&filter=\"countyid\"=\'"+code+"\' and \"typename\"=\'农用地\'";
    }else{
        // sql_filter=""
        sql_filter="&filter=\"typename\"=\'农用地\'"
    }
    let map_filter;
    
    switch(filter){
        case "合法":
            map_filter = ["all",["==", ["get", "is_illegal"], 0],["==", ["get", "handle_status_id"], 5]];
            break;
        case "违法":
            map_filter = ["any",["==", ["get", "is_illegal"], 1],["!=", ["get", "handle_status_id"], 5]];
            break;
        case "其他":
            map_filter = ["all",["==", ["get", "is_illegal"], 2],["==", ["get", "handle_status_id"], 5]];
            break;
        case "补办手续":
            map_filter = ["all",["==", ["get", "measure_name"], 0],["==", ["get", "handle_status_id"], 5]];
            break;
        case "拆除复耕":
            map_filter = ["all",["==", ["get", "measure_name"], 1],["==", ["get", "handle_status_id"], 5]];
            break;
        default:
            map_filter = ["!=", ["get", "gid"], 0];
    }
    let type_filter;
    switch(type){
        case "农用地":
            type_filter = ["==", ["get", "typename"], "农用地"];
            break;
        case "建设用地":
            type_filter = ["==", ["get", "typename"], "建设用地"];
            break;
        case "推堆土":
            type_filter = ["==", ["get", "typename"], "推堆土"];
            break;
    }
    if(filter && type){
        map_filter.push(type_filter);
    }else if(!filter && type){
        map_filter = ["all",["!=", ["get", "gid"], 0],type_filter];
    }

    // alert(map_filter);
    // console.log("map_filter123",map_filter);
    
    if(map.getSource("historyLayerLine")){
        polygonVisibility.value = map.getLayoutProperty('historyLayerLine', 'visibility');
        map.removeLayer("historyLayerLine")
        map.removeLayer("historyLayerFill")
        map.removeSource("historyLayerLine")
        map.removeSource("historyLayerFill");
    }


    map.addLayer(
        {
          'id': 'historyLayerLine',
          'type': 'line',
          'source': {
            type: 'vector',
            tiles: [VITE_GLOB_API_URL_VAR.value+'/api/DroneCaseInfoSingle/QueryVectorTileByTable?z={z}&x={x}&y={y}&table=view_drone_wfyd_map'+sql_filter+'&field=\"gid\",\"handle_status_id\",\"is_illegal\",\"measure_name\",\"typename\",\"Id\",'],
            minzoom: 1,
            maxzoom: 20
          },
          "source-layer": "view_drone_wfyd_map",
          'layout': {
            'line-join': 'round',
            'line-cap': 'round',
            'visibility':polygonVisibility.value,
          },
          'filter':map_filter,
          'paint': {
            'line-color': [
              "case",
              ["all",["==", ["get", "is_illegal"], 0],["==", ["get", "handle_status_id"], 5]],  //合法
              "#0AF703",
              ["any",["==", ["get", "is_illegal"], 1],["!=", ["get", "handle_status_id"], 5]], //违法
              "#F70303",
              ["all",["==", ["get", "is_illegal"], 2],["==", ["get", "handle_status_id"], 5]], //其他
              "#0382F7",
              ["all",["==", ["get", "measure_name"], 0],["==", ["get", "handle_status_id"], 5]], //补办手续
              "#AD04F4",
              ["all",["==", ["get", "measure_name"], 1],["==", ["get", "handle_status_id"], 5]], //拆除复耕
              "#F4E004",
              // 默认
              "#F70303",
            ],
            'line-width': 5
          }
        }
    )
    map.addLayer({
          'id': 'historyLayerFill',
          'type': 'fill',
          'source': {
            type: 'vector',
            tiles: [VITE_GLOB_API_URL_VAR.value+'/api/DroneCaseInfoSingle/QueryVectorTileByTable?z={z}&x={x}&y={y}&table=view_drone_wfyd_map'+sql_filter+'&field=\"gid\",\"handle_status_id\",\"is_illegal\",\"measure_name\",\"typename\",\"Id\",'],
            // 
            minzoom: 1,
            maxzoom: 20
          },
          "source-layer": "view_drone_wfyd_map",
          'filter':map_filter,
          'layout':{
            'visibility':polygonVisibility.value,
          },
          'paint': {
            'fill-color': [
                "case",
                ["all",["==", ["get", "is_illegal"], 0],["==", ["get", "handle_status_id"], 5]],  //合法
                "#0AF703",
                ["any",["==", ["get", "is_illegal"], 1],["!=", ["get", "handle_status_id"], 5]], //违法
                "#F70303",
                ["all",["==", ["get", "is_illegal"], 2],["==", ["get", "handle_status_id"], 5]], //其他
                "#0382F7",
                ["all",["==", ["get", "measure_name"], 0],["==", ["get", "handle_status_id"], 5]], //补办手续
                "#AD04F4",
                ["all",["==", ["get", "measure_name"], 1],["==", ["get", "handle_status_id"], 5]], //拆除复耕
                "#F4E004",
                // 默认
                "#F70303",
            ],
            'fill-opacity': 0.4
          }
    })

    map.on("click","historyLayerFill",(e)=>{
       emits("handlerGetDetails",e.features[0].properties);
    })
}

// 获取和处理图斑点数据
const currentCode = ref("")
async function handlerDealPoint(code=""){
    let sql_filter;
    if(code){
        sql_filter = "\"countyid\"=\'"+code+"\' and \"typename\"=\'农用地\'";
    }else{
        sql_filter="\"typename\"=\'农用地\'"
    }
    let points = await getPolygonCenter({tablename:"view_drone_wfyd_map",filter:sql_filter,createtime:dayjs().subtract(30, 'day').format('YYYY-MM-DD')})
    
    let heatdata = {
        type: "FeatureCollection",
        features:[]
    }
    points?.forEach((item,index)=>{
        let geometry = WktToGeojson(item['centroid_point']);
        let feature = {
            geometry:geometry,
            properties:{
                mag:parseFloat((5*Math.random()).toFixed(1)),
            }
        }
        heatdata.features.push(feature);
    })

    handlerLoadHeatLayer(heatdata);

    if(map.getLayer('clusters')){
        map.moveLayer("clusters","heatLayer");
        map.moveLayer("cluster-count","heatLayer")
        map.moveLayer("unclustered-point","heatLayer")
    }

}
// 获取遮罩数据
function getMaskData(){
    axios({
        method:"get",
        url:`http://120.222.154.7:8090/geoserver/linyishi/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=linyishi%3Ashijie&maxFeatures=50&outputFormat=application%2Fjson`,
    }).then(res=>{
        let geojson = {DATA:res.data.features[0].geometry.coordinates[0][0]}
        handlerLoadMaskLayer(geojson);
    });

}

// 加载地图遮罩
function handlerLoadMaskLayer(geojson){
    map.addLayer({
        //蒙版图层   //通过边界数据反选 达到挖洞效果
        id: 'mb-tag',
        type: 'fill',
        source: {
        type: 'geojson',
        data: {
            type: 'Feature',
            geometry: {
            type: 'Polygon',
            coordinates: [
                [
                // 多边形外围 需要进行遮罩的点 这里是给世界地图加遮罩 所以是世界的四个端点
                [-180, 90],
                [180, 90],
                [180, -90],
                [-180, -90],
                ],
                geojson.DATA,
            ],
            },
        },
        },
        paint: {
        'fill-color': '#ffffff',
        'fill-opacity': 1 /* 透明度 */,
        },
        layout: {
        visibility: 'visible',
        },
    });

    if(map.getLayer('countyLayer')){
        map.moveLayer("countyLayer","mb-tag")
    }
}

// 加载热力图图斑数据
function handlerLoadHeatLayer(heatdata){
    // console.log("heatdata123",heatdata);
    // heatdata.features = heatdata.features.slice(0,2000);
    // let rediusProportion = heatdata.features.length/333;
    
    if(map.getSource("heatSource")){
        map.getSource("heatSource").setData(heatdata);
    }else{
        map.addSource('heatSource', {
            'type': 'geojson',
            'data': heatdata
        });
        map.addLayer(
            {
                'id': 'heatLayer',
                'type': 'heatmap',
                'source': 'heatSource',
                'maxzoom': 15,
                'minzoom':7,
                'layout':{
                    "visibility":"visible"
                },
                // 'paint': {
                //     'heatmap-weight': [
                //         'interpolate',
                //         ['linear'],
                //         ['get', 'mag'],
                //         1,
                //         2,
                //         3,
                //         4
                //     ],
                //     'heatmap-intensity': [
                //         'interpolate',
                //         ['linear'],
                //         ['zoom'],
                //         0,
                //         1,
                //         9,
                //         3
                //     ],
                //     'heatmap-color': [
                //         'interpolate',
                //         ['linear'],
                //         ['heatmap-density'],
                //         0,
                //         'rgba(33,102,172,0)',
                //         0.2,
                //         'rgba(103,169,207,0.8)',
                //         0.4,
                //         'rgba(209,229,240,0.8)',
                //         0.6,
                //         'rgba(253,219,199,0.8)',
                //         0.8,
                //         'rgba(239,138,98,0.8)',
                //         1,
                //         'rgba(178,24,43,0.8)'
                //     ],
                //     'heatmap-radius': [
                //         'interpolate',['linear'],['zoom'],
                //         2,
                //         7,
                //         11,
                //         20
                //     ],
                //     'heatmap-opacity': [
                //         'interpolate',
                //         ['linear'],
                //         ['zoom'],
                //         7,
                //         0,
                //         8,
                //         1
                //     ]
                // }
                'paint': {
                    'heatmap-weight': 1,
                    'heatmap-intensity': 1,
                    'heatmap-color': [
                        'interpolate',
                        ['linear'],
                        ['heatmap-density'],
                        0,
                        'rgba(33,102,172,0)',
                        0.1,
                        'rgba(51, 71, 255 ,0.1)',
                        0.4,
                        'rgba(51, 255, 81 ,0.5)',
                        0.6,
                        'rgba(253,219,199,0.6)',
                        0.8,
                        'rgba(255, 90, 51,0.5)',
                        0.9,
                        'rgba(214,34,8,0.6)',
                        1,
                        'rgba(178,24,43,0.7)'
                    ],
                    // 'heatmap-radius': 8,

                    // 根据缩放等级设置热力图色彩  等级,热力图密度    
                    'heatmap-radius': [
                        'interpolate',['linear'],['zoom'],
                        9,5,
                        10,18,
                        11,20,
                        12,24,
                        14,28,
                    ],
                    'heatmap-opacity': 0.9
                }
            }
        );
    }


    handlerLoadConvergeLayer(heatdata);

    if(map.getLayer('heatLayer')){
        map.moveLayer('heatLayer', 'historyLayerLine');
        map.moveLayer('heatLayer', 'historyLayerFill');
        if(map.getLayer('clusters')){
            map.moveLayer("clusters","heatLayer");
            map.moveLayer("cluster-count","heatLayer")
            map.moveLayer("unclustered-point","heatLayer")
        }
    }

    
}

// 地图定位
function handlerLocation(lngLat,zoom){
    map.flyTo({
    center: lngLat,
        zoom: zoom,
        bearing: 0,
        speed: 1, // 飞行速度
        curve: 2, // 飞行曲线
        essential: true,
        easing(t) {
            // 飞行动画函数
            return t;
        },
    });
};

// 获取县区边界数据
const handlerDealCountry = (countyName:String = "临沂市"):void=>{
    let center = {};
    let zoom;
    let filterName: any = "";
    if(countyName == '临沂市'){
        center ={lng: 118.72504868812163, lat: 35.180072027132915}
        zoom = 7.848587811931849;
        handlerLocation([center['lng'],center['lat']],zoom);

        axios({
            method:"get",
            // url:`http://175.27.168.120:8080/geoserver/linyishi/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=linyishi%3Axianjie&maxFeatures=50&outputFormat=application%2Fjson&cql_filter=xzqmc%20like%20%27%25${filterName}%25%27`,
            url:`http://120.222.154.7:8090/geoserver/linyishi/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=linyishi%3Ashijie&maxFeatures=50&outputFormat=application%2Fjson`,
        }).then(res=>{
            handlerLoadCountyLayer(res.data);
        });
    } else if(countyName){
        
        center = MAP_VIEWER[countyName].center;
        zoom = MAP_VIEWER[countyName].zoom;
        handlerLocation([center['lng'],center['lat']],zoom);
        filterName=countyName;

        axios({
            method:"get",
            // url:`http://175.27.168.120:8080/geoserver/linyishi/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=linyishi%3Axianjie&maxFeatures=50&outputFormat=application%2Fjson&cql_filter=xzqmc%20like%20%27%25${filterName}%25%27`,
            url: `http://120.222.154.7:8090/geoserver/linyishi/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=linyishi%3Axianjie&maxFeatures=50&outputFormat=application%2Fjson&cql_filter=xzqmc_1%20like%20%27%25${filterName}%25%27`,
        }).then(res=>{
            console.log("res",res);
            handlerLoadCountyLayer(res.data);
        })
    }
}


// 渲染边界数据
const handlerLoadCountyLayer = (geojson)=>{
    // 绘制线
    if(map.getSource("countySource")){
        map.getSource("countySource").setData(geojson);
      }else{
        map.addSource("countySource",{
          type:"geojson",
          data:geojson
        })
        map.addLayer(
          {
            "id": "countyLayer",
            "type": "line",
            "source": "countySource",
            "paint": {
              'line-color': '#6F7FF4', // 设置线的颜色
              'line-width': 3 // 设置线的宽度
            }
          }
        )
        if(map.getLayer('mb-tag')){
            map.moveLayer("countyLayer","mb-tag")
        }
      }
}

// 控制图层显示隐层
/**
 * 热力图：heatLayer
 * 
 * 图斑线：historyLayerLine
 * 
 * 图斑面：historyLayerFill
 * 
 * 行政区划：countyLayer
 * 
 * */ 
function handlerChangeLayerVisible(layerName,checked){
    if (checked) {
        map.setLayoutProperty(layerName, 'visibility', 'visible');
    } else {
        map.setLayoutProperty(layerName, 'visibility', 'none');
    }
}

// 切换县区
function handlerChangeCounty(county,type=""){
    handlerDealCountry(county.name);
    handlerLoadPolygon(county.code,type);
    handlerDealPoint(county.code);
}

// 加载汇聚图
function handlerLoadConvergeLayer(geojson){
    if(map.getSource("earthquakes")){
        map.getSource("earthquakes").setData(geojson);
    }else{
        map.addSource('earthquakes', {
            type: 'geojson',
            // Point to GeoJSON data. This example visualizes all M1.0+ earthquakes
            // from 12/22/15 to 1/21/16 as logged by USGS' Earthquake hazards program.
            data: geojson,
            cluster: true,
            clusterMaxZoom: 14, // Max zoom to cluster points on
            clusterRadius: 50 // Radius of each cluster when clustering points (defaults to 50)
        });

        map.addLayer({
            id: 'clusters',
            type: 'circle',
            source: 'earthquakes',
            filter: ['has', 'point_count'],
            layout:{
                'visibility':'none',
            },
            paint: {
                // Use step expressions (https://docs.mapbox.com/style-spec/reference/expressions/#step)
                // with three steps to implement three types of circles:
                //   * Blue, 20px circles when point count is less than 100
                //   * Yellow, 30px circles when point count is between 100 and 750
                //   * Pink, 40px circles when point count is greater than or equal to 750
                'circle-color': [
                    'step',
                    ['get', 'point_count'],
                    'rgba(51, 71, 255 ,0.6)',
                    50,
                    'rgba(51, 255, 81 ,0.6)',
                    200,
                    'rgba(253,219,199,0.9)',
                    300,
                    'rgba(255, 90, 51,1)',
                    400,
                    'rgba(214,34,8,0.9)',
                    700,
                    'rgba(178,24,43,1)'

                ],
                'circle-radius': [
                    'step',
                    ['get', 'point_count'],
                    20,
                    100,
                    30,
                    750,
                    40
                ]
            }
        });

        map.addLayer({
            id: 'cluster-count',
            type: 'symbol',
            source: 'earthquakes',
            filter: ['has', 'point_count'],
            layout: {
                'visibility':'none',
                'text-field': ['get', 'point_count_abbreviated'],
                'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'],
                'text-size': 12
            }
        });

        map.addLayer({
            id: 'unclustered-point',
            type: 'circle',
            source: 'earthquakes',
            filter: ['!', ['has', 'point_count']],
            layout:{
                'visibility':'none',
            },
            paint: {
                'circle-color': '#11b4da',
                'circle-radius': 4,
                'circle-stroke-width': 1,
                'circle-stroke-color': '#fff'
            }
        });

        if(map.getLayer('clusters')){
            map.moveLayer("clusters","heatLayer");
            map.moveLayer("cluster-count","heatLayer")
            map.moveLayer("unclustered-point","heatLayer")
        }
    }
}

// 
onMounted(()=>{
    mapboxgl.accessToken = MAPBOX_TOKEN;
    map = initMap();
    map.on("load",()=>{
        // handlerDealCountry();
        // handlerDealPoint();
        // handlerLoadPolygon();
        // handlerLoadMaskLayer();
        getMaskData();
        emits("onload");
        map.on("click",(e)=>{
            var center = map.getCenter(); // 获取当前视图中心点
            var zoom = map.getZoom(); // 获取当前视图缩放级别
            console.log(zoom);
            console.log(center);
        })
    })
})


// 抛出函数
defineExpose({
    handlerChangeCounty,   // 切换县区
    handlerChangeLayerVisible, // 控制图层显示隐藏
    handlerLoadPolygon,
});

</script>
<style type="less" scoped>
.map-container{
    width:100%;
    height:100%;
}
::v-deep .mapboxgl-ctrl-logo{
    display: none!important;
}
</style>
