<!--
 * @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"/>
    <!--地图切换工具-->
    <div class="map-tools">
      <dv-border-box-7 :color="['#006699','#006699']" backgroundColor="#003333">
        <div class="tool-box">
          <div class="map-tool">
            <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=='影像地图'}">
            <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">
        <div class="function">
          <img :src="require('@/assets/img/map/little-circle.png')" class="img"/>
          <a-icon type="bulb" theme="filled" :style="{fontSize: '0.6rem', color: '#ffffff'}" class="icon"/>
        </div>
        <div class="function-text">路灯</div>
      </div>
      <div class="function-div">
        <div class="function">
          <img :src="require('@/assets/img/map/little-circle.png')" class="img"/>
          <a-icon type="camera" theme="filled" :style="{fontSize: '0.6rem', color: '#ffffff'}" class="icon"/>
        </div>
        <div class="function-text">摄像头</div>
      </div>
      <div class="function-div">
        <div class="function">
          <img :src="require('@/assets/img/map/little-circle.png')" class="img"/>
          <a-icon type="dashboard" theme="filled" :style="{fontSize: '0.6rem', color: '#ffffff'}" class="icon"/>
        </div>
        <div class="function-text">管线运行</div>
      </div>
    </div>
  </div>
</template>

<script>
  import LeafletMap from "@/components/leafletMap/leafletMap";
  export default {
    name: "mapView",
    components: {LeafletMap},
    data(){
      return {
        center:this.baseConfig.center,
        zooms:[13,20],
        zoom:14,
        currentMap:'影像地图',
        layers:[
          // {name:'tdtMap', show:true, url:this.baseConfig.mapUrl, zooms:[13,20]},
          {name:'tdtLabel', show:true, url:this.baseConfig.labelUrl, zooms:[13,20]},
          {name:'satellite', show:true, url:this.baseConfig.satelliteUrl, zooms:[13,20]}
        ]
      }
    }
  }
</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-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%;
        transform: translate(-50%, -50%);
      }
    }
    .function-text{
      font-size:0.3rem;
      color: #ffffff;
      line-height: 1.5;
    }
  }

}
</style>