<template>
  <div>
    <div id="map" class="leaflet_container" style="background-color: white">
      <div style="margin-top: 20px;position: absolute;right:50px;z-index: 100000">
        <el-checkbox-group v-model="selectParts" style=" width: 130px">
          <el-checkbox key="底图" label="底图" border style="margin-left: 10px;width: 130px;background-color: white" @change="mapChange"/>
          <el-checkbox key="网格" label="网格" border style="margin-left: 10px;width: 130px;background-color: white" @change="gridChange"/>
          <el-checkbox v-for="parts in partsOptions" :label="parts" :key="parts" border style="width: 130px;background-color: white" @change="partsChange">{{ parts }}</el-checkbox>
        </el-checkbox-group>
      </div>
    </div>
  </div>
</template>
<script>
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'
import { getServerList } from '@/api/server'
var esri = require('esri-leaflet')
const video = [23]
const allParts = [23]
export default {
  name: 'Overview',
  data() {
    return {
      listLoading: false, // 加载动画
      TianDiTu: {
        Normal: {
          Map: 'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
          Annotion: 'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8'
        },
        Satellite: {
          Map: 'https://t{s}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
          Annotion: 'https://t{s}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8'
        },
        Terrain: {
          Map: 'https://t{s}.tianditu.gov.cn/ter_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
          Annotion: 'https://t{s}.tianditu.gov.cn/cta_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cta&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8'
        },
        Subdomains: ['0', '1', '2', '3', '4', '5', '6', '7']
      },
      map: null,
      grid: null, // 网格
      showtable: true,
      partsOptions: ['视频监控', '环境监测'],
      selectParts: ['底图', '网格', '视频监控', '环境监测'],
      listQuery: {
        offset: 1,
        limit: 15
      }, // 筛选条件
      list: [],
      maps: [],
      parts: [],
      baseUrl: '',
      partsUrl: '',
      mapUrl: '',
      multipleSelection: [], // 多选选中项
      iconlist: [],
      baselayer: [],
      caselist: [], // 路灯（map）
      statisticNum: {
        work: 0,
        todayCase: 0,
        allCase: 0,
        merchant: 0,
        parts: 0
      },
      status: {
        register: 0,
        dispatch: 0,
        disposal: 0,
        disposaling: 0
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    mapChange(val) {
      if (!val) { // 隐藏底图
        for (let i = 0; i < this.maps.length; i++) {
          this.map.removeLayer(this.maps[i])
        }
      } else {
        for (let i = 0; i < this.maps.length; i++) {
          this.map.addLayer(this.maps[i])
        }
      }
    },
    gridChange(val) {
      if (!val) { // 隐藏底图
        this.map.removeLayer(this.grid)
      } else {
        this.map.addLayer(this.grid)
      }
    },
    partsChange(val, item) {
      // console.log(val, item.target.defaultValue)
      // var selectItem
      // switch (item.target.defaultValue) {
      //   case '视频监控':
      //     selectItem = video
      //     break
      //   default:
      //     selectItem = []
      //     break
      // }
      // if (!val) { // 隐藏底图
      //   for (let i = 0; i < selectItem.length; i++) {
      //     this.map.removeLayer(this.parts[selectItem[i] - 1])
      //   }
      // } else {
      //   for (let i = 0; i < selectItem.length; i++) {
      //     this.map.addLayer(this.parts[selectItem[i] - 1])
      //   }
      // }
    },
    tableclick() {
      this.showtable = !this.showtable
    },
    removemarkers() {
      for (var i = 0; i < this.iconlist.length; i++) {
        this.map.removeLayer(this.iconlist[i])
      }
      var base = this.baselayer
      this.map.eachLayer(function(layer) {
        if (layer !== base[0] && layer !== base[1]) {
          layer.remove()
        }
      })
    },
    setZoom(points) {
      if (points.length > 0) {
        var maxLng = points[0][1]
        var minLng = points[0][1]
        var maxLat = points[0][0]
        var minLat = points[0][0]
        var res
        for (var i = points.length - 1; i >= 0; i--) {
          res = points[i]
          if (res[1] > maxLng) maxLng = res[1]
          if (res[1] < minLng) minLng = res[1]
          if (res[0] > maxLat) maxLat = res[0]
          if (res[0] < minLat) minLat = res[0]
        }
        var cenLng = (parseFloat(maxLng) + parseFloat(minLng)) / 2
        var cenLat = (parseFloat(maxLat) + parseFloat(minLat)) / 2
        var zoom = this.getZoom(maxLng, minLng, maxLat, minLat)
        this.map.setView({ lat: cenLat, lng: cenLng }, zoom)
      } else {
        // 没有坐标，显示全中国
        this.map.setView({ lat: 103.388611, lng: 35.563611 }, 5)
      }
    },
    getZoom(maxLng, minLng, maxLat, minLat) {
      var zoom = ['50', '100', '200', '500', '1000', '2000', '5000', '10000', '20000', '25000', '50000', '100000', '200000', '500000', '1000000', '2000000', '5000000']// 级别18到3。
      var latlng = L.latLng(maxLat, maxLng)
      var distance = latlng.distanceTo(L.latLng(minLat, minLng))
      // var distance = pointA.distanceTo(pointB)// 获取两点距离,保留小数点后两位
      for (var i = 0, zoomLen = zoom.length; i < zoomLen; i++) {
        if (zoom[i] - distance > 0) {
          return 18 - i + 2 // 之所以会多2，是因为地图范围常常是比例尺距离的10倍以上。所以级别会增加3。
        }
      }
      return 5
    },
    async init() {
      const res = await getServerList(this.listQuery)
      this.list = res.data.rows
      for (var i = 0; i < this.list.length; i++) {
        if (this.list[i].name === 'GIS地图') {
          this.baseUrl = this.list[i].url
        } else if (this.list[i].name === '部件分层URL') {
          this.partsUrl = this.list[i].url
        } else if (this.list[i].name === '二维地图URL') {
          this.mapUrl = this.list[i].url
        }
      }
      const map = L.map('map', {
        minZoom: 2,
        // maxZoom: 18,
        center: [27.755, 116.08],
        zoom: 18,
        zoomControl: false,
        attributionControl: false,
        crs: L.CRS.EPSG3857
      })
      map.doubleClickZoom.disable()
      this.map = map // data上需要挂载
      window.map = map
      // 底图
      for (i = 0; i <= 20; i++) {
        const item = { url: this.baseUrl + this.mapUrl + '/' + i.toString() }
        this.maps.push(esri.featureLayer(item).addTo(map))
      }
      // 网格
      var item = { url: this.baseUrl + '/arcgis/rest/services/crdt/MapServer/13' }
      this.grid = esri.featureLayer(item).addTo(map)

      // 部件
      console.log(this.baseUrl + this.partsUrl)
      for (i = 0; i < allParts.length; i++) {
        item = { url: this.baseUrl + this.partsUrl + '/' + allParts[i] }
        var layer = esri.featureLayer(item).addTo(map)
        console.log(item)
        layer.on('click', function(e) {
          console.log(e)
          console.log(e.layer.feature.properties)
          var str = '<div style="font-size: 14px;width:200px;">' +
            '<div style="font-size: 14px;margin-bottom: 8px;">' +
            '<div>' + e.layer.feature.properties.objectid + '</div></div>' +
            '<div style="padding-bottom: 4px"><col style="padding-right: 5px">大类：</col>' + e.layer.feature.properties.dl	 + '</div>' +
            '<div style="padding-bottom: 4px"><col style="padding-right: 5px">小类：</col>' + e.layer.feature.properties.objname	 + '</div>' +
            '<div style="padding-bottom: 4px"><col style="padding-right: 5px">设备状态：</col>' + e.layer.feature.properties.objstate 	 + '</div>' +
            '<div style="padding-bottom: 4px"><col style="padding-right: 5px">权属单位：</col>' + e.layer.feature.properties.deptname1 + '</div>' +
            '<div style="padding-bottom: 4px"><col style="padding-right: 5px">安装日期：</col>' + e.layer.feature.properties.ordate + '</div>' +
            '<div style="padding-bottom: 4px"><col style="padding-right: 5px">数据来源：</col>' + e.layer.feature.properties.datasource + '</div>' +
            '<button style="background-color: #409eff;border-color: #409eff;margin-left: 150px;color: white;padding: 5px 8px;font-size: 12px;border-radius: 4px" id="btntrail">预览</button>' +
            '<div>'
          var popup = L.popup().setContent(str)
          e.layer.dragging._marker.bindPopup(popup, { minWidth: 200 }).openPopup()
          // var id = e.layer.feature.properties.FID
        })
        this.parts.push(layer)
      }
      this.map.setZoom(15)
    },
    // 多选触发方法
    handleSelectionChange(val) {
      this.multipleSelection = val
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  $tableTitleHeight:35px;
  .leaflet_container{
    width: 100%;
    height: 83vh;
  }
  .top_title{
    height: 40px;
    font-size: 18px;
    border: 1px solid #b5b5b5;
    padding-top: 10px;
  }
  .title{
    height: 40px;
    width: 320px;
    padding-top: 10px;
    padding-left: 5px;
    z-index: 100000;
    background-color: rgba(255, 255, 255, 0.91);
  }
  .titletext{
    text-align: center;
    font-size: 15px;
  }
  .titlenumtext{
    text-align: center;
    font-size: 19px;
  }
  .list{
    text-align:center;
    width: 500px;
    height: 40px;
    z-index: 10000;
    position: absolute;
    right:20px;
    top:20px;
  }
  .btn_bottom{
    text-align:center;
    width: 100%;
    height:70px;
    z-index: 1000;
    position: fixed; bottom: 0; left: 0;right:0;
  }
  .table-name{
    position:relative;
    width: 100px;
    top:20px;
    margin:-10px auto; //外面的div高度的一半
    z-index: 100001;
  }
  .table-title{
    background-color:rgba(243, 243, 243, 1);
    height: $tableTitleHeight;
  .title-header{
    line-height:$tableTitleHeight;
    color: #606266;
    font-size: 15px;
  i{
    margin-left: 5px;
    margin-right: 5px;
  }
  }
  }
</style>