<!--
 * @Description: 天气专题
 * @Author: 王晓颖
 * @Date: 2021-04-11
 -->
<template>
  <div id="centerDiv" class="mapcontainer">
    <!--时钟-->
    <clock/>
    <!--天气-->
    <weather/>

    <!--地图-->
    <Map :url="configUrl" @onload="onMapload">
      <pipe-layer :show="true"/>
      <weather-layer ref="weather" :show="weatherShow"/>
      <disaster-layer ref="disaster" :show="disasterShow"/>
    </Map>
    <!--按钮-->
    <div class="map-btn-group">
      <select-button :select="weatherShow" name="天气预报" icon="icon-weather" @click="showWeather(weatherShow)"/>
      <select-button :select="disasterShow" name="气象预警" icon="icon-disaster" @click="showDisaster(disasterShow)"/>
      <!--<select-button :select="weatherHeatShow" name="气温热力图" icon="icon-heat" @click="showWeatherHeat(weatherHeatShow)"/>-->
    </div>
    <!--logo-->
    <brand/>

  </div>
</template>

<script>
import 'mars3d-heatmap'
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'
import SelectButton from '@/components/SelectTool/components/selectButton'
import { getWeatherList, getDisasterList } from '@/api/weather'
import { getToday } from '@/utils/dateutils'
import axios from 'axios'
import WeatherLayer from "../../components/Map/components/weatherLayer";
import DisasterLayer from "../../components/Map/components/disasterLayer";
import PipeLayer from "../../components/Map/components/pipeLayer";
export default {
  name: 'Vip',
  components: {
    PipeLayer,
    DisasterLayer,
    WeatherLayer,
    Weather,
    Clock,
    Map,
    Brand,
    SelectButton
  },
  data() {
    return {
      map: null, // 地图
      configUrl: 'static/config/config.json',
      alpha: 100, // 透明度
      underground: null, // ？
      weatherShow: true, // 显示气温点位图
      disasterShow: false, // 显示气象灾害图层
      weatherHeatShow: false, // 气温热力图
      weatherHeatLayer: null, // 气温热力图
      timer: null, // 定时器
      clock: 7200 //
    }
  },
  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()
    },
    // 添加地震分布
    addWeatherHeat() {
      const { mars3d } = this
      axios.get('static/config/weather.json').then((res) => {
        const data = res.data.data
        if (res.data.code === 200) {
          // 过滤掉经度为null的
          const heatLayer = new mars3d.layer.HeatLayer({
            positions: data.map(item => {
              return { lng: item.lng, lat: item.lat, value: item.wd }
            }),
            heatStyle: {
              radius: 30, // 半径
              blur: 1 // 模糊因子
            },
            // 以下为矩形矢量对象的样式参数
            style: {
              opacity: 0.8,
              clampToGround: false,
              height: 10000
            },
            redrawZoom: true,
            flyTo: false
          })
          this.weatherHeatLayer = heatLayer
          this.map.addLayer(heatLayer)
        }
      })
    },
    showWeather(show) {
      this.weatherShow = !this.weatherShow
    },
    showDisaster(show) {
      this.disasterShow = !this.disasterShow
    },
    showWeatherHeat(show) {
      if (show) { // 移除
        this.weatherHeatShow = false
        this.map.removeLayer(this.weatherHeatLayer, true)
      } else {
        this.weatherHeatShow = true
        this.addWeatherHeat()
      }
    },
    refreshData() {
      this.timer = setInterval(() => {
        console.log('refreshData')
        if (this.weatherShow) { // 如果供需图层不为空，刷新工薪数据
          this.$refs.weather.initLayer()
        }
        if (this.disasterShow) {
          this.$refs.disaster.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: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>