<!--
 * @Description: 供应专题
 * @Author: 王晓颖
 * @Date: 2021-04-14
 -->
<template>
  <layout-map>
    <!--统计结果显示-->
    <div v-show="boardData.name" class="label-container">
      <div class="label-div">
        <div class="label">
          {{ boardData.name }}实时供给
        </div>
        <div class="value">
          {{ boardData.value }}<span class="unit"><span v-show="boardData.type=='area'">万</span>m³</span>
        </div>
      </div>
      <div>
        <div class="label-div-small-parent">
          <div class="label-div-small">
            <div class="label">
              LNG
            </div>
            <div class="value">
              {{ boardData.lng }}<span class="unit"><span v-show="boardData.type=='area'">万</span>m³</span>
            </div>
          </div>
          <div class="label-div-small">
            <div class="label">
              PNG
            </div>
            <div class="value">
              {{ boardData.png }}<span class="unit"><span v-show="boardData.type=='area'">万</span>m³</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--地图-->
    <Map :url="configUrl" @onload="onMapload" />
    <div class="map-btn-group">
      <select-button :select="supplyShow" name="供应" icon="icon-supply" @click="showSupply(supplyShow)"/>
      <select-button :select="vipShow" name="重点用户" icon="icon-user" @click="showVip(vipShow)"/>
    </div>

  </layout-map>
</template>

<script>
import 'mars3d-echarts'
import Map from '@/components/Map/MarsMap.vue'
import SelectButton from '@/components/SelectTool/components/selectButton'
import LayoutMap from '@/layout/layoutMap'
import { getAreaSupply, getUserSupply } from '@/api/needSupply'
import { getHighConsequence } from '@/api/hca'

import { getToday } from '@/utils/dateutils'
import { getIndex } from '@/utils/mathUtils'
export default {
  name: 'Vip',
  components: {
    LayoutMap,
    SelectButton,
    Map
  },
  filters: {
    boardNameFilter(val) {
      if (val === '全部' || val === '') {
        return '全省重点用户'
      } else {
        return val + '区域重点用户'
      }
    }
  },

  data() {
    return {
      map: null, // 地图
      configUrl: 'static/config/config.json',
      alpha: 100, // 透明度
      underground: null, // ？
      pointColorArr: ['#f33349', '#f79a2c', '#95e40c', '#95e40c', '#1ffee6'],
      vipShow: false, // 显示位置
      supplyShow: true, // 显示供应
      boardData: {
        type: '', // area or vip
        name: '',
        value: '',
        lng: '',
        png: ''
      }, // 统计版展示数据
      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 }
      },
      cities: [],
      vipList: [], // 重点用户点位
      vipLayer: null, // 重点用户分布图层
      supplyLayer: null, // 供应光锥图层
      graphicLayer: null, // 管理站标签图层
      timer: null, // 轮训定时器
      clock: 86400 // 间隔时间
    }
  },
  methods: {
    // 地图构造完成回调
    onMapload(map) {
      // 以下为演示代码
      this.map = map
      // 背景透明
      this.map._viewer.scene.backgroundColor = new this.Cesium.Color(0.0, 0.0, 0.0, 0.0)
      this.map._viewer.scene.globe.baseColor.alpha = 0
      // 添加重点用户隐患点
      // this.addVipPosition()
      this.addSupply()
      this.refreshData()
    },
    // 添加供需数据
    addSupply() {
      const { mars3d, Cesium } = this
      if (this.supplyLayer) {
        this.map.removeLayer(this.supplyLayer)
      }
      var graphicLayer = new mars3d.layer.DivLayer()
      this.supplyLayer = graphicLayer
      graphicLayer.on(mars3d.EventType.click, event => {
        const item = event.graphic.attr
        this.boardData.type = 'area'
        this.boardData.name = item.name
        this.boardData.value = item.supply.toFixed(2)
        this.boardData.lng = item.lngSupply.toFixed(2)
        this.boardData.png = item.pngSupply.toFixed(2)
      })
      this.map.addLayer(graphicLayer)
      const date = getToday()
      getAreaSupply(date).then(res => {
        if (res.status === 200) {
          const data = res.data.map(item => {
            return {
              name: item['WD09_05'],
              pngSupply: item['DL03'] / 10000.0,
              lngSupply: item['DL02'] / 10000.0,
              supply: (item['DL03'] + item['DL02']) / 10000.0
            }
          })
          this.cities = data
          if (this.index == null) {
            this.index = getIndex(this.cities.map(item => item.supply))
            console.log('index', this.index)
          }
          for (const item of this.cities) {
            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: '#00ffff',
                radius: 5000,
                height: item.supply * this.index,
                popup: item.name,
                distanceDisplayCondition: new Cesium.DistanceDisplayConditionGeometryInstanceAttribute(80000, 3010000)
              }
            })
            graphicLayer.addGraphic(coneGlow2)
          }
        }
      })
    },
    // 重点用户位置
    addVipPosition() {
      const date = getToday()
      getUserSupply(date).then(res => {
        const data = res.data.map(item => {
          return {
            name: item['WD02_03'],
            x: parseFloat(item['WD02_04']),
            y: parseFloat(item['WD02_05']),
            pngSupply: item['DL03'],
            lngSupply: item['DL02'],
            supply: item['DL03'] + item['DL02'],
            need: item['DL03'] + item['DL02']
          }
        })
        this.vipList = data
        this.addFeatures(this.vipList)
      })
    },
    // 添加用户点位
    addFeatures(arr) {
      const { mars3d, Cesium } = this
      if (this.vipLayer) {
        this.map.removeLayer(this.vipLayer)
      }
      // 创建DIV数据图层
      var graphicLayer = new mars3d.layer.DivLayer()
      this.vipLayer = graphicLayer
      this.map.addLayer(graphicLayer)
      // 在layer上绑定监听事件
      graphicLayer.on(mars3d.EventType.click, event => {
        const item = event.graphic.attr
        this.boardData.type = 'vip'
        this.boardData.name = item.name
        this.boardData.value = item.supply
        this.boardData.lng = item.lngSupply
        this.boardData.png = item.pngSupply
      })
      // 遍历显示图标
      for (const item of arr) {
        var jd = item.x
        var wd = item.y
        var clr = this.pointColorArr[2]
        var graphic = new mars3d.graphic.DivGraphic({
          position: Cesium.Cartesian3.fromDegrees(jd, wd, 0),
          style: {
            html: '<div class="mars3d-animation-point" style="color:' + clr + ';"><p></p></div>',
            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 2000000) // 按视距距离显示
          },
          attr: item
        })
        graphicLayer.addGraphic(graphic)
      }
    },
    // 显示供应
    showSupply(show) {
      if (show) { // 移除
        this.supplyShow = false
        this.map.removeLayer(this.supplyLayer, true)
        this.supplyLayer = null
        if (this.boardData.type === 'area') {
          this.clearBoardData()
        }
      } else {
        this.supplyShow = true
        this.addSupply()
      }
    },
    // 显示重点用户分布和供应
    showVip(show) {
      if (show) { // 移除
        this.vipShow = false
        this.map.removeLayer(this.vipLayer, true)
        this.vipLayer = null
        if (this.boardData.type === 'vip') {
          this.clearBoardData()
        }
      } else {
        this.vipShow = true
        this.addVipPosition()
      }
    },
    clearBoardData() {
      this.boardData = {
        type: '', // area or vip
        name: '',
        value: '',
        lng: '',
        png: ''
      }
    },
    // 打开轮询,定时刷新数据
    refreshData() {
      console.log(this.clock * 1000)
      this.timer = setInterval(() => {
        console.log('refreshData')
        if (this.supplyLayer) { // 如果供需图层不为空，刷新工薪数据
          this.addSupply()
        }
        if (this.vipLayer) {
          this.addVipPosition()
        }
      }, this.clock * 1000)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .label-container {
    position: absolute;
    top: 140px;
    left: 31rem;
    z-index: 100;
    .label-div {
      color: white;
      padding: 1.5rem 2.2rem 1rem 2.2rem;
      background-image: url("../../assets/button_images/board-box1.png");
      background-size: 100% 100%;
      margin-bottom: 20px;
      .label {
        margin-bottom: 0.8rem;
        font-size: 1rem;
      }
      .value {
        font-family: DS-DigitalBold;
        font-size: 2rem;

      }
      .unit{
        font-family: "Microsoft YaHei";
        font-size:1rem;
      }
    }
    .label-div-small-parent{
      display: flex;
      justify-content: start;
      .label-div-small {
        /*flex:1;*/
        color: white;
        padding: 1rem 2rem 1rem 2rem;
        background-image: url("../../assets/button_images/board-box1.png");
        background-size: 100% 100%;
        margin-bottom: 20px;
        .label {
          margin-bottom: 0.2rem;
          font-size: 1rem;
        }
        .value {
          font-family: DS-DigitalBold;
          font-size: 2rem;
          display: inline-block;
        }
        .unit{
          font-family: "Microsoft YaHei";
          font-size:1rem;
        }
      }
    }
  }
  .map-btn-group{
    position: absolute;
    bottom:3rem;
    left:50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
  }
</style>

<style rel="stylesheet/scss" lang="scss">
  /*整个容器*/
  .mapcontainer {
    position: relative;
    height: 100%;
    width: 100%;
    background-color: transparent;
    /*background-color: #051151;*/
  }

</style>