<!--
 * @Description: 重点用户分布
 * @Author: 王晓颖
 * @Date: 2021-04-11
 -->
<template>
  <div id="centerDiv" class="mapcontainer">
    <!--时钟-->
    <clock/>
    <!--天气-->
    <weather/>
    <!--统计结果显示-->
    <div class="label-div">
      <div class="label">
        {{ boardData.name }}
      </div>
      <div class="value">
        {{ boardData.value }}
      </div>
    </div>

    <!--地图-->
    <Map :url="configUrl" @onload="onMapload" />
    <brand/>

  </div>
</template>

<script>
import 'mars3d-echarts'
import Map from '@/components/Map/MarsMap.vue'
import Weather from '@/components/weather/weather'
import Clock from '@/components/clock/Clock'
import Brand from '@/components/Brand/brand'
export default {
  name: 'Vip',
  components: {
    Weather,
    Clock,
    Map,
    Brand
  },
  filters: {
    boardNameFilter(val) {
      if (val === '全部' || val === '') {
        return '全省重点用户'
      } else {
        return val + '区域重点用户'
      }
    }
  },

  data() {
    return {
      map: null, // 地图
      configUrl: 'static/config/config.json',
      alpha: 100, // 透明度
      underground: null, // ？
      positionShow: true, // 显示位置
      boardData: {
        name: '重点用户',
        value: 16
      }, // 统计版展示数据
      vipList: [
        { 'name': '大同门站', 'x': 113.243915, 'y': 40.022802, need: 500, supply: 300 },
        { 'name': '华能电厂', 'x': 112.643381, 'y': 37.875766, need: 500, supply: 300 },
        { 'name': '益通液化', 'x': 111.324167, 'y': 35.616038, need: 500, supply: 300 },
        { 'name': '怀仁门站', 'x': 113.073263, 'y': 39.793994, need: 500, supply: 300 },
        { 'name': '京朔', 'x': 112.863455, 'y': 39.676996, need: 500, supply: 300 },
        { 'name': '临钢阀室', 'x': 111.563488, 'y': 36.065628, need: 500, supply: 300 },
        { 'name': '大同华润', 'x': 113.214888, 'y': 39.978475, need: 500, supply: 300 },
        { 'name': '嘉节电厂', 'x': 112.555762, 'y': 37.962853, need: 500, supply: 300 },
        { 'name': '燃产神池', 'x': 112.249473, 'y': 39.114643, need: 500, supply: 300 },
        { 'name': '太原钢铁', 'x': 112.553336, 'y': 37.806676, need: 500, supply: 300 },
        { 'name': '阳泉华润', 'x': 113.632203, 'y': 37.924061, need: 500, supply: 300 },
        { 'name': '寿阳热电', 'x': 113.193989, 'y': 37.928963, need: 500, supply: 300 },
        { 'name': '寿阳液化', 'x': 113.094085, 'y': 37.828509, need: 500, supply: 300 },
        { 'name': '原平门站', 'x': 112.762574, 'y': 38.785519, need: 500, supply: 300 },
        { 'name': '运城门站', 'x': 111.074011, 'y': 35.126729, need: 500, supply: 300 },
        { 'name': '太原城市', 'x': 112.555841, 'y': 37.877873, need: 500, supply: 300 }
      ], // 重点用户点位
      vipLayer: null, // 重点用户分布图层
      pointColorArr: ['#f33349', '#f79a2c', '#95e40c', '#95e40c', '#1ffee6'],
      graphicLayer: null // 管理站标签图层
    }
  },
  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()
    },
    // 重点用户位置
    addVipPosition() {
      // axios.get('static/config/waterThreat.json').then((res) => {
      //   res = res.data
      //   if (res.code === 200) {
      //     // 过滤掉经度为null的
      //     this.threatArea = res.data.filter(item => item['经度'] !== null)
      //     this.boardData.value = this.threatArea.length
      //     this.addFeatures(this.threatArea)
      //   }
      // })
      this.addFeatures(this.vipList)
      // this.addVipDiv(this.vipList)
    },
    // 添加用户点位
    addFeatures(arr) {
      const { mars3d, Cesium } = this
      // 创建DIV数据图层
      var graphicLayer = new mars3d.layer.DivLayer()
      this.vipLayer = graphicLayer
      this.map.addLayer(graphicLayer)
      // 在layer上绑定监听事件
      graphicLayer.on(mars3d.EventType.click, function(event) {
        console.log('监听layer，单击了矢量对象', event)
      })
      graphicLayer.bindPopup(function(event) {
        const item = event.graphic.attr
        var html = ` <div class="popup-win"><span class="title">${item.name}</span><br/>
                        <span style="color:#63AEFF">需求：${item.need} m³</span><br/>
                        <span style="color:#FFB861">供应：${item.supply}m³</span></div>`
        return html
      })
      // 遍历显示图标
      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)
      }
    }
  }
}
</script>

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