<template>
<div style="width:100%;height:100%;background:rgb(48,65,85)">
  <div id="map"></div>
    <div id='state-legend' class='legend'>
      <!-- <h4>案件状态</h4> -->
      <div><span style='background-color: #E6A23C'></span>未办理</div>
      <div><span style='background-color: #409EFF'></span>办理中</div>
      <div><span style='background-color: #67C23A'></span>已办结</div>
    </div>

    <el-dialog width="1366px" height="690px" top="60px"
              class="dialog-mini body-small addWindow"
              v-el-drag-dialog
              :title="'案件详情'"
              :close-on-click-modal="false"
              :close-on-press-escape="false"
              :visible.sync="eventDetailVisible"
              >
    <el-container style="width:1350px;height:690px;overflow-y:hidden;">
      <el-container v-if="eventDetailVisible">
        <eventDetailnForm :caseDetailId="caseDetailId" :isShowMap="false"></eventDetailnForm> 
      </el-container>
    </el-container>
  </el-dialog>
</div>
  
</template>
<script>
import waves from '@/directive/waves' // 水波纹指令
import elDragDialog from '@/directive/el-dragDialog'

import eventDetailnForm from './widget/detail'
import {getMethodCommon,postMethodCommon} from '@/api/common'
import WKT, { parse } from "terraformer-wkt-parser"
import appConfig from '../../../public/config.json'
  // import {DrawAreaControl} from "gykj-map-core"
const BASE_URL = process.env.VUE_APP_BASE;
export default {
  name:"MapBox",
  data(){
    return {
      ruleFormId: '',
      handleForm: [],
      formsVisible:false,
      eventDetailVisible:false,
      caseDetailId:null,
      appConfig:appConfig
    }
  },
  components:{
    eventDetailnForm
  },
  directives: {
    waves,
    elDragDialog
  },
  watch:{
    '$store.state.app.sidebar.opened':function(e){
      let _this = this;
      setTimeout(function(){
        if(_this.globalMap != null){
          _this.globalMap.resize();
        }
      },300)
    }
  },
  mounted(){
    this.loadMap();
  },

  methods:{
    // 加载地图
    loadMap(){
      this.$mapboxgl.accessToken = "pk.eyJ1Ijoic2hpY2hhbzEyMyIsImEiOiJja3FobnI1aDEwNGF6Mm9vOXVhNnBzZmFhIn0.2fZKiMqCQHxVY74QShMEGQ";
      this.globalMap = new this.$mapboxgl.Map({
        container: 'map',
        zoom: 10.1,
        pitch:15,
        style: {
          glyphs: "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
          "version": 8,
          "sources": {
            "raster-tiles": {
              "type": "raster",
              "tiles": ['http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk='+appConfig.appInfo.tiandituKey],
              "tileSize": 256,
            },
             "raster-tiles-l": {
              "type": "raster",
              "tiles": ['http://t0.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk='+appConfig.appInfo.tiandituKey],
              "tileSize": 256,
            }
          },
          "layers": [
            {
            "id": "tdt-img-tiles",
            "type": "raster",
            "source": "raster-tiles",
            "minzoom": 0,
            "maxzoom": 22
          },
          {
            "id": "tdt-img-tiles-l",
            "type": "raster",
            "source": "raster-tiles-l",
            "minzoom": 0,
            "maxzoom": 22
          }
          ]
        },
        maxZoom: 22,
        minZoom: 5,
        center: [117.92214891969796,35.26152309532066],
      })
      let _this = this;

      this.globalMap.addControl(new this.$mapboxgl.FullscreenControl(),'top-right');
      this.globalMap.on("load",function(){
        // let fullScreen = new this.$mapboxgl.FullscreenControl;
        // _this.globalMap.addControl(fullScreen,'top-right');
        _this.loadImageLayer();
        _this.loadStreetBorderLayer();
        _this.loadHistoryLayerVector();
      })
    },
    // 乡镇边界图层
    loadStreetBorderLayer(){
      this.globalMap.addLayer({
        'id': 'street-border',
        'type': 'raster',
        'source': {
          'type': 'raster',
          'tiles': ['http://175.27.168.120:8080/geoserver/feixian/wms?service=WMS&version=1.1.0&request=GetMap&layers=feixian:zhenjie&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE'],
          'tileSize': 256
        },
        'paint': {},
        'layout': {
		        "visibility":"visible"
		    },
      });
    },

    // 影像图层
    loadImageLayer(){
      this.globalMap.addLayer({
        'id': 'wms-test-layer',
        'type': 'raster',
        'source': {
          'type': 'raster',
          'tiles': ['http://175.27.168.120:8080/geoserver/feixian/wms?service=WMS&version=1.1.0&request=GetMap&layers=feixian:yingxiang&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE'],
          'tileSize': 256
        },
        'paint': {}
        });
    },
    // 历史图斑（GeoJson 已经弃用）
    loadHistoryLayer(){
      getMethodCommon("/DroneCaseinfo/LoadAllDroneGeoJson").then(res =>{
        if(res.code == 200){
          let historyGeoJson = res.result;
              this.globalMap.addLayer({
              	"id": "historyLayer-fill",
              	"type": "fill",
              	"source": {
                  "type": "geojson",
                  "data":historyGeoJson
              	},
              	'layout': {
                    "visibility":"none",
                },
                'paint': {
                    "fill-color": "#FE9003",
                    "fill-opacity": 0.2,
                    "fill-outline-color": "#FE9003"
                }
              });

              

          		this.globalMap.addLayer({
              	"id": "historyLayer",
              	"type": "line",
              	"source": {
                  "type": "geojson",
                  "data":historyGeoJson
              	},
              	'layout': {
                    "visibility":"none",
                    'line-join': 'round',
                    'line-cap': 'round'
                },
                'paint': {
                    'line-color':'#FE9003',
                    'line-width':4
                }
              });
              
        }
      })
    },
    // 根据案件办理状态 加载面图斑
    loadHistoryLayerVector(){
        // 加载图斑面
        this.globalMap.addLayer({
          'id': 'historyLayerVector',
          'type': 'fill',
          'source': {
              type: 'vector',
              tiles: [BASE_URL+'/api/DroneCaseinfo/QueryVectorTileByTable?z={z}&x={x}&y={y}&table=view_drone_shp_data&field=\"Id\",\"handle_status_id\",&X-Token='+localStorage.getItem("X-Token")],
              minzoom: 1,
              maxzoom: 20
                    },
            "source-layer": "view_drone_shp_data",
            // 'filter': ['==', 'isState', true],
            'paint': {
                // "fill-color": "#FE9003",
                // "fill-opacity": 0.2,
                // "fill-outline-color": "#FE9003"
                'fill-color': [
                  'interpolate',
                  ['linear'],
                  ['get', 'handle_status_id'],
                  0, '#E6A23C',
                  1, '#409EFF',
                  2, '#67C23A',
                  ],
                  'fill-opacity': 0.2
            }
        })
        // 加载图斑线 
        this.globalMap.addLayer({
          'id': 'historyLayerVector-line0',
          'type': 'line',
          'source': {
              type: 'vector',
              tiles: [BASE_URL+'/api/DroneCaseinfo/QueryVectorTileByTable?z={z}&x={x}&y={y}&table=view_drone_shp_data&field=\"Id\",\"handle_status_id\",&X-Token='+localStorage.getItem("X-Token")],
              minzoom: 1,
              maxzoom: 20
                    },
            "source-layer": "view_drone_shp_data",
            'layout': {
                  'line-join': 'round',
                  'line-cap': 'round'
              },
              'filter':['==','handle_status_id',0],
              'paint': {
                  'line-color':'#E6A23C',
                  'line-width': 4
              }
        })
        // 加载图斑线
        this.globalMap.addLayer({
          'id': 'historyLayerVector-line1',
          'type': 'line',
          'source': {
              type: 'vector',
              tiles: [BASE_URL+'/api/DroneCaseinfo/QueryVectorTileByTable?z={z}&x={x}&y={y}&table=view_drone_shp_data&field=\"Id\",\"handle_status_id\",&X-Token='+localStorage.getItem("X-Token")],
              minzoom: 1,
              maxzoom: 20
                    },
            "source-layer": "view_drone_shp_data",
            'layout': {
                  'line-join': 'round',
                  'line-cap': 'round'
              },
              'filter':['==','handle_status_id',1],
              'paint': {
                  'line-color':'#409EFF',
                  'line-width': 4
              }
        })
        // 加载图斑线
        this.globalMap.addLayer({
          'id': 'historyLayerVector-line2',
          'type': 'line',
          'source': {
              type: 'vector',
              tiles: [BASE_URL+'/api/DroneCaseinfo/QueryVectorTileByTable?z={z}&x={x}&y={y}&table=view_drone_shp_data&field=\"Id\",\"handle_status_id\",&X-Token='+localStorage.getItem("X-Token")],
              minzoom: 1,
              maxzoom: 20
                    },
            "source-layer": "view_drone_shp_data",
            'layout': {
                  'line-join': 'round',
                  'line-cap': 'round'
              },
              'filter':['==','handle_status_id',2],
              'paint': {
                  'line-color':'#67C23A',
                  'line-width': 4
              }
        })
        // 图层点击事件
        this.globalMap.on("click","historyLayerVector",(e)=>{
          if(e.features[0].properties.Id){
            // this.getFormData(e.features[0].properties.Id);
            this.caseDetailId = e.features[0].properties.Id;
            this.eventDetailVisible = true;
          }
        })
    },
    getFormData(relid){
        getMethodCommon('/DroneCaseinfo/GetCaseInfo',{id: relid}).then(res => {
            this.handleForm = res.result.info
            this.ruleFormId = res.result.info.id
            this.formsVisible = true
        })
    }
  },
  destroyed(){
    this.globalMap.remove();
    this.globalMap = null;
  }
}
</script>
<style scoped>
#map{
  width:100vw;
  height:100%;
}
.myDivIcon{

}
.diacontain{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}
.diacontainer{
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.5;
  position: absolute;
  top:0;
  left: 0;
  z-index: 99999;
}
.diabox{
  width: 600px;
  height: 820px;
  position: absolute;
  left: 50%;top: 50%;
  margin-left: -300px;
  margin-top: -455px;
  background: #fff;
  border-radius: 5px;
  z-index: 99999;
  overflow: hidden;
}
.diabox .diatitle{
  height: 35px;
  line-height: 35px;
  border-bottom: 1px solid #eee;
  padding: 0 20px;
  background: #f8f8f8;
}
.diabox .diatitle .flex{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.diabox .diatitle span{
  font-size: 14px;
  color: #333;
}
.diabox .diatitle i{
  font-size: 14px;
  color: #0a76a4;
  cursor: pointer;
}
.diabox .diacontent{
  height: 785px;
  padding: 10px;
  font-size: 14px;
  overflow: hidden;
}
#map {
  width: 100%;
  height: 100vh;
  z-index: 1;
}

.legend {
background-color: #fff;
border-radius: 3px;
bottom: 70px;
box-shadow: 0 1px 2px rgba(0,0,0,0.10);
font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
padding: 10px;
position: absolute;
right: 30px;
z-index: 1;
}
 
.legend h4 {
margin: 0 0 10px;
}
 
.legend div span {
border-radius: 50%;
display: inline-block;
height: 10px;
margin-right: 5px;
width: 10px;
}
 

</style>