<!--
 * @Description: 第三方施工点位图
 * @Author: 王晓颖
 * @Date: 2021-06-03 15:07:45
 -->
<template>
  <div>
    <slot/>
    <threat-dialog ref="threatDialog"/>
  </div>
</template>

<script>
import commonMixin from '../base/mixins/common.js'
import ThreatDialog from '@/views/maps/components/threatDialog'
import { getThreat } from '@/api/threat'
import axios from 'axios'
export default {
  name: 'ThreatLayer',
  components: { ThreatDialog },
  mixins: [commonMixin('layer')],
  props: {
    colorful: {
      type: Boolean,
      default: false
    },
    show: {
      type: Boolean,
      default: false
    }, // 是否可见
    type: {
      type: String,
      required: true
    }, // 隐患类型
    color: {
      type: String,
      default: '#FBFE2D'
    },
    colorList: {
      type: Array,
      default: () => {
        return ['#f33349', '#f79a2c', '#f2fa19', '#95e40c', '#1ffee6']
      }
    },
    threatLevel: {
      type: Object,
      default: () => {
        return {
          'A级': 0,
          'B级': 1,
          'C级': 2,
          '问题': 3
        }
      }
    }, // 隐患等级
    popupType: {
      type: String,
      default: 'dialog'
    } // 详情弹出方式：dialog/ popupWindow
  },
  data() {
    return {
      layer: null, // 图层
      data: [] // 完整数据
    }
  },
  watch: {
    show(val) {
      if (val) {
        this.initLayer()
      } else {
        this.removeLayer()
      }
    }
  },
  methods: {
    load() {
      console.log('load')
      if (this.show) {
        this.initLayer()
      }
    },
    initLayer() {
      const { map } = this
      if (map) {
        if (this.show && this.layer) {
          this.removeLayer()
        }
        this.loadData()
      }
    },
    loadData() {
      const { type } = this
      const typeList = {
        construction: '第三方施工',
        sinkThreat: '塌陷',
        waterThreat: '水保'
      }
      getThreat(typeList[type]).then(res => {
        if (res.data.length > 0) {
          const data = res.data.map(item => {
            return {
              '隐患类型': item['WD63_04'],
              '经度': parseFloat(item['WD63_13'].trim()),
              '纬度': parseFloat(item['WD63_14'].trim()),
              '隐患等级': item['WD63_06'] !== null ? item['WD63_06'].trim() : '',
              '隐患状态': item['WD63_05'] !== null ? item['WD63_05'].trim() : '',
              '位置描述': item['WD63_07'] !== null ? item['WD63_07'].trim() : '',
              '村庄地址': item['WD63_08'] !== null ? item['WD63_08'].trim() : '',
              '发现人': item['WD63_09'] !== null ? item['WD63_09'].trim() : '',
              '隐患描述': item['WD63_10'] !== null ? item['WD63_10'].trim() : '',
              '业主单位': item['WD63_11'] !== null ? item['WD63_11'].trim() : '',
              '创建时间': item['WD63_12'] !== null ? item['WD63_12'].trim() : '',
              '所属管理处': item['WD63_15'] !== null ? item['WD63_15'].trim() : '',
              '隐患发现时间': item['WD63_16'] !== null ? item['WD63_16'].trim() : ''

            }
          })
          this.data = data.filter(item => item['经度'] !== null)
          this.addFeatures()
        }
      })
      // if (type === 'construction') {
      //   axios.get('static/config/threat.json').then((res) => {
      //     res = res.data
      //     if (res.code === 200) {
      //       // 过滤掉经度为null的
      //       this.data = res.data.filter(item => item['经度'] !== null)
      //       this.addFeatures()
      //     }
      //   })
      // } else if (type === 'sinkThreat') {
      //   axios.get('static/config/sinkThreat.json').then((res) => {
      //     res = res.data
      //     if (res.code === 200) {
      //       // 过滤掉经度为null的
      //       this.data = res.data.filter(item => item['经度'] !== null)
      //       this.addFeatures()
      //     }
      //   })
      // } else if (type === 'waterThreat') {
      //   axios.get('static/config/waterThreat.json').then((res) => {
      //     res = res.data
      //     if (res.code === 200) {
      //       // 过滤掉经度为null的
      //       this.data = res.data.filter(item => item['经度'] !== null)
      //       this.addFeatures()
      //     }
      //   })
      // }
    },
    // 添加隐患点: type类型，arr数组， clr颜色
    addFeatures() {
      const { mars3d, map, Cesium, color, data, type, threatLevel } = 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)
        if (this.popupType === 'dialog') {
          this.$refs.threatDialog.initDialog(event.graphic.attr)
        }
      })
      if (this.popupType === 'popupWindow') {
        this.layer.bindPopup(event => {
          const item = event.graphic.attr
          var html =
            '位置描述：' +
            item['位置描述'] +
            '<br />村庄地址：' +
            item['村庄地址'] +
            '<br />发现人：' +
            item['发现人'] +
            '<br />隐患描述：' +
            item['隐患描述'] +
            '<br />创建时间：' +
            item['创建时间'] +
            '<br />隐患等级：' +
            item['隐患等级']
          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['经度']
        var wd = item['纬度']
        const level = item['隐患等级'] === '' ? 4 : threatLevel[item['隐患等级']]
        const clr = this.colorful ? this.colorList[level] : color
        var graphic = new mars3d.graphic.DivGraphic({
          position: Cesium.Cartesian3.fromDegrees(jd, wd, 0),
          style: {
            html: '<div class="mars3d-animation-point" style="color:' + clr + ';"><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>
