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

<script>
import L from 'leaflet'
export default {
  name: 'BaseSource',
  data() {
    return {
      loading: false,
      icon: 'static/images/well/0100.png',
      map: null,
      baselayer: [],
      msg: ''
    }
  },
  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      const map = L.map(this.$refs.map, {
        minZoom: 3,
        maxZoom: 18,
        // center: [27.75962, 116.06021],
        center: this.baseConfig.center,
        zoom: this.baseConfig.zoom,
        zoomControl: false,
        attributionControl: false,
        crs: L.CRS.EPSG3857
      })
      this.map = map // data上需要挂载
      window.map = map
      this.baselayer.push(L.tileLayer(
        // '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',
        this.baseConfig.mapUrl,
        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
      ).addTo(map))
      this.baselayer.push(L.tileLayer(
        // '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',
        this.baseConfig.labelUrl,
        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
      ).addTo(map))
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
  .baseMap {
    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>