<!--大坝-->
<template>
  <div class="comp-container dam-container">
    <div class="search-container">
      <el-row class="search-row">
        <el-tag size="mini" class="label" effect="dark">
          大坝级别
        </el-tag>
        <el-checkbox-group v-model="form.damGrad">
          <el-checkbox
            class="check-item"
            v-for="item in dbjb"
            :key="item.value"
            :label="item.value"
            >{{ item.name }}
          </el-checkbox>
        </el-checkbox-group>
      </el-row>
      <el-row class="search-row">
        <el-tag size="mini" class="label" effect="dark">
          是否主坝
        </el-tag>
        <el-checkbox-group v-model="form.ifMainDam">
          <el-checkbox class="check-item" label="1">是 </el-checkbox>
          <el-checkbox class="check-item" label="0">否 </el-checkbox>
        </el-checkbox-group>
      </el-row>
    </div>
    <el-table
      :data="filterData"
      height="calc(100% - 114px)"
      stripe
      border
      size="mini"
      highlight-current-row
      @row-click="rowClick"
    >
      <el-table-column
        label="名称"
        prop="damName"
        align="center"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        label="级别"
        prop="damGrad"
        align="center"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        label="是否主坝"
        prop="ifMainDam"
        align="center"
        show-overflow-tooltip
      ></el-table-column>
    </el-table>
    <DamModel ref="DamModel" v-show="showInfo"></DamModel>
  </div>
</template>

<script>
import DamModel from './module/DamModel.vue'
import dictUtils from '@/components/dict/DictSelectUtils.js'
export default {
  name: 'Dam',
  components: {DamModel},
  data() {
    return {
      form: {
        damGrad: [],
        ifMainDam: []
      },
      iconUrl: require('./../../../../assets/img/gis_dam.png'),
      filterData: [],
      originData: [
        {
          damName: '大坝1',
          damGrad: '1 级',
          ifMainDam: '是',
          startLong: '106.463601',
          startLat: '29.729001'
        },
        {
          damName: '大坝2',
          damGrad: '2 级',
          ifMainDam: '否',
          startLong: '106.450798',
          startLat: '29.83281'
        },
        {
          damName: '大坝3',
          damGrad: '3 级',
          ifMainDam: '是',
          startLong: '106.435563',
          startLat: '29.815159'
        },
        {
          damName: '大坝4',
          damGrad: '4 级',
          ifMainDam: '是',
          startLong: '106.388247',
          startLat: '29.870726'
        },
        {
          damName: '大坝5',
          damGrad: '1 级',
          ifMainDam: '是',
          startLong: '106.656255',
          startLat: '29.999493'
        }
      ],
      showInfo: false,
      sectionMarker: null, // 标记点
      label: null, // 标记点名称
      dbjb: [],
      gcdb: []
    }
  },
  inject: ['mapData'],
  created() {
    let mapData = this.mapData()
    this.filterData = this.originData
    this.L = mapData.L
    this.map = mapData.map
    this.baseMapOverlay = mapData.baseMapOverlay
    this.dbjb = dictUtils.getDictItemsFromCache('dbjb')
    this.gcdb = dictUtils.getDictItemsFromCache('gcdb')
  },
  mounted() {
    this.$nextTick(() => {
      this.initMarkers()
    })
  },
  beforeDestroy() {
    this.clearMarkers()
  },
  methods: {
    clearMarkers() {
      this.map.clearLayers()
      this.map.addLayer(this.baseMapOverlay)
      this.baseMapOverlay.bringToBack()
      this.map.closePopup()
      this.showInfo = false
    },
    initMarkers() {
      this.filterData.forEach(item => {
        let latlng = new L.LatLng(item.startLat, item.startLong)
        this.drwaMarkers(latlng, item.damName)
      })
    },
    drwaMarkers(latlng, name) {
      // 图片
      let icon = new L.icon({
        iconUrl: this.iconUrl,
        iconSize: new L.point(24, 24),
        iconAnchor: new L.point(12, 20)
      })
      // 标点
      const sectionMarker = new L.marker(latlng, {icon})
      this.showInfo = true
      // label
      // const label = new T.Label({
      //     text: name,
      //     position: latlng,
      //     offset: new this.T.Point(-9, 18),
      // })
      const label = new L.tooltip({
        permanent: true,
        direction: 'auto',
        sticky: false,
        offset: new L.point(-9, 18),
        opacity: 0.6
      })
      label.setLatLng(latlng)
      label.setContent(name)
      let infoWin = this.infoWindow()
      sectionMarker.addEventListener('click', () => {
        sectionMarker.openInfoWindow(infoWin)
      }) // 将标注添加到地图中
      this.map.addLayer(sectionMarker)
      this.map.addLayer(label)
    },
    rowClick(row) {
      this.clearMarkers()
      this.createdLngLat(row)
    },
    changeSearch(val) {
      if (!val) {
        this.districtData = this.originData
        return
      }
      this.districtData = this.originData.filter(item => item.name == val)
    },
    infoWindow() {
      let sContent = this.$refs.DamModel.$el
      var infoWin = new L.popup( {
        autoPan: true,
        maxHeight: 300,
        maxWidth: 600
      }).setContent(sContent)
      return infoWin
    },
    drwaMarker(latlng, name) {
      if (this.sectionMarker && this.label) {
        this.map.removeLayer(this.sectionMarker)
        this.map.removeLayer(this.label)
        this.showInfo = false
        this.sectionMarker.closeInfoWindow()
      }
      // 图片
      let icon = new L.icon({
        iconUrl: this.iconUrl,
        iconSize: new L.point(24, 24),
        iconAnchor: new L.point(12, 20)
      })
      // 标点
      this.sectionMarker = new L.marker(latlng, {icon})
      this.showInfo = true
      // label
      //   this.label = new T.Label({
      //     text: name,
      //     position: latlng,
      //     offset: new this.T.Point(-9, 18)
      //   })
      this.label = new L.tooltip({
        permanent: true,
        direction: 'auto',
        sticky: false,
        offset: new L.point(-9, 18),
        opacity: 0.6
      })
      this.label.setLatLng(latlng)
      this.label.setContent(name)
      let infoWin = this.infoWindow()
      this.sectionMarker.addEventListener('click', () => {
        this.sectionMarker.openPopup(infoWin)
      }) // 将标注添加到地图中
      this.map.addLayer(this.sectionMarker)
      this.map.addLayer(this.label)
    },
    createdLngLat(row) {
      let latlng = new L.LatLng(row.startLat, row.startLong)
      // 创建
      this.drwaMarker(latlng, row.damName)
    }
  }
}
</script>

<style lang="scss" scoped>
@import './../../css/gisComp.scss';
.dam-container {
}
</style>
