<!--
 * @Description: 巡线专题
 * @Author: 王晓颖
 * @Date: 2021-04-12
 -->
<template>
  <layout-map>
    <!--<select-route @change="selectChange"/>-->
    <!--统计结果显示-->
    <!--<div v-show="boardData.value!=null" class="label-div">-->
    <!--<div class="label">-->
    <!--{{ boardData.name }}-->
    <!--</div>-->
    <!--<div class="value">-->
    <!--{{ boardData.value }}-->
    <!--</div>-->
    <!--</div>-->
    <!--地图-->
    <Map :url="configUrl" @onload="onMapload" >
      <pipe-layer ref="pipe" :show="true"/>
      <hca-heat-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"/>
      <route-layer ref="route" :show="routeShow"/>
      <manage-station-layer ref="manageStation" :show="stationShow"/>
    </Map>
    <!--地图切换按钮-->
    <div class="map-btn-group">
      <select-button :select="routeShow" name="巡检人员" icon="icon-people" @click="showRoute(routeShow)"/>
      <select-button :select="hcaShow" name="高后果区" icon="icon-heat" @click="showHca(hcaShow)"/>
      <select-button :select="constructionThreatShow" name="第三方施工" icon="icon-construction" @click="showConstructionThreat(constructionThreatShow)"/>
      <select-button :select="sinkThreatShow" name="塌陷隐患" icon="icon-sink" @click="showSinkThreat(sinkThreatShow)"/>
      <select-button :select="waterThreatShow" name="水保隐患" icon="icon-water" @click="showWaterThreat(waterThreatShow)"/>
      <select-button :select="stationShow" name="管理处" icon="icon-station" @click="showStation"/>
    </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 SelectRoute from './components/selectRoute'
import ThreatDialog from './components/threatDialog'
import HighConsequenceDialog from './components/highConsequenceDialog'
import ThreatLayer from '@/components/Map/components/threatLayer'
import RouteLayer from '@/components/Map/components/routeLayer'
import ManageStationLayer from '@/components/Map/components/manageStationLayer'
import PipeLayer from '@/components/Map/components/pipeLayer'
import HcaPointLayer from '@/components/Map/components/hcaPointLayer'
import HcaHeatLayer from '@/components/Map/components/hcaHeatLayer'
export default {
  name: 'WaterThreat',
  components: {
    HcaHeatLayer,
    ManageStationLayer,
    RouteLayer,
    ThreatLayer,
    PipeLayer,
    HcaPointLayer,
    HighConsequenceDialog,
    ThreatDialog,
    SelectRoute,
    LayoutMap,
    Map,
    SelectButton
  },
  filters: {
  },

  data() {
    return {
      map: null, // 地图
      configUrl: 'static/config/config.json',
      alpha: 100, // 透明度
      underground: null, // ？
      routeShow: true, // 显示巡检人员
      hcaShow: false, // 显示高后果区
      stationShow: true, // 显示管理处
      waterThreatShow: false, // 显示水保隐患位置
      constructionThreatShow: false, // 显示第三方施工位置
      sinkThreatShow: false, // 显示塌陷隐患位置
      boardData: {
        name: '巡检人员',
        value: null
      }, // 统计版展示数据
      threatLevel: {
        '1': 'A级',
        '2': 'B级',
        '3': 'C级',
        '4': '问题'
      }, // 隐患等级
      manageStations: [
        { 'x': 112.73874, 'y': 37.693689, 'z': 0, 'name': '晋中管理处' },
        { 'x': 111.121552, 'y': 37.5245, 'z': 0, 'name': '吕梁管理处' },
        { 'x': 112.929902, 'y': 39.622888, 'z': 0, 'name': '同朔管理处' },
        { 'x': 112.72496, 'y': 38.415485, 'z': 0, 'name': '忻州管理处' },
        { 'x': 113.58249, 'y': 37.851892, 'z': 0, 'name': '阳泉管理处' },
        { 'x': 110.980927, 'y': 35.010828, 'z': 0, 'name': '运城管理处' },
        { 'x': 113.038394, 'y': 35.850111, 'z': 0, 'name': '长晋管理处' },
        { 'x': 111.491467, 'y': 36.064572, 'z': 0, 'name': '临汾管理处' }
      ],
      routeData: [], // 巡检人员数据
      highConsequence: [], // 高后果区列表
      constructionThreatArea: [], // 第三方施工隐患列表
      waterThreatArea: [], // 水保隐患列表
      sinkThreatArea: [], // 塌陷列表
      stationLayer: null, // 管理站图层
      hcaLayer: null, // 高后果区图层
      constructionThreatLayer: null, // 第三方施工分布图层
      waterThreatLayer: null, // 水保隐患分布图层
      sinkThreatLayer: null, // 塌陷隐患分布图层
      pointColorArr: ['#f33349', '#f79a2c', '#f2fa19', '#95e40c', '#1ffee6'],
      routeLayer: 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()
    },
    // 选框发生变化
    selectChange({ area }) {
      area = area === '全部' ? '' : area
      // 查询数据
      let count = 0
      for (const item of this.routeData) {
        let flag = true // 标记是否合格
        // 比较区域
        if (area && item['depname'] && item['depname'].indexOf(area) === -1) {
          flag = false
        }
        if (flag) {
          count++
        }
      }
      this.boardData.value = count
    },
    // 自定义的弹窗
    addStationDiv() {
      const { Cesium, mars3d } = this
      const graphicLayer = new mars3d.layer.GraphicLayer()
      this.graphicLayer = graphicLayer
      this.map.addLayer(graphicLayer)
      for (const station of this.highConsequenceStation) {
        var graphic = new mars3d.graphic.DivGraphic({
          position: Cesium.Cartesian3.fromDegrees(station.x, station.y, 10100),
          style: {
            html: `<div class="divpoint divpoint-theme-29baf1">
                    <div class="divpoint-wrap">
                        <div class="area">
                            <div class="arrow-lt"></div>
                            <div class="b-t"></div>
                            <div class="b-r"></div>
                            <div class="b-b"></div>
                            <div class="b-l"></div>
                            <div class="arrow-rb"></div>
                            <div class="label-wrap">
                                <div class="title">${station.name}</div>
                                </div></div></div></div>
                                    `,
            // anchor: [0, 0],
            horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(10000, 500000), // 按视距距离显示
            scaleByDistance: new Cesium.NearFarScalar(10000, 1.0, 500000, 0.1),
            clampToGround: true,
            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
          },
          pointerEvents: false // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
        })
        graphicLayer.addGraphic(graphic)
        graphic.testPoint = false // 打开测试点，与DIV点进行对比位置调整css
      }
    },
    // 是否显示高后果区
    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
    },
    refreshData() {
      this.timer = setInterval(() => {
        console.log('refreshData')
        if (this.routeShow) {
          this.$refs.route.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;
    bottom:3rem;
    left:50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
  }
</style>