<!--
 * @Description: 光锥版供应图层
 * @Author: 王晓颖
 * @Date: 2021-06-08 14:36:08
 -->
<template>
  <div class="need">
    <slot/>
  </div>
</template>

<script>
import commonMixin from '../base/mixins/common.js'
import { getAreaSupply } from '@/api/needSupply'
import { getIndex } from '@/utils/mathUtils'
import { getToday } from '@/utils/dateutils'
export default {
  name: 'NeedLayerCone',
  mixins: [commonMixin('layer')],
  props: {
    colorType: {
      type: String,
      default: 'single'
    }, // 颜色类型：single单色柱，multi多色柱
    radius: {
      type: Number,
      default: 5000
    }, // 柱半径
    show: {
      type: Boolean,
      default: false
    }, // 是否可见
    speed: {
      type: Number,
      default: 10
    }, // 光晕速度
    colorList: {
      type: Array,
      default: () => {
        return ['#d75111', '#d75111', '#d75111', '#fcaf17', '#fcaf17', '#fcaf17', '#4fffc3', '#4fffc3', '#4fffc3', '#39c53d', '#39c53d']
      }
    }, // 颜色列表, colorType为multi用
    color: {
      type: String,
      default: '#00ffff'
    } // 柱状颜色， colorType为single用
  },
  data() {
    return {
      layer: null, // 图层
      index: null, // 数据缩放倍数
      wholeData: [], // 各城市供应数据,全部
      filteredData: [], // 过滤后的供需数据，用于过滤png,lng
      citiesPositions: {
        '太原市': { 'x': 112.549248, 'y': 37.857014 },
        '大同市': { 'x': 113.295258, 'y': 40.090309 },
        '阳泉市': { 'x': 113.583282, 'y': 37.861187 },
        '晋中市': { 'x': 113.290072, 'y': 37.388188 },
        '长治市': { 'x': 113.113556, 'y': 36.191113 },
        '晋城市': { 'x': 112.851273, 'y': 35.497555 },
        '临汾市': { 'x': 111.517975, 'y': 36.084148 },
        '运城市': { 'x': 111.00396, 'y': 35.022778 },
        '朔州市': { 'x': 112.433388, 'y': 39.331261 },
        '忻州市': { 'x': 112.733536, 'y': 38.41769 },
        '吕梁市': { 'x': 111.134338, 'y': 37.524364 }
      }
    }
  },
  watch: {
    show(val) {
      console.log('watch show: ' + val)
      if (val) {
        this.initLayer()
      } else {
        this.removeLayer()
      }
    }
  },
  methods: {
    load() {
      console.log('load')
      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.DivLayer()
        graphicLayer.on(mars3d.EventType.click, event => {
          this.$emit('click', event)
        })
        this.layer = graphicLayer
        map.addLayer(graphicLayer)
        this.loadData()
      }
    },
    loadData() {
      const { mars3d, Cesium, layer, radius, color } = this
      const date = getToday('yyyyMMdd')
      getAreaSupply(date).then(res => {
        if (res.status === 200) {
          const data = res.data.map(item => {
            return {
              name: item['WD09_05'],
              pngSupply: item['DL03'] / 10000.0,
              pngNeed: item['DL03'] / 10000.0,
              lngSupply: item['DL02'] / 10000.0,
              lngNeed: item['DL02'] / 10000.0,
              supply: (item['DL03'] + item['DL02']) / 10000.0,
              need: (item['DL03'] + item['DL02']) / 10000.0
            }
          })
          this.wholeData = data
          this.filteredData = data
          // 计算缩放倍数
          if (this.index == null) {
            this.index = getIndex(this.filteredData.map(item => item.supply))
          }
          for (const i in this.filteredData) {
            const item = this.filteredData[i]
            const need = item.need
            const x = this.citiesPositions[item.name].x
            const y = this.citiesPositions[item.name].y
            var coneGlow2 = new mars3d.graphic.LightCone({
              position: Cesium.Cartesian3.fromDegrees(x, y, 0),
              attr: item,
              style: {
                color: color,
                radius: radius,
                height: need * this.index,
                popup: item.name,
                distanceDisplayCondition: new Cesium.DistanceDisplayConditionGeometryInstanceAttribute(80000, 3010000)
              }
            })
            layer.addGraphic(coneGlow2)
          }
        }
      })
    },
    openPopup(city) {
      console.log('openTooltip:' + city)
      debugger
      const { layer } = this
      const graphics = layer.graphics
      for (const graphic of graphics) {
        if (graphic.name === city) {
          // graphic.openTooltip()
          graphic.openPopup()
        }
      }
    },
    // 移除图层
    removeLayer() {
      const { map, layer } = this
      if (this.layer) {
        map.removeLayer(layer)
        this.layer = null
      }
    }
  }
}
</script>

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