<!--
 * @Description: 重点用户分布
 * @Author: 王晓颖
 * @Date: 2021-04-11
 -->
<template>
  <layout-map>
    <!--&lt;!&ndash;统计结果显示&ndash;&gt;-->
    <!--<div class="label-div">-->
    <!--<div class="label">-->
    <!--{{ boardData.name }}-->
    <!--</div>-->
    <!--<div class="value">-->
    <!--{{ boardData.value }}-->
    <!--</div>-->
    <!--</div>-->
    <!--地图-->
    <Map :url="configUrl" @onload="onMapload" >
      <vip-layer ref="vip" :show="true"/>
    </Map>
  </layout-map>
</template>

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

  data() {
    return {
      map: null, // 地图
      configUrl: 'static/config/config.json',
      alpha: 100, // 透明度
      underground: null, // ？
      boardData: {
        name: '重点用户',
        value: 16
      }, // 统计版展示数据
      timer: null, // 定时器
      clock: 86400 // 1小时定时刷新
    }
  },
  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
    },
    // 打开轮询,定时刷新数据
    refreshData() {
      this.timer = setInterval(() => {
        console.log('refreshData')
        if (this.vipShow) {
          this.$refs.vip.initLayer()
        }
      }, this.clock * 1000)
    }
  }
}
</script>

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