<template>
  <div>
    <div v-loading="loading" class="overview-map-container">
      <!--地图-->
      <!--<div id="container" class="map" tabindex="0"/>-->
      <div id="map"></div>
    </div>
  </div>
</template>

<script>
import _ from 'lodash'
// import icon from '/static/images/well/0100.png'
// import { getAllMarker } from '@/api/overview'
// import { getMarkerInfo } from '@/api/marker'
// import { lazyAMapApiLoaderInstance } from 'vue-amap'

export default {
  name: 'OverviewLeaflet',
  data () {
    return {
      loading: false,
      icon: 'static/images/well/0100.png',
      map: null,
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      let map = L.map("map", {
        minZoom: 3,
        maxZoom: 14,
        center: [39.550339, 116.114129],
        zoom: 12,
        zoomControl: false,
        attributionControl: false,
        crs: L.CRS.EPSG3857
      });
      this.map = map　　　　//data上需要挂载
      window.map = map
      L.tileLayer(
        "http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}"
      ).addTo(map)
      let greenIcon = L.icon({
        iconUrl: this.icon,
        // shadowUrl: iconShadow,
        iconSize:     [30, 50], // size of the icon
        // shadowSize:   [50, 64], // size of the shadow
        iconAnchor:   [15, 50], // point of the icon which will correspond to marker's location
        // shadowAnchor: [15, 64],  // the same for the shadow
        popupAnchor:  [0, -40] // point from which the popup should open relative to the iconAnchor
      })
      var marker = L.marker([39.550339, 116.114129],{
        icon: greenIcon
      }).addTo(map).bindPopup("I am a green leaf.")


    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
  #map {
    width: 100%;
    height: calc(100vh);
  }
// 查询框
.map-search-div{
  position: absolute;
  z-index: 100;
  padding: 5px 20px;
  background-color: rgba(244, 244, 244, 0.9);
  /*left: 90px;*/
  .el-form-item{
    margin-bottom: 0px;
  }
}
// 报警列表
.map-alarm-div{
  position: absolute;
  z-index: 100;
  background-color: rgba(255, 234, 241,0.8);
  top: 60px;
  left: 10px;
  .map-alarm-div-header{
    line-height: 40px;
    width: 504px;
    padding-left: 10px;
    .icon-right{
      position: absolute;
      right: 15px;
    }
    .icon-right:hover{
      color: #409EFF;
      cursor: pointer;
    }
  }
  .el-scrollbar {
    /*height: 200px;*/
    width: 100%;
  }
  .moredatascollor{
    height: 200px;
  }
  .el-scrollbar__wrap {
    overflow-y: auto;
    overflow-x: hidden;
    margin-bottom: 0px !important;
}

.el-table th{
/*background-color: rgba(255, 229, 230, 0.8);*/
    padding: 7px 0px;
  }
  .el-table td{
    /*background-color: rgba(255, 234, 241, 0.8);*/
    padding: 5px 0px;
    /*line-height: 1;*/
  }
  // .el-table td:hover{
    /*background-color: rgba(255, 234, 241, 0.8);*/
  // }
  .transition-box {
    margin-bottom: 10px;
    width: 200px;
    height: 100px;
    border-radius: 4px;
    background-color: #409EFF;
    text-align: center;
    color: #fff;
    padding: 40px 20px;
    box-sizing: border-box;
    margin-right: 20px;
  }
}
// 刷新框
.refresh-div{
  position: absolute;
  right: 10px;
  top: 7px;
  z-index: 100;
  padding: 10px;
  color: #ce8b74;
  font-size: 14px;
  background-color: rgba(244, 233, 230, 1.0);
  .font-red{
    color: red;
    font-weight: bold;
  }
  .el-icon-refresh:hover{
    color: red;
    font-weight: bold;
    cursor: pointer;
  }
}
// 地图
.overview-map-container{
  width: 100%;
  padding: 5px;
  .map-demo{
    width: 100%;
    height: calc(100vh - 78px);
    .svg-icon{
      width: 20px;
      height: 20px;
    }
    .alarm-icon{
      width:30px;
      height: 30px;
    }
    .nomal-info-window{
      background-color: pink;
    }
    .info-window{
      max-width: 250px;
      /*background-color: lightcyan;*/
      .info-header{
        padding: 10px 10px 5px 10px;
        line-height: 30px;
        font-weight: bold;
        /*background-color: #eaf4ff;*/
      }
      .info-body{
        padding: 5px 10px 10px 10px;
        line-height: 23px;
        font-size: 14px;
      }
    }
    .alarm-window{
      max-width: 250px;
      /*background-color: #ffeaf1;*/
      .alarm-header {
        padding: 10px 10px 5px 10px;
        line-height: 30px;
        color: red;
        font-weight: bold;
        /*background-color: #ffecec;*/
      }
      .alarm-body{
        padding: 5px 10px 10px 10px;
        line-height: 23px;
        font-size: 14px;
        .alarm-red{
          color: #ff0000;
        }
      }
    }
  }
}
  .el-divider--horizontal{
    margin: 5px 0;
  }
</style>