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

<script>
import commonMixin from '../base/mixins/common.js'
import axios from 'axios'
export default {
  name: 'ManageStationLayer',
  mixins: [commonMixin('layer')],
  props: {
    size: {
      type: String,
      default: ''
    }, // 大小
    scale: {
      type: Number,
      default: 5
    }, // 图片缩放倍数
    height: {
      type: Number,
      default: 0
    }, // 高度
    offset: {
      type: Number,
      default: -15
    }, // 偏移值
    show: {
      type: Boolean,
      default: false
    } // 是否可见
  },
  data() {
    return {
      layer: null, // 图层
      data: [] // 完整数据
    }
  },
  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, layer } = this
      axios.get('static/config/manageStation.json').then((res) => {
        res = res.data
        if (res.code === 200) {
          this.data = res.data
          for (const station of this.data) {
            const graphic = new mars3d.graphic.ModelEntity({
              name: station.name,
              position: [station.x, station.y, 0],
              style: {
                // label: {
                //   text: station.name,
                //   font_family: '微软雅黑',
                //   font_size: 15,
                //   pixelOffsetY: 10
                // },
                url: 'static/gltf/output/guanlizhan.gltf',
                scale: 5,
                heading: 90,
                minimumPixelSize: 30
              },
              tooltip: station.name
            })
            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>