<!--
 * @Description: 柱子墙版供应图层
 * @Author: 王晓颖
 * @Date: 2021-06-03 09:12:27
 -->
<template>
  <div class="supply">
    <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: 'SupplyLayer',
  mixins: [commonMixin('layer')],
  props: {
    colorType: {
      type: String,
      default: 'multi'
    }, // 颜色类型：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: '#FCEC1D'
    } // 柱状颜色， 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')
    },
    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 date = getToday('yyyyMMdd')
      getAreaSupply(date).then(res => {
        if (res.status === 200) {
          debugger
          const data = res.data.map(item => {
            return {
              name: item['WD03_04'],
              pngSupply: item['DL01'] / 10000.0,
              pngNeed: item['DL01'] / 10000.0,
              lngSupply: 0,
              lngNeed: 0,
              supply: (item['DL01'] + 0) / 10000.0,
              need: (item['DL01'] + 0) / 10000.0
            }
          })
          this.wholeData = data
          this.filteredData = data.filter(item => item.name !== '无')
          // 计算缩放倍数
          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 supply = item.supply
            const position = [this.citiesPositions[item.name].x, this.citiesPositions[item.name].y]
            const html = `<span style="font-size:18px;">${item['name']}</span><br/>
                        <span style="color:#FFB861;font-size:18px;">实时供给：${supply.toFixed(2)}万m³</span>`
            const color = this.colorList[i % 10]
            this.addWall(item.name, position, supply * this.index, color, html)
          }
        }
      })
    },
    openTooltip(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()
        } else {
          graphic.closePopup()
        }
      }
    },
    addWall(city, position, data, color, html) {
      const { mars3d, Cesium, layer, radius, speed } = this
      // 下方实际数据
      var positions = mars3d.PolyUtil.getEllipseOuterPositions({
        position: Cesium.Cartesian3.fromDegrees(position[0], position[1], 0),
        radius: radius, // 半径
        count: 50 // 共返回(count*4)个点
      })
      // 供应
      var graphic1 = new mars3d.graphic.WallPrimitive({
        name: city,
        positions: positions,
        style: {
          diffHeight: data,
          closure: true,
          material: mars3d.MaterialUtil.createMaterial(mars3d.MaterialType.LineFlow, {
            image: 'static/images/map/fence.png',
            color: color,
            speed: speed,
            axisY: true
          })
        }
      })
      // graphic1.bindTooltip(html)
      graphic1.bindPopup(html)
      layer.addGraphic(graphic1)
    },
    // 移除图层
    removeLayer() {
      const { map, layer } = this
      if (this.layer) {
        const graphics = layer.graphics
        for (const graphic of graphics) {
          graphic.closePopup()
        }
        map.removeLayer(layer)
        this.layer = null
      }
    }
  }
}
</script>

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