<!--
 * @Description: 管网分布专题
 * @Author: 王晓颖
 * @Date: 2021-04-13
 -->
<template>
  <layout-map>
    <!--地图-->
    <Map :url="configUrl" @onload="onMapload" >
      <pipe-layer :show="true"/>
      <route-layer ref="route" :show="routeShow"/>
      <station-layer ref="station" :show="station2Show"/>
      <liquid-factory-layer ref="liquidFactory" :show="liquidFactoryShow"/>
      <valve-layer ref="valveChamberShow" :show="valveChamberShow"/>
      <hca-point-layer ref="hca" :show="hcaShow"/>
      <threat-layer ref="constructionThreat" :show="constructionThreatShow" type="construction"/>
      <threat-layer ref="sinkThreat" :show="sinkThreatShow" color="#2C06A1" type="sinkThreat"/>
      <threat-layer ref="waterThreat" :show="waterThreatShow" color="#1FFEE6" type="waterThreat"/>
      <disaster-layer ref="disaster" :show="disasterShow"/>
      <earthquake-layer ref="earthquake" :show="earthquakeShow"/>
    </Map>
    <!--地图切换按钮-->
    <div class="map-btn-group">
      <select-button :select="routeShow" name="巡检人员" icon="icon-people" @click="showRoute(routeShow)"/>
      <select-button :select="station2Show" name="站场" icon="icon-station2" @click="showStation2(station2Show)"/>
      <select-button :select="valveChamberShow" name="阀室" icon="valve" @click="showValveChamber(valveChamberShow)"/>
      <select-button :select="liquidFactoryShow" name="液化工厂" icon="icon-liquidFactory" @click="showLiquidFactory(liquidFactoryShow)"/>
      <select-button :select="hcaShow" name="高后果区" icon="icon-heat" @click="showHca(hcaShow)"/>
      <select-button :select="constructionThreatShow" name="第三方施工" icon="icon-construction" @click="constructionThreatShow=!constructionThreatShow"/>
      <select-button :select="sinkThreatShow" name="塌陷隐患" icon="icon-sink" @click="sinkThreatShow=!sinkThreatShow"/>
      <select-button :select="waterThreatShow" name="水保隐患" icon="icon-water" @click="waterThreatShow=!waterThreatShow"/>
      <select-button :select="disasterShow" name="气象预警" icon="icon-disaster" @click="disasterShow=!disasterShow"/>
      <select-button :select="earthquakeShow" name="地震分布" icon="icon-earthquake" @click="earthquakeShow=!earthquakeShow"/>
      <!--<select-button :select="cameraShow" name="监控分布" icon="icon-camera" @click="showCamera(cameraShow)"/>-->
    </div>
    <threat-dialog ref="threatDialog"/>
    <high-consequence-dialog ref="hcaDialog"/>
  </layout-map>
</template>

<script>
import Map from '@/components/Map/MarsMap.vue'
import 'mars3d-heatmap'
import SelectButton from '@/components/SelectTool/components/selectButton'
import LayoutMap from '../../layout/layoutMap'
import ThreatDialog from './components/threatDialog'
import HighConsequenceDialog from './components/highConsequenceDialog'
import RouteLayer from '@/components/Map/components/routeLayer'
import ManageStationLayer from '@/components/Map/components/manageStationLayer'
import StationLayer from '@/components/Map/components/stationLayer'
import LiquidFactoryLayer from '@/components/Map/components/liquidFactoryLayer'
import ValveLayer from '@/components/Map/components/valveLayer'
import HcaHeatLayer from '@/components/Map/components/hcaHeatLayer'
import HcaPointLayer from '../../components/Map/components/hcaPointLayer'
import ThreatLayer from '../../components/Map/components/threatLayer'
import DisasterLayer from '../../components/Map/components/disasterLayer'
import EarthquakeLayer from '../../components/Map/components/earthquakeLayer'
import PipeLayer from "../../components/Map/components/pipeLayer";
export default {
  name: 'PipeOverview',
  components: {
    PipeLayer,
    EarthquakeLayer,
    DisasterLayer,
    ThreatLayer,
    HcaPointLayer,
    HcaHeatLayer,
    ValveLayer,
    LiquidFactoryLayer,
    StationLayer,
    ManageStationLayer,
    RouteLayer,
    HighConsequenceDialog,
    ThreatDialog,
    LayoutMap,
    Map,
    SelectButton
  },
  data() {
    return {
      map: null, // 地图
      configUrl: 'static/config/config.json',
      alpha: 100, // 透明度
      underground: null, // ？
      routeShow: true, // 显示巡检人员
      stationShow: true, // 显示管理处
      station2Show: false, // 站场
      valveChamberShow: false, // 阀室
      liquidFactoryShow: false, // 液化工厂
      hcaShow: false, // 显示高后果区
      waterThreatShow: false, // 显示水保隐患位置
      constructionThreatShow: false, // 显示第三方施工位置
      sinkThreatShow: false, // 显示塌陷隐患位置
      disasterShow: false, // 显示气象灾害图层
      earthquakeShow: false,
      cameraShow: false,
      cameraLayer: null, // 监控图层
      timer: null, // 轮训定时器
      clock: 86400 // 间隔时间
    }
  },
  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()
    },
    // 是否显示高后果区
    showHca(show) {
      this.hcaShow = !this.hcaShow
    },
    // 是否显示水保隐患
    showWaterThreat(show) {
      // 现在正在显示
      this.waterThreatShow = !this.waterThreatShow
    },
    // 是否显示第三方施工
    showConstructionThreat(show) {
      this.constructionThreatShow = !this.constructionThreatShow
    },
    // 是否显示塌陷
    showSinkThreat(show) {
      this.sinkThreatShow = !this.sinkThreatShow
    },
    // 显示管理处
    showStation(show) {
      this.stationShow = !this.stationShow
    },
    // 显示巡检人员
    showRoute(show) {
      this.routeShow = !this.routeShow
    },
    // 显示站场
    showStation2(show) {
      this.station2Show = !this.station2Show
    },
    // 显示阀室
    showValveChamber(show) {
      this.valveChamberShow = !this.valveChamberShow
    },
    // 显示液化工厂
    showLiquidFactory(show) {
      this.liquidFactoryShow = !this.liquidFactoryShow
    },
    // 灾害
    showDisaster(show) {
      this.disasterShow = !this.disasterShow
    },
    // 显示地震
    showEarthquake(show) {
      this.earthquakeShow = !this.earthquakeShow
    },
    // 显示摄像头
    showCamera(show) {
      this.cameraShow = !this.cameraShow
    },
    refreshData() {
      this.timer = setInterval(() => {
        console.log('refreshData')
        if (this.routeShow) {
          this.refs.route.initLayer()
        }
        if (this.earthquakeShow) {
          this.refs.earthquake.initLayer()
        }
        if (this.disasterShow) {
          this.refs.disaster.initLayer()
        }
        if (this.hcaShow) {
          this.refs.hca.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;
    z-index: 100;
    bottom:3rem;
    left:50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
  }
</style>