<template>
  <div>
    <div v-loading="loading" class="overview-map-container">
      <leaflet-map onload="mapReady">
        <toilet-layer/>
      </leaflet-map>
      <!--<div id="map"/>-->
    </div>
  </div>
</template>

<script>
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'
import { getDetail } from '@/api/system/bridge'
import LeafletMap from '@/components/mapWindow/leafletMap'
import ToiletLayer from './toiletLayer'
export default {
  name: 'Overview',
  components: { ToiletLayer, LeafletMap },
  data() {
    return {
      baselayer: [],
      url: require('../../assets/global_images/location_green.png'),
      bridgeList: [
        { id: 1, name: '永胜桥', lat: 27.763248, lng: 116.043450 },
        { id: 2, name: '黄洲桥', lat: 27.760096, lng: 116.053659 },
        { id: 3, name: '光明桥', lat: 27.767046, lng: 116.058659 }
      ],
      bridgeInfo: {
        id: '',
        name: '',
        typeName: '', // 桥型名称
        bridgeCode: '', // 柱号
        roadName: '', // 道路名称
        height: '', // 高度
        length: '', // 长度
        buildTime: '', // 开建时间
        position: '',
        description: '',
        status: '',
        statusName: '',
        photo: '',
        onlineState: ''
      },
      currentWindow: {
        visible: false, // 窗体显示与否
        position: [this.$store.getters.lng, this.$store.getters.lat],
        windowType: 'info' // 窗体类型：详情info或报警alarm
      }, // 当前窗体属性
      loading: false,
      icon: 'cross',
      map: null,
    }
  },
  mounted() {
  },
  methods: {
    // 地图加载完毕
    mapReady (map) {
      this.map = map
    },
    initMap() {
      const map = L.map('map', {
        minZoom: 2,
        maxZoom: 30,
        center: [27.76062, 116.05071],
        zoom: 16,
        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/location_green.png'),
        iconSize: [30, 30]
      })

      for (var i = 0; i < 3; i++) {
        var item = L.marker([this.bridgeList[i].lat, this.bridgeList[i].lng], {
          icon: Icon,
          id: this.bridgeList[i].id
        }).addTo(this.map)
        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
            console.log(response.data)
            var photo = data.photo ? 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.description	+ '</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.typeName	 + '</div>' +
              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">柱号：</label>' + data.bridgeCode + '</div>' +
              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">道路名称：</label>' + data.roadName + '</div>' +
              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">高度：</label>' + data.high + '</div>' +
              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">长度：</label>' + data.length + '</div>' +
              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">开建时间：</label>' + data.buildTime.substr(0, 10) + '</div>' +
              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">通车时间：</label>' + data.openTime.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 - 120px);
  }
// 查询框
.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>