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

<script>
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'
import { getDetail } from '@/api/system/bridge'

export default {
  name: 'Overview',
  data() {
    return {
      baseLayer: [],
      bridgeList: [],
      loading: false,
      map: null,
    }
  },
  mounted() {
    this.bridgeList = this.baseConfig.bridges
    this.initMap()
  },
  methods: {
    initMap() {
      const map = L.map('map', {
        minZoom: 15,
        maxZoom: 18,
        center: this.baseConfig.center,
        zoom: 15,
        zoomControl: false,
        attributionControl: false,
        crs: L.CRS.EPSG3857
      })
      map.doubleClickZoom.disable()
      this.map = map // data上需要挂载
      window.map = map
      this.baseLayer.push(L.tileLayer(this.baseConfig.mapUrl).addTo(map))
      this.baseLayer.push(L.tileLayer(this.baseConfig.labelUrl).addTo(map))

      const Icon = L.icon({
        iconUrl: require('@/assets/global_images/location_green.png'),
        iconSize: [32, 32],
        iconAnchor: [16, 32],
        popupAnchor: [0, -32]
      })

      for (let i = 0; i < this.bridgeList.length; i++) {
        const item = L.marker([this.bridgeList[i].lat, this.bridgeList[i].lng], {
          icon: Icon,
          id: this.bridgeList[i].id
        }).addTo(this.map)

        getDetail(this.bridgeList[i].id).then(response => {
          if (response.code === 200) {
            const data = response.data

            let popupStr = '<div class="popup-div">' +
              '<div class="popup-title">' + data.name + '</div>';

            if (data.photo !== '') {
              popupStr += '<div><img src="' + data.photo + '" fit="fit" style="height: 180px; margin:5px; padding-right: 5px"' + '</image></div>'
            }

            popupStr +=
              '<div class="popup-item"><label style="padding-right: 5px">桥梁位置：</label>' + data.position	 + '</div>' +
              '<div class="popup-item"><label style="padding-right: 5px">桥高（米）：</label>' + data.high + '</div>' +
              '<div class="popup-item"><label style="padding-right: 5px">桥长（米）：</label>' + data.length + '</div>' +
              '<div class="popup-item"><label style="padding-right: 5px">开建时间：</label>' + data.buildTime.substr(0, 10) + '</div>' +
              '<div class="popup-item"><label style="padding-right: 5px">通车时间：</label>' + data.openTime.substr(0, 10) + '</div>' +
              '<div class="popup-item"><label style="padding-right: 5px">简介：</label>' + data.description	+ '</div>' +
              '</div>'

            item.bindPopup(popupStr)
          }
        })
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .baseMap {
    width: 100%;
    height: calc(100vh - 155px);
  }

  .infoWindowClass{
    background-color: pink;
  }

  // 地图
  .overview-map-container {
    width: 100%;
  }

  .el-divider--horizontal {
    margin: 5px 0;
  }
</style>

<style>
  .leaflet-container a.leaflet-popup-close-button {
    top: 5px; /* 修改弹窗关闭按钮样式 */
    right: 10px; /* 修改弹窗关闭按钮样式 */
  }

  .leaflet-popup-content .popup-div {
    font-size: 15px;
    padding: 6px;
  }

  .leaflet-popup-content .popup-title {
    font-weight: bold;
    font-size: 18px;
  }

  .leaflet-popup-content .dashed-line {
    border-bottom: 1px dashed #dddddd;
    margin: 10px -10px;
  }

  .leaflet-popup-content .popup-item {
    padding-bottom: 6px;
  }

  .leaflet-popup-content .popup-item label {
    font-weight: bold;
    padding-right: 15px;
  }

  .leaflet-popup-content .popup-subitem {
    padding-bottom: 6px;
    font-size: 12px;
  }
</style>