<template>
  <div>
    <div v-loading="loading" class="overview-map-container">
      <div id="map"/>
    </div>
    <!--<el-amap-info-window-->
    <!--v-if="bridgeInfo"-->
    <!--:position="currentWindow.position"-->
    <!--:visible="currentWindow.visible"-->
    <!--class="info-Window">-->
    <!--<div v-if="currentWindow.windowType=='info'?true:false" class="info-window">-->
    <!--<div class="info-header">{{ bridgeInfo.devcode }} <span :style="{'font-size':'14px', 'color':bridgeInfo.onlineState=='0'?'red':'green'}">({{ bridgeInfo.onlineState=='0'?'离线':'在线' }})</span></div>-->
    <!--<div class="info-body">-->
    <!--<div>设备类型：{{ bridgeInfo.name }}</div>-->
    <!--<div>设备型号：{{ bridgeInfo.name }}</div>-->
    <!--<div>设备厂商：{{ bridgeInfo.name }}</div>-->
    <!--<div>井编号：{{ bridgeInfo.name }}</div>-->
    <!--<div v-if="bridgeInfo.deep!=0.0">井深：{{ bridgeInfo.name }}m</div>-->
    <!--<div>权属单位：{{ bridgeInfo.name }}</div>-->
    <!--<div>使用单位：{{ bridgeInfo.name }}</div>-->
    <!--<div>详细地址：{{ bridgeInfo.name }}</div>-->
    <!--&lt;!&ndash; 实时数据 &ndash;&gt;-->
    <!--<el-divider v-if="bridgeInfo.name.length>0"/>-->
    <!--&lt;!&ndash;<div v-for="realData in bridgeInfo.name" :key="bridgeInfo.name+realData.typeName">{{ realData.typeName }}: {{ realData.value }}</div>&ndash;&gt;-->
    <!--</div>-->
    <!--</div>-->
    <!--</el-amap-info-window>-->
  </div>
</template>

<script>
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'
import { getDetail, getToiletAll } from '@/api/toilet'
// 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: '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
    }
  },
  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.rows
        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:null
              var str = '<div style="font-size: 14px;padding: 6px"> ' +
                '<div style="font-size: 16px;font-weight: bold;padding-bottom: 10px">公厕信息</div>' +
                '<image src="'+ photo+'" fit="fit" style="width: 300px; height: 180px; margin:5px; padding-right: 5px"' + '</image>' +
                '<div style="padding-bottom: 10px; text-align: center">' + data.name + '</div>' +
                '<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>