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

<script>
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'
import { getDetail, getToiletAll } from '@/api/toilet'

export default {
  name: 'Overview',
  data() {
    return {
      baseUrl: this.baseConfig.baseUrl + '/static/',
      baselayer: [],
      url: require('@/assets/global_images/location_green.png'),
      toiletList: [],
      currentWindow: {
        visible: false, // 窗体显示与否
        position: [this.$store.getters.lng, this.$store.getters.lat],
        windowType: 'info' // 窗体类型：详情info或报警alarm
      }, // 当前窗体属性
      loading: false,
      icon: 'cross',
      map: null,
      defaultPhoto: require('@/assets/global_images/toiletPhoto.png'), // 默认图片路径
    }
  },
  mounted() {
    this.initMap()
  },
  created() {
    // this.initMap()
  },
  methods: {
    initMap() {
      const map = L.map('map', {
        minZoom: 2,
        maxZoom: 30,
        center: [27.76062, 116.05071],
        zoom: 14,
        zoomControl: false,
        attributionControl: false,
        crs: L.CRS.EPSG3857
      })
      map.doubleClickZoom.disable()
      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',
        { 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',
        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
      ).addTo(map))
      map.on('click', function(e){
        console.log(e)
        // var marker = new L.marker(e.latlng).addTo(map);
      })
      var Icon = L.icon({
        iconUrl: require('@/assets/global_images/toilet-position.png'),
        iconSize: [30, 30]
      })

      getToiletAll().then(response => {
        var _this = this
        this.toiletList = response.data
        for (var i=0; i<this.toiletList.length; i++) {
          var item = L.marker([this.toiletList[i].lat, this.toiletList[i].lng], {
            icon: Icon,
            id: this.toiletList[i].id
          }).addTo(this.map)
          var self = this
          item.on('click', function(e) {
            if (e.target.dragging._marker._popup) {
              e.target.dragging._marker.unbindPopup()
            }
            getDetail(e.target.options.id).then(response => {
              var data = response.data.toiletDto
              var photo = data.photo ? _this.baseUrl + data.photo : _this.defaultPhoto
              var str = '<div style="font-size: 14px;padding: 6px"> ' +
                '<div style="font-size: 16px;font-weight: bold;padding-bottom: 10px">公厕信息</div>' +
                '<img src="'+ photo +'" fit="contain" style="width: 279px; height: 180px; margin:5px;"' + '</img>' +
                '<div style="padding-bottom: 2px"><label style="padding-right: 5px">公厕名称：</label>' + data.name	+ '</div>' +
                '<div style="padding-bottom: 2px"><label style="padding-right: 5px">责任人：</label>' + data.responsiblePerson	 + '</div>' +
                '<div style="padding-bottom: 2px"><label style="padding-right: 5px">责任人电话：</label>' + data.responsiblePersonTel + '</div>' +
                '<div style="padding-bottom: 2px"><label style="padding-right: 5px">占地面积：</label>' + data.area + '</div>' +
                '<div style="padding-bottom: 2px"><label style="padding-right: 5px">位置：</label>' + data.position + '</div>' +
                '<div style="padding-bottom: 2px"><label style="padding-right: 5px">建设单位：</label>' + data.owner + '</div>' +
                '<div style="padding-bottom: 2px"><label style="padding-right: 5px">建设时间：</label>' + data.createTime.substr(0,10) + '</div>' +
                '</div>'
              var popup = L.popup().setContent(str)
              e.target.dragging._marker.bindPopup(popup).openPopup()
              e.target.dragging._marker.openPopup()
            })
          })
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  #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;
  }
}
  .infoWindowClass{
    background-color: pink;
  }
// 报警列表
.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>