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

<script>
import commonMixin from '../base/mixins/common.js'
import { getWeatherList } from '@/api/weather'
import { getToday } from '@/utils/dateutils'
export default {
  name: 'WeatherLayer',
  mixins: [commonMixin('layer')],
  props: {
    size: {
      type: String,
      default: ''
    }, // 大小
    scale: {
      type: Number,
      default: 1
    }, // 图片缩放倍数
    height: {
      type: Number,
      default: 5000
    }, // 高度
    offset: {
      type: Number,
      default: -15
    }, // 偏移值
    show: {
      type: Boolean,
      default: false
    } // 是否可见
  },
  data() {
    return {
      layer: null, // 图层
      data: [], // 完整数据
      weathers: {
        '晴': 'static/images/map/weather/weather-qing.png',
        '多云': 'static/images/map/weather/weather-duoyun.png',
        '阴': 'static/images/map/weather/weather-yin.png',
        '小雨': 'static/images/map/weather/weather-xiaoyu.png',
        '雨': 'static/images/map/weather/weather-dayu.png',
        '小雪': 'static/images/map/weather/weather-xiaoxue.png',
        '雨夹雪': 'static/images/map/weather/weather-yujiaxue.png',
        '扬沙': 'static/images/map/weather/weather-yangsha.png'
      } // 天气与图片地址
    }
  },
  watch: {
    show(val) {
      console.log('watch show: ' + val)
      if (val) {
        this.initLayer()
      } else {
        this.removeLayer()
      }
    }
  },
  methods: {
    load() {
      console.log('load Weather Layer')
      if(this.show) this.initLayer()
    },
    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 } = this
      const date = getToday('yyyy-MM-dd')
      getWeatherList(date).then((res) => {
        const data = res.data.map(item => {
          return {
            name: item['WD51_20'],
            lng: parseFloat(item['WD51_21']),
            lat: parseFloat(item['WD51_22']),
            wd: item['WD51_14'].trim(),
            wg: item['WD51_15'].trim(),
            tqxx12: item['WD51_10'],
            tqxx24: item['WD51_12']
          }
        })
        this.data = data
        for (const item of data) {
          const graphic = new mars3d.graphic.BillboardEntity({
            name: '天气',
            position: [item.lng, item.lat, height],
            style: {
              image: this.weathers[item.tqxx24],
              pixelOffsetX: offset,
              pixelOffsetY: offset,
              scale: 1,
              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.tqxx24}</div>
                        <div style="color:#63AEFF">温度：${item.wd}~${item.wg}℃</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>
