<!--
 * @Description: 气象灾害图层
 * @Author: 王晓颖
 * @Date: 2021-06-03 11:41:01
 -->
<template>
  <div>
    <slot/>
  </div>
</template>

<script>
import commonMixin from '../base/mixins/common.js'
import { getDisasterList } from '@/api/weather'
import { getToday } from '@/utils/dateutils'
export default {
  name: 'DisasterLayer',
  mixins: [commonMixin('layer')],
  props: {
    size: {
      type: String,
      default: ''
    }, // 颜色类型：single单色柱，multi多色柱
    scale: {
      type: Number,
      default: 0.5
    }, // 图片缩放倍数
    height: {
      type: Number,
      default: 5000
    }, // 高度
    offset: {
      type: Number,
      default: -15
    }, // 偏移值
    show: {
      type: Boolean,
      default: false
    } // 是否可见
  },
  data() {
    return {
      layer: null, // 图层
      data: [], // 完整数据
      disaster: {
        '台风': '01',
        '暴雨': '02',
        '暴雪': '03',
        '寒潮': '04',
        '大风': '05',
        '沙尘暴': '06',
        '高温': '07',
        '干旱': '08',
        '雷电': '09',
        '冰雹': '10',
        '霜冻': '11',
        '大雾': '12',
        '霾': '13',
        '道路结冰': '14',
      }, // 灾害与数字对应表
      disasterLevel: {
        '蓝色': '01',
        '黄色': '02',
        '橙色': '03',
        '红色': '04'
      } // 灾害等级与数字对应表
    }
  },
  watch: {
    show(val) {
      console.log('watch show: ' + val)
      if (val) {
        this.initLayer()
      } else {
        this.removeLayer()
      }
    }
  },
  methods: {
    load() {
      console.log('load')
    },
    initLayer() {
      const { mars3d, map } = this
      if (map) {
        if (this.show) {
          if (this.layer) {
            this.removeLayer()
          }
        }
        const graphicLayer = new mars3d.layer.GraphicLayer()
        this.layer = graphicLayer
        map.addLayer(graphicLayer)
        this.loadData()
      }
    },
    loadData() {
      const { mars3d, Cesium, layer, height, offset, scale } = this
      const date = getToday()
      getDisasterList(date).then((res) => {
        if (res.data.length === 0) {
          this.$message.info('今日无预警')
        } else {
          let data = res.data.map(item => {
            return {
              name: item['WD52_03'].trim(),
              lng: parseFloat(item['WD52_05'].trim()),
              lat: parseFloat(item['WD52_06'].trim()),
              value: item['WD52_08'].trim(),
              zhlx: item['WD52_12'].trim(),
              zhdj: item['WD52_13'].trim()
            }
          })
          data = data.filter(item => item.lng != null)
          this.data = data
          for (const item of data) {
            let img='static/images/weather_disaster/0000.png'
            if(this.disaster[item.zhlx]){
              img = 'static/images/weather_disaster/' + this.disaster[item.zhlx] + this.disasterLevel[item.zhdj] + '.png'
            }
            const graphic = new mars3d.graphic.BillboardEntity({
              name: '气象灾害',
              position: [item.lng, item.lat, height],
              style: {
                image: img,
                pixelOffsetX: 0,
                pixelOffsetY: -20,
                scale: scale,
                horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                verticalOrigin: Cesium.VerticalOrigin.BOTTOM
              }
            })
            var html = ` <div class="popup-win"><span class="title">${item.name}</span><br/>
                        <div style="color:#FFB861">预警：${item.zhlx}${item.zhdj}</div>
                        <div style="color:#63AEFF">时间：${item.value}</div>
                        </div>`
            graphic.bindTooltip(html, { anchor: [0, -20] }).openTooltip()
            layer.addGraphic(graphic)
          }
        }
      })
    },
    // 移除图层
    removeLayer() {
      const { map, layer } = this
      if (this.layer) {
        map.removeLayer(layer)
        this.layer = null
      }
    }
  }
}
</script>

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

</style>
