<!--
 * @Description: 重点用户图层
 * @Author: 王晓颖
 * @Date: 2021-06-08 11:07:02
 -->
<template>
  <div>
    <slot/>
  </div>
</template>

<script>
import commonMixin from '../base/mixins/common.js'
import { getUserSupply } from '@/api/needSupply'
import { getToday } from '@/utils/dateutils'
export default {
  name: 'VipLayer',
  mixins: [commonMixin('layer')],
  props: {
    show: {
      type: Boolean,
      default: false
    }, // 是否可见
    showValue: {
      type: String,
      default: 'all'
    }, // 显示类型：need, supply, all
    type: {
      type: String,
      required: true
    }, // 隐患类型
    color: {
      type: String,
      default: '#95e40c'
    },
    popupType: {
      type: String,
      default: 'popupWindow'
    } // 详情弹出方式：other/ popupWindow
  },
  data() {
    return {
      layer: null, // 图层
      data: [] // 完整数据
    }
  },
  watch: {
    show(val) {
      if (val) {
        this.initLayer()
      } else {
        this.removeLayer()
      }
    }
  },
  methods: {
    load() {
      console.log('load Vip Layer')
      if (this.show) {
        this.initLayer()
      }
    },
    initLayer() {
      const { map } = this
      if (map) {
        if (this.show && this.layer) {
          this.removeLayer()
        }
        this.loadData()
      }
    },
    loadData() {
      const date = getToday()
      getUserSupply(date).then(res => {
        const data = res.data.map(item => {
          return {
            name: item['WD02_03'],
            x: parseFloat(item['WD02_04']),
            y: parseFloat(item['WD02_05']),
            pngNeed: item['DL01'],
            lngNeed: 0,
            pngSupply: item['DL01'],
            lngSupply: 0,
            supply: item['DL01'],
            need: item['DL01']
          }
        })
        this.data = data
        this.addFeatures()
      })
    },
    // 添加隐患点: type类型，arr数组， clr颜色
    addFeatures() {
      const { mars3d, map, Cesium, color, data, popupType, showValue } = this
      const graphicLayer = new mars3d.layer.GraphicLayer({ name: 'vip' })
      this.layer = graphicLayer
      this.layer.on(mars3d.EventType.click, event => {
        console.log('点击重点用户', event)
        if (popupType === 'other') {
          this.$emit('click', event)
        }
      })
      if (popupType === 'popupWindow') {
        this.layer.bindPopup(event => {
          const item = event.graphic.attr
          var html = `<div class='popup-win'><span class='title'>${item.name}</span><br/>`
          if (showValue === 'need' || showValue === 'all') {
            html += `<span style="color:#63AEFF">需求：${item.need} m³</span><br/>`
          }
          if (showValue === 'supply' || showValue === 'all') {
            html += `<span style="color:#FFB861">供应：${item.supply}m³</span><br/>
            <span style="color:#FFB861">png供应：${item.pngSupply}m³</span><br/>
            <span style="color:#FFB861">lng供应：${item.lngSupply}m³</span></div>`
          }
          return html
        })
      }
      console.log(this.layer)
      map.addLayer(this.layer)
      // 创建DIV数据图层
      for (var i = 0, len = data.length; i < len; i++) {
        const item = data[i]
        var jd = item.x
        var wd = item.y
        var graphic = new mars3d.graphic.DivGraphic({
          position: Cesium.Cartesian3.fromDegrees(jd, wd, 0),
          style: {
            html: '<div class="mars3d-animation-point" style="color:' + color + ';"><p></p></div>',
            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 2000000) // 按视距距离显示
          },
          attr: item
        })
        this.layer.addGraphic(graphic)
      }
    },
    // 移除图层
    removeLayer() {
      const { map, layer } = this
      if (layer) {
        map.removeLayer(this.layer, true)
        this.layer = null
      }
    }
  }
}
</script>

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

</style>