<template>
  <div>
    <div v-loading="loading" class="overview-map-container">
      <div id="map"/>
    </div>
  </div>
</template>

<script>
import * as L from 'leaflet'
export default {
  name: 'BaseSource',
  data() {
    return {
      loading: false,
      icon: 'static/images/well/0100.png',
      map: null,
      msg: ''
    }
  },
  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      const 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=8&x={x}&y={y}&z={z}'
        'http://t1.tianditu.com/vec_c/wmts?layer=vec&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=adbdd8e08c292f6cb4e3f0289f7d0447'
      ).addTo(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)
      // const 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>