<!--
 * @Description: 储量专题
 * @Author: 王晓颖
 * @Date: 2021-04-08
 -->
<template>
  <div id="centerDiv" class="mapcontainer">
    <!--时钟-->
    <clock/>
    <!--天气-->
    <weather/>
    <!--选择区-->
    <select-all-storage @change="selectChange" />
    <!--统计结果显示-->
    <div class="label-container">
      <div class="label-div">
        <div class="label">
          {{ liquidFactoryData.name | liquidNameFilter }}
        </div>
        <div class="value">
          {{ liquidFactoryData.value }}
        </div>
      </div>
      <div class="label-div">
        <div class="label">
          {{ gasStationData.name | gasNameFilter }}
        </div>
        <div class="value">
          {{ gasStationData.value }}
        </div>
      </div>
    </div>
    <!--地图-->
    <Map :url="configUrl" @onload="onMapload" />
    <div class="map-btn-group">
      <select-button :select="factoryStorageShow" name="液化工厂储量" icon="icon-liquidFactory" @click="showFactoryStorage"/>
      <select-button :select="stationStorageShow" name="加气站储量" icon="icon-gasStation" @click="showStationStorage"/>
      <select-button :select="factoryShow" name="液化工厂加气站分布" icon="icon-position" @click="showPosition"/>
    </div>
    <!--遮罩-->
    <div class="mask">航天二院203所</div>
  </div>
</template>

<script>
import Map from '@/components/Map/MarsMap.vue'
import 'mars3d-heatmap'
import axios from 'axios'
import Weather from '@/components/weather/weather'
import Clock from '@/components/clock/Clock'
import SelectAllStorage from './components/selectAllStorage'
import SelectButton from '@/components/SelectTool/components/selectButton'
export default {
  name: 'Index',
  components: {
    SelectAllStorage,
    Weather,
    Clock,
    Map,
    SelectButton
  },
  filters: {
    liquidNameFilter(val) {
      return val + '液化工厂'
    },
    gasNameFilter(val) {
      return val + '加气站'
    }
  },

  data() {
    return {
      map: null, // 地图
      configUrl: 'static/config/config.json',
      alpha: 100, // 透明度
      underground: null, // ？
      factoryShow: true, // 显示液化工厂
      gasStationShow: true, // 显示加气站
      positionShow: true, // 显示位置
      factoryStorageShow: true, // 液化工厂储量
      stationStorageShow: false, // 加气站储量
      liquidFactoryData: {
        name: '全部',
        value: 196
      },
      gasStationData: {
        name: '全部',
        value: 196
      }, // 统计版展示数据
      liquidFactory: [], // 液化工厂数据
      gasStation: [], // 加气站
      stationLayer: null, // 管理站图层
      factoryStorageLayer: null, // 液化工厂分布图层
      stationStorageLayer: null, // 加气站存储层
      pointColorArr: ['#f33349', '#f79a2c', '#f2fa19', '#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.addFactoryPosition()
    },
    // 液化工厂位置
    addFactoryPosition() {
      axios.get('static/config/liquidFactory.json').then((res) => {
        res = res.data
        if (res.code === 200) {
          // 获取液化工厂数据
          this.liquidFactory = res.data[0].data
          this.liquidFactoryData.value = res.data[0].total
          // 加气站数据
          this.gasStation = res.data[1].data
          this.gasStationData.value = res.data[1].total
          // 添加点位
          this.addFeatures(this.liquidFactory, 'liquidFactory')
          // this.addFeatures(this.gasStation, 'gasStation')
        }
      })
    },
    // 添加隐患点储量柱状图
    addFeatures(arr, type) {
      const { mars3d } = this
      const colorList = ['#d71345', '#f15a22', '#f47920', '#f47920', '#fcaf17', '#fcaf17', '#63AEFF', '#63AEFF', '#1d953f', '#1d953f']
      if (type === 'liquidFactory') {
        const factoryStorageLayer = new mars3d.layer.GraphicLayer()
        this.factoryStorageLayer = factoryStorageLayer
        this.map.addLayer(factoryStorageLayer)
        for (const item of arr) {
          const realData = item.liquid_level
          const totalData = item.contain
          const position = [parseFloat(item.value[0]), parseFloat(item.value[1])]
          const html = `${item['name']}<br/>
                        <span style="color:#63AEFF">容量：${realData}</span><br/>
                        <span style="color:#FFB861">储量：${totalData}</span><br/>
                        <span style="color:#FFB861">液位值：${realData} 米</span>`
          const color = colorList[Math.floor(realData / totalData * 10)]
          this.addColumn(factoryStorageLayer, position, realData, totalData, color, html, 6000)
        }
      } else if (type === 'gasStation') {
        const stationStorageLayer = new mars3d.layer.GraphicLayer()
        this.stationStorageLayer = stationStorageLayer
        this.map.addLayer(stationStorageLayer)
        for (const item of arr) {
          const realData = item.liquid_level
          const totalData = item.contain
          const position = [parseFloat(item.value[0]), parseFloat(item.value[1])]
          const color = colorList[Math.floor(realData / totalData * 10)]
          const html = `${item['name']}<br/>
                        <span style="color:#63AEFF">库容：${realData} 吨</span><br/>
                        <span style="color:#FFB861">储量：${totalData} 吨</span><br/>
                        <span style="color:#FFB861">液位值：${realData} 米</span>`
          this.addColumn(stationStorageLayer, position, realData, totalData, color, html, 2000, false)
        }
      }
    },
    // 添加柱子
    addColumn(graphicLayer, position, realData, totalData, color = '#63AEFF', html, radius, showColumn2 = true) {
      const { mars3d, Cesium } = this
      // 下方实际数据
      const p = Cesium.Cartesian3.fromDegrees(position[0], position[1], 0)
      const height = realData * 1000
      var graphic1 = new mars3d.graphic.CylinderEntity({
        position: p,
        style: {
          length: height,
          topRadius: radius,
          bottomRadius: radius,
          opacity: 1,
          color: color
        }
      })
      graphic1.bindTooltip(html)
      graphicLayer.addGraphic(graphic1)
      // 上方空缺白色，表示未空余容量
      if (showColumn2) {
        const p2 = Cesium.Cartesian3.fromDegrees(position[0], position[1], 0)
        const height2 = (totalData - 0) * 1000
        var graphic2 = new this.mars3d.graphic.CylinderEntity({
          position: p2,
          style: {
            length: height2,
            topRadius: radius,
            bottomRadius: radius,
            opacity: 0.3,
            color: '#edf4ff'
          }
        })
        graphicLayer.addGraphic(graphic2)
        graphic2.bindTooltip(html)
      }
    },
    // 添加文字
    addText(graphicLayer, data, position, height) {
      const { mars3d, Cesium } = this
      var primitive = new mars3d.graphic.LabelPrimitive({
        position: Cesium.Cartesian3.fromDegrees(position[0], position[1], height),
        style: {
          text: data,
          font_size: 18,
          font_family: '楷体',
          style: Cesium.LabelStyle.FILL_AND_OUTLINE,
          fillColor: Cesium.Color.fromCssColorString('#00ff00'),
          outlineColor: Cesium.Color.BLACK,
          outlineWidth: 1,
          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          pixelOffset: new Cesium.Cartesian2(0, -20)
        }
      })
      graphicLayer.addGraphic(primitive)
    },
    // 选框发生变化
    selectChange({ area, dept }) {
      area = area === '全部' ? '' : area
      this.boardData.name = area
    },
    // 显示工厂
    showFactoryStorage(show) {
      // 现在正在显示
      if (show) { // 移除
        this.factoryStorageShow = false
        this.map.removeLayer(this.factoryStorageLayer, true)
      } else {
        this.factoryStorageShow = true
        this.addFeatures(this.liquidFactory, 'liquidFactory')
      }
    },
    // 显示加气站
    showStationStorage(show) {
      debugger
      // 现在正在显示
      if (show) { // 移除
        this.stationStorageShow = false
        console.log(this.stationStorageLayer)
        this.map.removeLayer(this.stationStorageLayer, true)
      } else {
        this.stationStorageShow = true
        this.addFeatures(this.gasStation, 'gasStation')
      }
    },
    // 显示隐患分布
    showPosition(show) {
      // if (show) { // 移除
      //   this.positionShow = false
      //   this.map.removeLayer(this.threatLayer, true)
      // } else {
      //   this.positionShow = true
      //   this.addThreatPosition()
      // }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .label-container{
    position: absolute;
    top: 6.5rem;
    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: 1rem;
        font-size:1rem;
      }
      .value{
        font-family: DS-DigitalBold;
        font-size:2rem;
      }
    }
  }
  .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;*/
  }
  /*logo遮罩*/
  .mask{
    position: fixed;
    padding-left:10px;
    padding-right:10px;
    bottom:0px;
    left:0px;
    background-color:#000000;
    color:#ffffff;
    line-height:2
  }

</style>