<!--
 * @Description: 人员图层
 * @Author: 王晓颖
 * @Date: 2021-06-22 10:05:32
 -->
<template>
  <div>
    <toilet-detail-dialog ref="detail"/>
  </div>
</template>

<script>
import Leaflet from 'leaflet'
import commonMixin from '@/components/mapWindow/base/mixins/common.js'
import { getToiletList } from '@/api/sanitation/toilet'
import ToiletDetailDialog from './toiletDetailDialog'
export default {
  name: 'ToiletLayer',
  components: { ToiletDetailDialog },
  mixins: [commonMixin('layer')],
  props: {
    show: {
      type: Boolean,
      default: true
    }, // 是否显示
    iconSize: {
      type: Array,
      default: () => {
        return [32, 32]
      }
    }, // 图标大小
    iconAnchor: {
      type: Array,
      default: () => {
        return [16, 32]
      }
    }, // 图标位移
    popupAnchor: {
      type: Array,
      default: () => {
        return [-0, -32]
      }
    }// 弹窗位移
  },
  data() {
    return {
      toiletList: [], // 在线网格员
      toiletLayer: null, // 离线网格员图层
      layerGroup: [], // 图层组
      imageBaseUrl: this.baseConfig.baseUrl + '/static/', // 图片前缀地址
      toiletIcon: require('@/assets/global_images/toilet-position.png')
    }
  },
  watch: {
    show(val) {
      if (val) {
        this.initLayer()
      } else {
        this.clearLayer()
      }
    }
  },
  methods: {
    load() {
      console.log('load caseLayer')
      if (this.show) {
        this.initLayer()
      }
    },
    // 初始化图层
    initLayer() {
      const { map } = this
      this.layerGroup = [] // 先清空LayerGroup
      // 初始化图层组
      /* eslint-disable new-cap */
      this.toiletLayer = new Leaflet.layerGroup().addTo(map)
      this.layerGroup.push(this.toiletLayer)
      console.log('init ToiletLayer')
      this.loadData()
    },
    // 清除图层
    clearLayer() {
      const { map, layerGroup } = this
      layerGroup.forEach(item => map.removeLayer(item))
    },
    // 过滤数据
    filterData(params) {
      const { map, layerGroup } = this
      const toiletCode = params.toiletCode
      console.log(toiletCode)
      layerGroup.forEach(item => map.removeLayer(item))
    },
    // 加载全部数据
    loadData() {
      const { toiletIcon } = this
      // 获取数据
      getToiletList().then(res => {
        if (res.code === 200) {
          this.toiletList = res.data // 在线人员列表
          this.addPointOnMap(this.toiletList, this.toiletLayer, toiletIcon)
        }
      })
    },
    // 将点加到地图上
    addPointOnMap: function(itemList, staffLayer, iconType) {
      const { iconSize, iconAnchor, popupAnchor } = this
      // 图标
      const icon = Leaflet.icon({
        iconUrl: iconType,
        iconSize: iconSize,
        iconAnchor: iconAnchor,
        popupAnchor: popupAnchor
      })
      itemList.forEach(item => {
        const popupStr = '<div class="popup-div">' +
          '<div class="popup-title">' + item.name + '</div>' +
          '<div class="dashed-line"></div>' +
          '<div class="popup-item"><label>公厕编号</label>' + item.code + '</div>' +
          '<div class="popup-item"><label>位置</label>' + item.position + '</div>' +
          '<div class="popup-item"><label>建设单位</label>' + item.owner + '</div>' +
          '<div class="popup-item"><label>负责人</label>' + item.responsiblePerson + '</div>' +
          '<div class="popup-item"><label>占地面积</label>' + item.area + '</div>' +
          '<div class="popup-item"><label>建设时间</label>' + item.ts + '</div>' +
          '<div class="popup-button"><button class="detail-button" style="background-color: #42b983;border-width: 0px;color: white;padding: 5px 8px;font-size: 12px;border-radius: 4px" id="detail">详情</button></div>' +
          '</div>'

        const popup = Leaflet.popup().setContent(popupStr)
        if (item.lng > 0 && item.lat > 0) {
          // 添加marker
          const marker = Leaflet.marker([item.lat, item.lng], { icon: icon , item: item}).addTo(staffLayer).bindPopup(popup)
          marker.on('click', (e) => {
            document.getElementById('detail').onclick = () => {
              console.log('click detail')
              this.detail(e.sourceTarget.options.item)
            }
          })
        }
      })
    },
    detail(item) {
      this.$refs.detail.initDialog(item)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

</style>