<!--
 * @Description: 管网分布专题
 * @Author: 王晓颖
 * @Date: 2021-04-13
 -->
<template>
  <layout-map>
    <!--地图-->
    <Map :url="configUrl" @onload="onMapload" />
    <!--地图切换按钮-->
    <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="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="disasterShow" name="气象预警" icon="icon-disaster" @click="showDisaster(disasterShow)"/>
      <select-button :select="earthquakeShow" name="地震分布" icon="icon-earthquake" @click="showEarthquake(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 axios from 'axios'
import SelectButton from '@/components/SelectTool/components/selectButton'
import LayoutMap from '../../layout/layoutMap'
import ThreatDialog from './components/threatDialog'
import HighConsequenceDialog from './components/highConsequenceDialog'
import { getDisasterList, getEarthquakeList } from '@/api/weather'

export default {
  name: 'PipeOverview',
  components: {
    HighConsequenceDialog,
    ThreatDialog,
    LayoutMap,
    Map,
    SelectButton
  },
  data() {
    return {
      map: null, // 地图
      configUrl: 'static/config/config.json',
      alpha: 100, // 透明度
      underground: null, // ？
      routeShow: true, // 显示巡检人员
      station2Show: false, // 站场
      valveChamberShow: false, // 阀室
      liquidFactoryShow: false, // 液化工厂
      hcaShow: false, // 显示高后果区
      stationShow: true, // 显示管理处
      waterThreatShow: false, // 显示水保隐患位置
      constructionThreatShow: false, // 显示第三方施工位置
      sinkThreatShow: false, // 显示塌陷隐患位置
      disasterShow: false, // 显示气象灾害图层
      earthquakeShow: false,
      cameraShow: false,
      boardData: {
        name: '巡检人员',
        value: 6
      }, // 统计版展示数据
      disaster: {
        '台风': '01',
        '暴雨': '02',
        '暴雪': '03',
        '寒潮': '04',
        '大风': '05',
        '沙尘暴': '06',
        '高温': '07',
        '干旱': '08',
        '雷电': '09',
        '冰雹': '10',
        '霜冻': '11',
        '大雾': '12',
        '霾': '13',
        '道路结冰': '14'
      }, // 灾害与数字对应表
      disasterLevel: {
        '蓝色': '01',
        '黄色': '02',
        '橙色': '03',
        '红色': '04'
      }, // 灾害等级与数字对应表
      manageStations: [],
      station2: [], // 站场列表
      valveChambers: [], // 阀室
      liquidFactory: [], // 液化工厂
      routeData: [], // 巡检人员数据
      highConsequence: [], // 高后果区列表
      constructionThreatArea: [], // 第三方施工隐患列表
      waterThreatArea: [], // 水保隐患列表
      sinkThreatArea: [], // 塌陷列表
      stationLayer: null, // 管理站图层
      hcaLayer: null, // 高后果区图层
      constructionThreatLayer: null, // 第三方施工分布图层
      waterThreatLayer: null, // 水保隐患分布图层
      sinkThreatLayer: null, // 塌陷隐患分布图层
      factoryModelLayer: null, // 液化工厂
      station2Layer: null, // 站场
      valveChamberLayer: null, // 阀室
      disasterLayer: null, // 气象灾害图层
      earthquakeLayer: null, // 地震图层
      cameraLayer: null, // 监控图层
      pointColorArr: ['#f33349', '#f79a2c', '#f2fa19', '#95e40c', '#1ffee6'],
      routeLayer: 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.addHcaPosition()
      // 添加管理处
      // this.addStation()
      this.addRoute()
      // this.addCamera()
      // this.addEarthquake()
      // this.addFactoryModel()
      // this.addStation2()
      // this.addValveChamber()
      // this.addStationDiv()
      // 添加水保隐患隐患点
      // this.addWaterThreatPosition()
    },
    // 添加巡线人员位置
    addRoute() {
      const { mars3d, Cesium } = this
      // 创建DIV数据图层
      var graphicLayer = new mars3d.layer.DivLayer()
      this.routeLayer = graphicLayer
      this.map.addLayer(graphicLayer)
      graphicLayer.on(mars3d.EventType.click, event => {
        console.log('监听layer，单击了矢量对象', event)
      })
      graphicLayer.bindPopup(event => {
        const route = event.graphic.attr
        const lastPosition = route.lineTrackingList[0]
        const html =
            '<div>姓名：' + route.name +
            '<br/>所属管理处：' + route['depname'] +
            '<br/>电话：' + route['phone'] +
            '<br/>站名：' + route['unitname'] +
            '<br/>时间：' + lastPosition.locationdate +
            '<br/>gps状态：' + lastPosition['gprs'] + '</div>'
        return html
      })
      axios.get('static/config/patrolReal.json').then((res) => {
        res = res.data
        if (res.code === 200) {
          this.routeData = res.data
          this.boardData.value = this.routeData.length
          for (const route of this.routeData) {
            const lastPosition = route.lineTrackingList[0]
            const graphic = new mars3d.graphic.DivGraphic({
              position: [lastPosition.lon, lastPosition.lat, 10000],
              style: {
                html: '<img src="static/images/map/pe02.gif" style="width:50px;height:50px;" ></img>',
                distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 2000000), // 按视距距离显示
                horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                verticalOrigin: Cesium.VerticalOrigin.CENTER
              },
              attr: route,
              pointerEvents: true // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
            })
            graphicLayer.addGraphic(graphic)
          }
        }
      })
    },
    // 高后果区位置
    addHcaPosition() {
      const { mars3d } = this
      // 创建DIV数据图层
      var graphicLayer = new mars3d.layer.DivLayer()
      this.hcaLayer = graphicLayer
      this.map.addLayer(graphicLayer)
      graphicLayer.on(mars3d.EventType.click, event => {
        console.log('监听layer，单击了矢量对象', event)
        this.$refs.hcaDialog.initDialog(event.graphic.attr)
      })
      axios.get('static/config/highConsequence.json').then((res) => {
        res = res.data
        if (res.code === 200) {
          // 过滤掉经度为null的
          this.highConsequence = res.data.filter(item => item['经度'] !== null)
          this.addFeatures(graphicLayer, this.highConsequence, 'hca', '#f79a2c')
        }
      })
    },
    // 水保隐患位置
    addWaterThreatPosition() {
      const { mars3d } = this
      // 创建DIV数据图层
      var graphicLayer = new mars3d.layer.DivLayer()
      this.waterThreatLayer = graphicLayer
      graphicLayer.on(mars3d.EventType.click, event => {
        console.log('监听layer，单击了矢量对象', event)
        this.$refs.threatDialog.initDialog(event.graphic.attr)
      })
      this.map.addLayer(graphicLayer)
      axios.get('static/config/waterThreat.json').then((res) => {
        res = res.data
        if (res.code === 200) {
          // 过滤掉经度为null的
          this.waterThreatArea = res.data.filter(item => item['经度'] !== null)
          this.addFeatures(graphicLayer, this.waterThreatArea, 'waterThreat', '#1ffee6')
        }
      })
    },
    // 第三方施工隐患位置
    addConstructionThreatPosition() {
      const { mars3d } = this
      // 创建DIV数据图层
      var graphicLayer = new mars3d.layer.DivLayer()
      this.constructionThreatLayer = graphicLayer
      graphicLayer.on(mars3d.EventType.click, event => {
        console.log('监听layer，单击了矢量对象', event)
        this.$refs.threatDialog.initDialog(event.graphic.attr)
      })
      this.map.addLayer(graphicLayer)
      axios.get('static/config/threat.json').then((res) => {
        res = res.data
        if (res.code === 200) {
          // 过滤掉经度为null的
          this.constructionThreatArea = res.data.filter(item => item['经度'] !== null)
          this.addFeatures(graphicLayer, this.constructionThreatArea, 'construction', '#fbfe2d')
        }
      })
    },
    // 塌陷隐患位置
    addSinkThreatPosition() {
      const { mars3d } = this
      // 创建DIV数据图层
      var graphicLayer = new mars3d.layer.DivLayer()
      this.sinkThreatLayer = graphicLayer
      this.map.addLayer(graphicLayer)
      graphicLayer.on(mars3d.EventType.click, event => {
        console.log('监听layer，单击了矢量对象', event)
        this.$refs.threatDialog.initDialog(event.graphic.attr)
      })
      axios.get('static/config/sinkThreat.json').then((res) => {
        res = res.data
        if (res.code === 200) {
          // 过滤掉经度为null的
          this.sinkThreatArea = res.data.filter(item => item['经度'] !== null)
          this.addFeatures(graphicLayer, this.sinkThreatArea, 'sinkThreat', '#2c06a1')
        }
      })
    },
    // 添加隐患点: type类型，arr数组， clr颜色
    addFeatures(graphicLayer, arr, type, clr) {
      const { mars3d, Cesium } = this
      // 创建DIV数据图层\
      for (var i = 0, len = arr.length; i < len; i++) {
        const item = arr[i]
        var jd = item['经度']
        var wd = item['纬度']
        var graphic = new mars3d.graphic.DivGraphic({
          position: Cesium.Cartesian3.fromDegrees(jd, wd, 0),
          style: {
            html: '<div class="mars3d-animation-point" style="color:' + clr + ';"><p></p></div>',
            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 2000000) // 按视距距离显示
          },
          attr: item
        })
        graphicLayer.addGraphic(graphic)
      }
    },
    // 管理处
    addStation() {
      const { mars3d } = this
      var graphicLayer = new mars3d.layer.GraphicLayer()
      this.stationLayer = graphicLayer
      this.map.addLayer(graphicLayer)
      axios.get('static/config/manageStation.json').then((res) => {
        res = res.data
        if (res.code === 200) {
          this.manageStations = res.data
          for (const station of this.manageStations) {
            const graphic = new mars3d.graphic.ModelEntity({
              name: station.name,
              position: [station.x, station.y, 0],
              style: {
                url: 'static/gltf/output/guanlizhan.gltf',
                scale: 5,
                heading: 90,
                minimumPixelSize: 30
              },
              tooltip: station.name
            })
            graphicLayer.addGraphic(graphic)
          }
        }
      })
    },
    // 站场
    addStation2() {
      const { mars3d } = this
      var graphicLayer = new mars3d.layer.GraphicLayer()
      this.station2Layer = graphicLayer
      this.map.addLayer(graphicLayer)
      axios.get('static/config/station.json').then((res) => {
        res = res.data
        if (res.code === 200) {
          this.station2 = res.data
          for (const station of this.station2) {
            const graphic = new mars3d.graphic.ModelEntity({
              name: station.name,
              position: [station.x, station.y, 0],
              style: {
                url: 'static/gltf/output/zhanchang.gltf',
                scale: 5,
                heading: 90,
                minimumPixelSize: 30
              },
              tooltip: station.name
            })
            graphicLayer.addGraphic(graphic)
          }
        }
      })
    },
    // 阀室
    addValveChamber() {
      const { mars3d } = this
      var graphicLayer = new mars3d.layer.GraphicLayer()
      this.valveChamberLayer = graphicLayer
      this.map.addLayer(graphicLayer)
      axios.get('static/config/valveChamber.json').then((res) => {
        res = res.data
        if (res.code === 200) {
          this.valveChambers = res.data
          for (const station of this.valveChambers) {
            const graphic = new mars3d.graphic.ModelEntity({
              name: station.name,
              position: [station.x, station.y, 0],
              style: {
                url: 'static/gltf/output/fashi.gltf',
                scale: 4,
                heading: 0,
                minimumPixelSize: 15
              },
              tooltip: station.name
            })
            graphicLayer.addGraphic(graphic)
          }
        }
      })
    },
    // 液化工厂三维模型
    addFactoryModel() {
      const { mars3d } = this
      axios.get('static/config/liquidFactory.json').then((res) => {
        res = res.data
        if (res.code === 200) {
          // 获取液化工厂数据
          this.liquidFactory = res.data[0].data
          const factoryModelLayer = new mars3d.layer.ModelLayer({
            name: '液化工厂',
            url: 'static/gltf/output/yehuagongchang.gltf',
            style: {
              scale: 3,
              heading: 0,
              minimumPixelSize: 30,
              clampToGround: true
            },
            positions: this.liquidFactory.map(item => {
              return { lng: parseFloat(item.value[0]), lat: parseFloat(item.value[1]), alt: 0 }
            })
          })
          this.factoryModelLayer = factoryModelLayer
          this.map.addLayer(factoryModelLayer)
        }
      })
    },
    // 显示气象灾害分布
    addDisaster() {
      const { mars3d, Cesium } = this
      const graphicLayer = new mars3d.layer.GraphicLayer()
      this.disasterLayer = graphicLayer
      this.map.addLayer(graphicLayer)
      getDisasterList().then((res) => {
        const data = res.data
        for (const item of data) {
          const img = 'static/images/weather_disaster/' + this.disaster[item.zhlx] + this.disasterLevel[item.zhdj] + '.png'
          const graphic = new mars3d.graphic.BillboardEntity({
            name: '气象灾害',
            position: [item.lng, item.lat, 10000],
            style: {
              image: img,
              pixelOffsetX: 0,
              pixelOffsetY: -20,
              scale: 0.5,
              horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
              verticalOrigin: Cesium.VerticalOrigin.BOTTOM
            }
          })
          var html = ` <div class="popup-win"><span class="title">${item.name}</span><br/>
                        <div style="color:#FFB861">预警：${item.zhlx}${item.zhdj}</div>
                        <div style="color:#63AEFF">时间：${item.value}</div>
                        </div>`
          graphic.bindTooltip(html, { anchor: [0, -20] }).openTooltip()
          graphicLayer.addGraphic(graphic)
        }
      })
    },
    // 添加地震
    addEarthquake() {
      const { mars3d, Cesium } = this
      const graphicLayer = new mars3d.layer.GraphicLayer()
      this.earthquakeLayer = graphicLayer
      this.map.addLayer(graphicLayer)
      getEarthquakeList().then((res) => {
        const data = res.data
        for (const item of data) {
          const img = 'static/images/map/earthquake.png'
          const graphic = new mars3d.graphic.BillboardEntity({
            name: '地震',
            position: [item.lng, item.lat, 0],
            style: {
              image: img,
              width: 70,
              height: 70,
              scale: 0.5,
              clampToGround: true,
              horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
              verticalOrigin: Cesium.VerticalOrigin.BOTTOM
            }
          })
          var html = ` <div class="popup-win"><span class="title">${item.name}</span><br/>
                        <div style="color:#FFB861">震级：${item.level}</div>
                        <div style="color:#FFB861">震源深度：${item.deep}</div>
                        <div style="color:#63AEFF">时间：${item.time}</div>
                        </div>`
          graphic.bindTooltip(html, { anchor: [0, -20] }).openTooltip()
          graphicLayer.addGraphic(graphic)
        }
      })
    },
    // 添加视频
    addCamera() {
      const { mars3d, Cesium } = this
      const graphicLayer = new mars3d.layer.GraphicLayer()
      this.cameraLayer = graphicLayer
      this.map.addLayer(graphicLayer)
      getDisasterList().then((res) => {
        const data = res.data
        for (const item of data) {
          const img = 'static/images/map/camera.png'
          const graphic = new mars3d.graphic.BillboardEntity({
            name: '监控点',
            position: new mars3d.LatLngPoint(item.lng, item.lat, 0),
            style: {
              image: img,
              width: 70,
              height: 70,
              // hasPixelOffset: true,
              // pixelOffsetX: 100,
              // pixelOffsetY: -50,
              scale: 0.5,
              clampToGround: true,
              horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
              verticalOrigin: Cesium.VerticalOrigin.BOTTOM
            }
          })
          graphicLayer.addGraphic(graphic)
        }
      })
    },
    // 是否显示高后果区
    showHca(show) {
      // 现在正在显示
      if (show) { // 移除
        this.hcaShow = false
        this.map.removeLayer(this.hcaLayer, true)
      } else {
        this.hcaShow = true
        this.addHcaPosition()
      }
    },
    // 是否显示水保隐患
    showWaterThreat(show) {
      // 现在正在显示
      if (show) { // 移除
        this.waterThreatShow = false
        this.map.removeLayer(this.waterThreatLayer, true)
      } else {
        this.waterThreatShow = true
        this.addWaterThreatPosition()
      }
    },
    // 是否显示第三方施工
    showConstructionThreat(show) {
      // 现在正在显示
      if (show) { // 移除
        this.constructionThreatShow = false
        this.map.removeLayer(this.constructionThreatLayer, true)
      } else {
        this.constructionThreatShow = true
        this.addConstructionThreatPosition()
      }
    },
    // 是否显示塌陷
    showSinkThreat(show) {
      // 现在正在显示
      if (show) { // 移除
        this.sinkThreatShow = false
        this.map.removeLayer(this.sinkThreatLayer, true)
      } else {
        this.sinkThreatShow = true
        this.addSinkThreatPosition()
      }
    },
    // 显示管理处
    showStation(show) {
      // 现在正在显示
      if (show) { // 移除
        this.stationShow = false
        this.map.removeLayer(this.stationLayer, true)
        // this.map.removeLayer(this.graphicLayer, true)
      } else {
        this.stationShow = true
        this.addStation()
        // this.addStationDiv()
      }
    },
    // 显示巡检人员
    showRoute(show) {
      if (show) { // 移除
        this.routeShow = false
        this.map.removeLayer(this.routeLayer, true)
      } else {
        this.routeShow = true
        this.addRoute()
      }
    },
    // 显示站场
    showStation2(show) {
      if (show) { // 移除
        this.station2Show = false
        this.map.removeLayer(this.station2Layer, true)
      } else {
        this.station2Show = true
        this.addStation2()
      }
    },
    // 显示阀室
    showValveChamber(show) {
      if (show) { // 移除
        this.valveChamberShow = false
        this.map.removeLayer(this.valveChamberLayer, true)
      } else {
        this.valveChamberShow = true
        this.addValveChamber()
      }
    },
    // 显示液化工厂
    showLiquidFactory(show) {
      if (show) { // 移除
        this.liquidFactoryShow = false
        this.map.removeLayer(this.factoryModelLayer, true)
      } else {
        this.liquidFactoryShow = true
        this.addFactoryModel()
      }
    },
    // 灾害
    showDisaster(show) {
      if (show) { // 移除
        this.disasterShow = false
        this.map.removeLayer(this.disasterLayer, true)
      } else {
        this.disasterShow = true
        this.addDisaster()
      }
    },
    // 显示地震
    showEarthquake(show) {
      if (show) { // 移除
        this.earthquakeShow = false
        this.map.removeLayer(this.earthquakeLayer, true)
      } else {
        this.earthquakeShow = true
        this.addEarthquake()
      }
    },
    // 显示摄像头
    showCamera(show) {
      console.log('func showCamera:' + show)
      if (show) { // 移除
        this.cameraShow = false
        this.map.removeLayer(this.cameraLayer, true)
      } else {
        this.cameraShow = true
        this.addCamera()
      }
      console.log('func showCamera over:' + this.cameraShow)
    }
  }
}
</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>