<template>
  <app-container>
    <div class="map-container">
      <leaflet-map onload="mapReady" :satellite="false">
        <device-layer :show="true"/>
      </leaflet-map>
    </div>
  </app-container>
</template>
<script>

import { getServerList } from '@/api/server'
import LeafletMap from "../../components/mapWindow/leafletMap";
import DeviceLayer from "./component/deviceLayer";

export default {
  name: 'Overview',
  components: {DeviceLayer, LeafletMap},
  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: {
    // 地图加载完毕
    mapReady (map) {
      this.map = map
    },
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .map-container{
    width: 100%;
    height: calc(100vh - 158px);
  }
</style>