<!--
 * @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">m³</span>
        </div>
      </div>
      <div>
        <el-row>
          <el-col :span="12">
            <div class="label-div-small">
              <div class="label">
                LNG
              </div>
              <div class="value">
                {{ boardData.lng }}<span class="unit">m³</span>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="label-div-small">
              <div class="label">
                PNG
              </div>
              <div class="value">
                {{ boardData.png }}<span class="unit">m³</span>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <!--地图-->
    <Map :url="configUrl" @onload="onMapload" >
      <vip-layer ref="vip" :show="vipShow" popup-type="other" show-value="need" @click="clickVip"/>
      <need-layer-cone ref="need" :show="needShow" @click="clickNeed"/>
    </Map>
    <div class="map-btn-group">
      <select-button :select="needShow" name="需求" icon="icon-need" @click="showNeed(needShow)"/>
      <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 VipLayer from '@/components/Map/components/vipLayer'
import NeedLayerCone from '@/components/Map/components/needLayerCone'
export default {
  name: 'Vip',
  components: {
    NeedLayerCone,
    VipLayer,
    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, // ？
      vipShow: true, // 显示位置
      needShow: false, // 显示需求
      boardData: {
        type: '', // area or vip
        name: '',
        value: '',
        lng: '',
        png: ''
      }, // 统计版展示数据
      needLayer: null, // 需求光锥图层
      graphicLayer: null, // 管理站标签图层
      timer: null, // 轮训定时器
      clock: 30 // 间隔时间
    }
  },
  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.refreshData()
    },
    clickNeed(event) {
      const item = event.graphic.attr
      this.boardData.type = 'area'
      this.boardData.name = item.name
      this.boardData.value = item.need.toFixed(2)
      this.boardData.lng = item.lngNeed.toFixed(2)
      this.boardData.png = item.pngNeed.toFixed(2)
    },
    clickVip(event) {
      const item = event.graphic.attr
      this.boardData.type = 'vip'
      this.boardData.name = item.name
      this.boardData.value = item.need
      this.boardData.lng = item.lngNeed
      this.boardData.png = item.pngNeed
    },
    // 显示需求
    showNeed(show) {
      this.needShow = !this.needShow
      if ((!this.needShow) ** this.boardData.type === 'area') {
        this.clearBoardData()
      }
    },
    // 显示重点用户分布和需求
    showVip(show) {
      this.vipShow = !this.vipShow
      if ((!this.vipShow) ** this.boardData.type === 'vip') {
        this.clearBoardData()
      }
    },
    clearBoardData() {
      this.boardData = {
        type: '', // area or vip
        name: '',
        value: '',
        lng: '',
        png: ''
      }
    },
    // 打开轮询,定时刷新数据
    refreshData() {
      this.timer = setInterval(() => {
        console.log('refreshData')
        if (this.needShow) { // 如果供需图层不为空，刷新工薪数据
          // this.$refs.vip.initLayer()
        }
        if (this.vipShow) {
          this.$refs.vip.initLayer()
        }
      }, 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.5rem 1rem 2.5rem;
      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 {
      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;
      }
      .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>