<!--
 * @Description: 管网分布专题
 * @Author: 王晓颖
 * @Date: 2021-04-13
 -->
<template>
  <layout-map>
    <!--地图-->
    <Map :url="configUrl" :colorful="true" @onload="onMapload">
      <pipe-layer ref="pipe" :show="pipeShow"/>
      <supply-layer ref="supply" :show="supplyShow"/>
      <weather-layer ref="weather" :show="weatherShow"/>
      <disaster-layer ref="disaster" :show="disasterShow"/>
      <hca-heat-layer ref="hcaHeat" :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="#ffcc00" type="waterThreat"/>
      <route-layer ref="route" :show="routeShow"/>
      <manage-station-layer ref="manageStation" :show="stationShow"/>
      <station-layer ref="station" :show="station2Show"/>
      <liquid-factory-layer ref="liquidFactory" :show="liquidFactoryShow"/>
      <valve-layer ref="valveChamber" :show="valveChamberShow"/>
    </Map>
    <!--地图切换按钮-->
    <div class="map-btn-group">
      <button2 v-model="supplyShow" name="供应情况" icon="icon-station2" @click="showSupply(supplyShow)"/>
      <button2 :select="routeShow" name="巡线情况" icon="icon-people" @click="showRoute(routeShow)"/>
      <button2 :select="weatherShow" name="气象预报" icon="icon-disaster" @click="showWeather(weatherShow)"/>
      <button2 :select="disasterShow" name="气象预警" icon="icon-disaster" @click="showDisaster(disasterShow)"/>
      <button2 :select="hcaShow" name="高后果区" icon="icon-heat" @click="showHca(hcaShow)"/>
      <button2 :select="constructionThreatShow" name="第三方施工" icon="icon-construction" @click="showConstructionThreat()"/>
      <button2 :select="sinkThreatShow" name="塌陷隐患" icon="icon-sink" @click="showSinkThreat(sinkThreatShow)"/>
      <button2 :select="waterThreatShow" name="水保隐患" icon="icon-water" @click="showWaterThreat(waterThreatShow)"/>
    </div>
    <div class="map-point-group">
      <button2 style="margin-bottom:5px" :select="pipeShow" name="管线" icon="icon-station2" @click="pipeShow=!pipeShow"/>
      <button2 style="margin-bottom:5px" :select="stationShow" name="管理站" icon="icon-station2" @click="showStation(stationShow)"/>
      <button2 :select="station2Show" name="站场" icon="icon-station2" @click="station2Show=!station2Show"/>
      <!--<button2 :select="station2Show" name="站场" icon="icon-station2" @click="showStation2(station2Show)"/>-->

    </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 Button2 from '@/components/Button/button2'
import LayoutMap from '../../layout/layoutMapSimple'
import ThreatDialog from './components/threatDialog'
import HighConsequenceDialog from './components/highConsequenceDialog'
import SupplyLayer from '@/components/Map/components/supplyLayer'
import Weather from '@/components/weather/weather'
import WeatherLayer from '@/components/Map/components/weatherLayer'
import DisasterLayer from '@/components/Map/components/disasterLayer'
import HcaHeatLayer from '@/components/Map/components/hcaHeatLayer'
import ThreatLayer from '@/components/Map/components/threatLayer'
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 PipeLayer from '@/components/Map/components/pipeLayer'
export default {
  name: 'MapOverview2',
  components: {
    PipeLayer,
    ValveLayer,
    LiquidFactoryLayer,
    StationLayer,
    ManageStationLayer,
    RouteLayer,
    ThreatLayer,
    HcaHeatLayer,
    DisasterLayer,
    WeatherLayer,
    Weather,
    SupplyLayer,
    HighConsequenceDialog,
    ThreatDialog,
    LayoutMap,
    Map,
    Button2
  },
  data() {
    return {
      map: null, // 地图
      configUrl: 'static/config/config.json',
      alpha: 100, // 透明度
      index: 1, // 缩放倍数
      underground: null, // ？
      pipeShow: true, // 显示管线
      supplyShow: false, // 显示供应情况
      routeShow: false, // 显示巡检人员
      station2Show: false, // 站场
      valveChamberShow: false, // 阀室
      liquidFactoryShow: false, // 液化工厂
      hcaShow: false, // 显示高后果区
      stationShow: false, // 显示管理处
      weatherShow: false, // 显示天气预报
      waterThreatShow: false, // 显示水保隐患位置
      constructionThreatShow: false, // 显示第三方施工位置
      sinkThreatShow: false, // 显示塌陷隐患位置
      disasterShow: false, // 显示气象灾害图层
      earthquakeShow: false,
      cameraShow: false,
      timer: null, // 轮训定时器
      clock: 1800 // 间隔时间,1800~30分钟
    }
  },
  mounted() {
    // 处理iframe监听
    window.addEventListener('message', (event) => {
      console.log(event)
      var origin = event.origin
      console.log(origin)
      var data = event.data
      console.log(data)
      // 如果是数组
      if (Array.isArray(data)) {
        const item = data.filter(item => item.selected)[0]
        if (item.value === '高后果区数量') {
          this.showHca()
        } else if (item.value === '第三方施工数量') {
          this.showConstructionThreat()
        } else if (item.value === '水保隐患数量') {
          this.showWaterThreat()
        } else if (item.value === '塌陷数量') {
          this.showSinkThreat()
        } else if (item.chartType === 'pill' && item.wdName === '区域') {
          this.showSupplyAndOpenTooltip(item.value)
        }
      }
    }, false)
  },
  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.supplyShow = true
      this.refreshData()
    },
    // 显示供应图层并打开弹窗
    showSupplyAndOpenTooltip(currentCity) {
      if (!this.supplyShow) {
        this.supplyShow = true
        this.weatherShow = false
        this.hcaShow = false
        this.constructionThreatShow = false
        this.sinkThreatShow = false
        this.waterThreatShow = false
        this.disasterShow = false
      }
      if (currentCity) {
        this.$refs.supply.openTooltip(currentCity + '市')
      }
    },
    // 显示供应
    showSupply() {
      this.supplyShow = !this.supplyShow
      if (this.supplyShow) {
        this.weatherShow = false
        this.hcaShow = false
        this.constructionThreatShow = false
        this.sinkThreatShow = false
        this.waterThreatShow = false
        this.disasterShow = false
        this.routeShow = false
      }
    },
    // 气象控制
    showWeather() {
      this.weatherShow = !this.weatherShow
      if (this.weatherShow) {
        this.supplyShow = false
        this.hcaShow = false
        this.constructionThreatShow = false
        this.sinkThreatShow = false
        this.waterThreatShow = false
        this.disasterShow = false
        this.routeShow = false
      }
    },
    // 是否显示高后果区
    showHca() {
      this.hcaShow = !this.hcaShow
      if (this.hcaShow) {
        this.supplyShow = false
        this.weatherShow = false
        this.disasterShow = false
        this.routeShow = false
      }
    },
    // 是否显示水保隐患
    showWaterThreat() {
      this.waterThreatShow = !this.waterThreatShow
      if (this.waterThreatShow) {
        this.supplyShow = false
        this.weatherShow = false
        this.disasterShow = false
        this.routeShow = false
      }
    },
    // 是否显示第三方施工
    showConstructionThreat() {
      this.constructionThreatShow = !this.constructionThreatShow
      if (this.constructionThreatShow) {
        this.supplyShow = false
        this.weatherShow = false
        this.disasterShow = false
        this.routeShow = false
      }
    },
    // 是否显示塌陷
    showSinkThreat() {
      this.sinkThreatShow = !this.sinkThreatShow
      if (this.sinkThreatLayer) {
        this.supplyShow = false
        this.weatherShow = false
        this.disasterShow = false
        this.routeShow = false
      }
    },
    // 显示巡检人员
    showRoute() {
      this.routeShow = !this.routeShow
      if (this.routeShow) {
        this.supplyShow = false
        this.hcaShow = false
        this.constructionThreatShow = false
        this.sinkThreatShow = false
        this.waterThreatShow = false
        this.weatherShow = false
        this.disasterShow = false
      }
    },
    // 显示管理处
    showStation(show) {
      this.stationShow = !this.stationShow
      this.station2Show = false
      this.liquidFactory = false
      this.valveChamberShow = false
    },
    // 显示站场
    showStation2(show) {
      this.station2Show = !this.station2Show
      this.stationShow = false
      this.liquidFactory = false
      this.valveChamberShow = false
    },
    // 显示阀室
    showValveChamber(show) {
      this.valveChamberShow = !this.valveChamberShow
      this.station2Show = false
      this.stationShow = false
      this.liquidFactory = false
    },
    // 显示液化工厂
    showLiquidFactory(show) {
      this.liquidFactory = !this.liquidFactoryShow
      this.valveChamberShow = false
      this.station2Show = false
      this.stationShow = false
    },
    // 灾害
    showDisaster() {
      this.disasterShow = !this.disasterShow
      if (this.disasterShow) {
        this.supplyShow = false
        this.hcaShow = false
        this.constructionThreatShow = false
        this.sinkThreatShow = false
        this.waterThreatShow = false
        this.weatherShow = false
      }
    },
    // 显示地震
    showEarthquake(show) {
      if (show) { // 移除
        this.earthquakeShow = false
        this.map.removeLayer(this.earthquakeLayer, true)
        this.earthquakeLayer = null
      } else {
        this.earthquakeShow = true
        this.addEarthquake()
      }
    },
    // 刷新数据
    refreshData() {
      this.timer = setInterval(() => {
        console.log('refreshData')
        if (this.routeShow) {
          this.$refs.route.initLayer()
        }
        if (this.hcaShow) {
          this.$refs.hcaHeat.initLayer()
        }
        if (this.sinkThreatShow) {
          this.$refs.sinkThreat.initLayer()
        }
        if (this.waterThreatShow) {
          this.$refs.waterThreat.initLayer()
        }
        if (this.constructionThreatShow) {
          this.$refs.constructionThreat.initLayer()
        }
      }, this.clock * 1000)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .map-btn-group{
    position: absolute;
    bottom:30px;
    /*top:120px;*/
    left:50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
  }
  .map-point-group{
    position: absolute;;
    bottom:90px;
    /*bottom:30px;*/
    right:28%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
</style>