<!--
 * @Description: 高后果区点位图层
 * @Author: 王晓颖
 * @Date: 2021-06-07 15:43:58
 -->
<template>
  <div>
    <slot/>
    <high-consequence-dialog ref="hcaDialog"/>
  </div>
</template>

<script>
import commonMixin from '../base/mixins/common.js'
import { getHighConsequence } from '@/api/hca'
import HighConsequenceDialog from '@/views/maps/components/highConsequenceDialog'
export default {
  name: 'HcaPointLayer',
  components: { HighConsequenceDialog },
  mixins: [commonMixin('layer')],
  props: {
    show: {
      type: Boolean,
      default: false
    }, // 是否可见
    color: {
      type: String,
      default: '#f79a2c'
    }
  },
  data() {
    return {
      layer: null, // 图层
      data: [], // 完整数据
      filteredData: [], // 过滤后的数据
      threatLevel: {
        'Ⅰ级': '1',
        'Ⅱ级': '2',
        'Ⅲ级': '3'
      }, // 隐患等级
      length: 0 // 数据长度
    }
  },
  watch: {
    show(val) {
      if (val) {
        this.initLayer()
      } else {
        this.removeLayer()
      }
    }
  },
  methods: {
    load() {
      console.log('load')
    },
    initLayer() {
      const { map } = this
      if (map) {
        if (this.show && this.layer) {
          this.removeLayer()
        }
        this.loadData()
      }
    },
    loadData() {
      const { mars3d, map } = this
      var graphicLayer = new mars3d.layer.DivLayer()
      this.layer = graphicLayer
      map.addLayer(graphicLayer)
      graphicLayer.on(mars3d.EventType.click, event => {
        console.log('点击高后果区', event)
        this.$refs.hcaDialog.initDialog(event.graphic.attr)
      })
      getHighConsequence().then(res => {
        let data = res.data.filter(item => item['DES02'] !== '无')
        data = data.map(item => {
          return {
            '高后果区编号': item['DES07'],
            '经度': parseFloat(item['DES02']),
            '纬度': parseFloat(item['DES03']),
            '位置描述': item['DES05'],
            '行政区域': item['DES09'],
            '地区级别': item['DES10'],
            '高后果区特征描述': item['DES11'],
            '机构名称': item['DES12'],
            '高后果区长度': item['DES08'],
            '识别时间': item['WD01_03'],
            '高后果区级别': item['WD02_04'],
            '所属管理处': item['DES01'],
            '影响人数范围': item['WD58_03'],
            '识别单位及负责人': item['DES04']
          }
        })
        this.data = data.filter(item => item['高后果区级别'] !== '无')
        this.length = this.data.length
        this.addFeatures()
      })
    },
    // 添加隐患点: type类型，arr数组， clr颜色
    addFeatures() {
      const { mars3d, map, Cesium, color, data, type } = this
      const graphicLayer = new mars3d.layer.GraphicLayer({ name: type })
      console.log('add Layer ' + type)
      this.layer = graphicLayer
      this.layer.on(mars3d.EventType.click, event => {
        console.log('点击高后果区', event)
        this.$refs.hcaDialog.initDialog(event.graphic.attr)
      })
      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['经度']
        var wd = item['纬度']
        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>
