<!--
 * @Description: 地图视图
 * @Author: 王晓颖
 * @Date: 2021-07-15 19:23:19
 -->
<template>
  <div style="width:100%;height:100%">
    <leaflet-map :center="center" :zooms="zooms" :zoom="zoom" :layers="layers">
      <video-layer :show="currentLayer=='video'"/>
      <lamp-layer :show="currentLayer=='lamp'"/>
<!--      <alarm-layer :show="currentLayer=='alarm'"/>-->
      <alarm-layer :show="currentLayer=='pipe'"/>
      <pipe-layer :show="currentLayer=='pipe'"/>
    </leaflet-map>
    <!--地图切换工具-->
    <div class="map-tools">
      <dv-border-box-7 :color="['#006699','#006699']" backgroundColor="#003333">
        <div class="tool-box">
          <div class="map-tool" :class="{'map-choose':currentMap=='矢量地图'}" @click="changeView('vector')">
            <img :src="require('@/assets/img/map/mapBlu.png')" class="tool-img"/>
            <div class="tool-text">矢量地图</div>
          </div>
          <div class="map-tool" :class="{'map-choose':currentMap=='影像地图'}" @click="changeView('satellite')">
            <img :src="require('@/assets/img/map/mapGray.png')" class="tool-img"/>
            <div class="tool-text">影像地图</div>
          </div>
        </div>
      </dv-border-box-7>
    </div>
    <!--功能选区-->
    <div class="map-functions">
<!--      <div class="function-div" @click="currentLayer='lamp'">-->
<!--        <div class="function">-->
<!--          <img :src="require('@/assets/img/map/little-circle.png')" class="img"/>-->
<!--          <a-icon type="bulb" theme="filled" :style="{fontSize: '0.6rem'}" class="icon"/>-->
<!--        </div>-->
<!--        <div class="function-text">路灯</div>-->
<!--      </div>-->
      <div class="function-div" @click="currentLayer='video'">
        <div class="function">
          <img :src="require('@/assets/img/map/little-circle.png')" class="img"/>
          <a-icon type="camera" theme="filled" :style="{fontSize: '0.6rem'}" class="icon"/>
        </div>
        <div class="function-text">摄像头</div>
      </div>
      <div class="function-div" @click="currentLayer='pipe'">
        <div class="function">
          <img :src="require('@/assets/img/map/little-circle.png')" class="img"/>
          <a-icon type="dashboard" theme="filled" :style="{fontSize: '0.6rem'}" class="icon"/>
        </div>
        <div class="function-text">管线运行</div>
      </div>
    </div>
  </div>
</template>

<script>
  import LeafletMap from "@/components/leafletMap/leafletMap";
  import VideoLayer from "./videoLayer";
  import AlarmLayer from "./alarmLayer";
  import PipeLayer from "./pipeLayer";
  import LampLayer from "./lampLayer";
  export default {
    name: "mapView",
    components: {LampLayer, PipeLayer, AlarmLayer, VideoLayer, LeafletMap},
    data(){
      return {
        center:this.baseConfig.center,
        currentLayer:'pipe',
        zooms:[13,18],
        zoom:this.baseConfig.zoom,
        currentMap:'影像地图',
        layers:[
          {name:'tdtMap', show:false, url:this.baseConfig.mapUrl, zooms:[13,18]},
          {name:'tdtLabel', show:false, url:this.baseConfig.labelUrl, zooms:[13,18]},
          {name:'satellite', show:true, url:this.baseConfig.satelliteUrl, zooms:[13,18]},
          {name:'satelliteLabel', show:true, url:this.baseConfig.satelliteLabelUrl, zooms:[13,18]}
        ],
      }
    },
    methods:{
      changeView(viewType){
        if(viewType=='satellite'){
          this.currentMap='影像地图'
          this.layers[0].show = false
          this.layers[1].show = false
          this.layers[2].show = true
          this.layers[3].show = true
        }else if(viewType=='vector'){
          this.currentMap='矢量地图'
          this.layers[0].show = true
          this.layers[1].show = true
          this.layers[2].show = false
          this.layers[3].show = false
        }
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.map-tools{
  position: absolute;
  bottom:1rem;
  right: 1rem;
  z-index: 500;
  padding:0.1rem;
  .tool-box{
    padding:0.1rem 0.2rem 0rem 0.2rem;
    display: flex;
    .map-tool{
      margin:0.2rem 0.1rem;
      .tool-img{
        width:1.3rem;
        height:1.3rem;
        border-radius: 5px;
        margin-bottom: 0.1rem;
      }
      .tool-text{
        font-size:0.3rem;
        line-height: 1.5;
        color: #99ccff
      }
    }
    .map-tool:hover{
      cursor: pointer;
      .tool-img{
        border: solid 1px #1ed3ff;
        border-radius: 5px;
      }
      .tool-text{
        color: #ffffff
      }
    }
    .map-choose{
      .tool-img{
        border: solid 1px #1ed3ff;
        border-radius: 5px;
      }
      .tool-text{
        color: #1ed3ff
      }
    }

  }

}
.map-functions{
  position: absolute;
  z-index: 500;
  bottom:0.5rem;
  left: 50%;
  transform: translateX( -50% );
  display: flex;
  .function-div{
    display: flex;
    flex-direction: column;
    align-items: center;
    .function{
      position: relative;
      width: 1.5rem;
      height: 1.5rem;
      .img{
        position: absolute;
        width: 1.5rem;
        height: 1.5rem;
      }
      .icon{
        position: absolute;
        left: 50%;
        top: 50%;
        color: #ffffff;
        transform: translate(-50%, -50%);
      }
    }
    .function-text{
      font-size:0.3rem;
      color: #ffffff;
      line-height: 1.5;
    }
    &:hover{
      cursor: pointer;
      .icon{
        color: #79aaff !important;
      }
    }
  }

}
</style>