<template>
  <div style="overflow: hidden;" class="map-dz">
    <mars3d-map v-loading="mapLoading" :basemap="basemap" map-key="dz" @onload="onMapload"/>
<!--    主菜单伸缩-->
    <div :style="{backgroundImage:'url('+bgUrl+')'}" class="main-menu-btn" @click="routerJump"/>
<!--    图层管理-->
    <div v-if="!showTree" class="layer-hidden-div" @click="showTree=true">基础图层</div>
    <div class="layer-checkbox" v-show="showTree">
      <div class="layer-title"><i class="el-icon-arrow-right" style="margin-right: 10px;cursor: pointer" @click="showTree=false"/>基础图层</div>
      <el-tree
        v-loading="mapLoading"
        :data="mapJson"
        show-checkbox
        node-key="id"
        :default-expand-all="true"
        :default-checked-keys="checkedLayers"
        @check-change="handleCheckChange"
        :props="defaultProps">
      </el-tree>
    </div>
<!--    报警列表-->
    <alarm-list :show="showAlarm" :data="alarmList" @row-click="alarmRowClick" />
<!--    初始位置-->
    <div class="initPosition" @click="initPosition"/>
<!--    自动刷新-->
   <!-- <refresh-timer @search="searchH2s"/> -->
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getWellType } from '@/api/well/well'
import { getAlarmsNowZq, getWellAlarms, getH2SDevice, getH2SDeviceValue, uerLogin } from '@/api/overview/wellOverview'
import { toPixel, toLngLat, toSize } from '@/components/Amap/utils/convert-helper'
import Vue from 'vue'
import axios from 'axios'
import * as mars3d from 'mars3d'
import * as Cesium from 'mars3d-cesium'
import store from '@/store'
import { breadcrumb } from '@/settings'
import Mars3dMap from '@/components/Mars3D/Mars3dMap'
import { creatAicPoint, polylineC, polylineVolumeP } from '@/components/Mars3D/utils/ArcGisWfsLayer'
import { createPointLayer, createPointModelLayer } from '@/components/Mars3D/utils/GeoJsonLayer'
import mapJson from '@/assets/overview/map.json'
import RefreshTimer from './components/refreshTimer'
import AlarmList from './components/alarmList'
import { getToken, setToken, removeToken } from '@/utils/auth'

let layers = {}
let h2s = null
export default {
  name: 'Overview3D',
  components: { AlarmList, Mars3dMap, RefreshTimer },
  data() {
    return {
      bgUrl: require('../../assets/overview/menu.png'), // 背景图片
      showAlarm: true, // 是否显示报警
      alarmList: [], // 显示报警列表
      devList: [],
      checkedLayers:[20,21,25,26],
      basemap: 1113,
      mapLoading: true,
      showTree: false,
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      baseUrl: 'http://10.80.1.144:6080/arcgis/rest/services/ZNGX_ZB_GBZ/MapServer/',
      mapJson: mapJson
    }
  },
  computed: {
    ...mapGetters([
      'needRefresh',
      'bodyHeight'
    ])
  },
  watch: {
  },
  mounted() {
    this.$nextTick(() => {
      this.windowResize(window.innerHeight, window.innerWidth)
    })
  },
  beforeDestroy() {
    this.$store.dispatch('settings/changeSetting', {
      key: 'breadcrumb',
      value: true
    })
    this.$store.dispatch('settings/changeSetting', {
      key: 'tagsView',
      value: true
    })
  },
  beforeCreate: function() { // 从后台获取系统配置，根据配置判断是否加载验证码控件
    this.$store.dispatch('settings/changeSetting', {
      key: 'breadcrumb',
      value: false
    })
    this.$store.dispatch('settings/changeSetting', {
      key: 'tagsView',
      value: false
    })
  },
  methods: {
    initPosition() {
      window.map.setCameraView(Vue.prototype.mars3dConfig.scene.center)
    },
    alarmRowClick(item) {
      h2s.getGraphicById(item.devcode).openPopup().flyTo()
    },
    windowResize(height, width) {
      // 查找header高度
      const el_header = document.getElementById('app-header')
      let bodyHeight = height - (el_header ? el_header.clientHeight : 56)
      if (store.getters.tagsView) {
        const el_tagsView = document.getElementById('tags-view-container')
        bodyHeight -= el_tagsView ? el_tagsView.clientHeight : 34
      }
      if (breadcrumb) {
        const el_navbar = document.getElementsByClassName('navbar')
        bodyHeight -= el_navbar ? el_navbar[0].clientHeight : 48
      }
      // 减去2个padding
      bodyHeight -= 5
      store.dispatch('settings/ChangeHeight', bodyHeight)
    },
    routerJump() {
      this.$store.dispatch('ToggleSideBar')
    },
    // 初始化放这里
    onMapload(map, center) {
      window.map = map
      this.mapLoading = false
      // 隐藏所有基础图层
      this.mapJson.forEach(item => {
        item.children.forEach(child => {
          layers[child.id] = window.map.getLayerByAttr(child.id.toString(), 'id')
          if(layers[child.id]!== undefined && this.checkedLayers.indexOf(child.id) === -1) {
            layers[child.id].show = false
          }
        })
      })

      // // 管线图层添加
      // const wfsLayer = new mars3d.layer.ArcGisWfsLayer({
      //   id: 25,
      //   url: 'http://10.80.1.144:6080/arcgis/rest/services/ZNGX_ZB_GXBT/MapServer/53',
      //   symbol: {
      //     type: 'polylineC',
      //     styleOptions: {
      //       color: '#21c9fb',
      //       width: 5,
      //       hasShadows: false
      //     }
      //   },
      //   popup: '',
      //   show: true
      // })
      // window.map.addLayer(wfsLayer)
      // // wfsLayer.show = false

      // H2S图层添加
      h2s = new mars3d.layer.GraphicLayer()
      window.map.addLayer(h2s)
      if (this.$route.query && this.$route.query.userCode) {
        uerLogin(this.$route.query.userCode).then(response => {
          if (response.code === 200) {
            setToken(response.data.token)
            store.dispatch('TokenLogin', response.data.token).then(() => {
              this.searchH2s()
            })
          }
        })
      } else {
        this.searchH2s()
      }
      // 聚合不弹窗
      window.map.getLayers().forEach(graphicLayer => {
        if(graphicLayer.type === 'arcgis_wfs') {
          if(graphicLayer.id === 25) {
            graphicLayer.on(mars3d.EventType.click, function (event) {
              console.log(event.graphic.attr.OBJECTID)
              event.graphic.bindPopup(function (event) {
                return axios.get(`http://10.80.1.144:6080/arcgis/rest/services/ZNGX_ZB_GXBT/FeatureServer/83/${event.graphic.attr.OBJECTID}?f=pjson`).then((result) => {
                  // console.log(result.data.feature.attributes)
                  const attr = result.data.feature.attributes
                  return `<table>
                      <tr>
                      <td>管网编号：${attr.LINENUMBER}</td>
                      <td>管网名称：${attr.NAME}</td>
                      </tr>
                      <tr>
                      <td>管网类别：${attr.LINETYPE}</td>
                      <td>所属单位名称：${attr.ORGNAME}</td>
                      </tr>
                      <tr>
                      <td>输送介质：${attr.MEDIUMTYPE}</td>
                      <td>运行状态：${attr.OPERATIONALSTATUS}</td>
                      </tr>
                      <tr>
                      <td>管材：${attr.GRADE}</td>
                      <td>管线长度(km)：${attr.LENGTH}</td>
                      </tr>
                      <tr>
                      <td>管径(mm)：${attr.DIAMETER}</td>
                      <td>壁厚(mm)：${attr.WALLTHICKNESS}</td>
                      </tr>
                      <tr>
                      <td>防腐层厚度(mm)：${attr.COATINGTHICKNESS}</td>
                      <td>防腐状况：${attr.COATINGMATERIAL}</td>
                      </tr>
                      <tr>
                      <td>设计温度(°C)：${attr.DESTEMPERATURE}</td>
                      <td>设计压力(MPa)：${attr.PRESSURERATING}</td>
                      </tr>
                      <tr>
                      <td>设计输量(万吨、万立/年)：${attr.DESIGNTRANYEAR}</td>
                      <td>当前输量(万吨、万立/年)：${attr.EARNINGCAPACITY}</td>
                      </tr>
                      <tr>
                      <td>首站：${attr.STARTSTATION}</td>
                      <td>末站：${attr.TERMINALSTATION}</td>
                      </tr>
                      <tr>
                      <td>管理状态：${attr.MANAGERSTATUS}</td>
                      <td>所属管理处：</td>
                      </tr>
                      <tr>
                      <td>固定资产原值：${attr.ORIVALOFFIXEDASSETS}</td>
                      <td>投产时间：${attr.INSERVICETIME}</td>
                      </tr>
                      <tr>
                      <td>寿命起始日期：${attr.EFFECTIVEFROMDATE}</td>
                      <td>预计失效日期：${attr.EFFECTIVETODATE}</td>
                      </tr>
                      <tr>
                      <td>站场总数：${attr.STATIONNUMBER}</td>
                      <td>压气站/泵站：${attr.COPSTATIONNUMBER}</td>
                      </tr>
                      <tr>
                      <td>清管站：${attr.PIGSTATIONNUMBER}</td>
                      <td>线路截断阀室(座)：${attr.LINBLOVALCHANUMBER}</td>
                      </tr>
                      <tr>
                      <td>泄漏报警系统：${attr.LEAKAGEALARMSYSTEM}</td>
                      <td>起止地点：${attr.LOCOFFROMTO}</td>
                      </tr>
                      <tr>
                      <td>备注：${attr.REMARKS}</td>
                      </tr>
                      </table>`.replace(/null/g,'')
                })
              })
            })
            return
          }
          graphicLayer.on(mars3d.EventType.click, function (event) {
            if (event.graphic) {
              event.graphic.closePopup()
            }
          })
        }
      })
    },
    searchAlarm() {
      getAlarmsNowZq().then(response => {
        if (response.code === 200) {
          this.alarmList = response.data // 要显示的报警列表
          this.alarmList.forEach(item => {
            h2s.getGraphicById(item.devcode).setOptions({
              style: {image: Vue.prototype.baseConfig.page + 'static/images/报警.png'},
              attr: {
                ...this.devList.filter(dev => dev.code === item.devcode)[0],
                ...item
              }
            }).bindPopup(function (event) {
              console.log(event.graphic.attr)
              const attr = {}
              attr["点位名称："] = event.graphic.attr.wellName!==''?event.graphic.attr.wellName: '-'
              attr["设备编号："] = event.graphic.attr.code
              attr["设备名称："] = event.graphic.attr.name
              attr["报警类型："] = event.graphic.attr.alarmContent
              attr["报警数值(ppm)："] = event.graphic.attr.alarmValue.toString()
              attr["报警时间："] = event.graphic.attr.alarmTime
              attr["地址："] = event.graphic.attr.location
              return mars3d.Util.getTemplateHtml({
                title: "报警设备",
                template: "all",
                attr: attr
              })
            }, {className: 'alarm-info-overview'})
          })
        }
      })
    },
    searchH2s() {
      h2s.clear()
      getH2SDevice('').then(response => {
        if (response.code === 200) {
          this.devList = response.data
          this.initH2S()
          this.searchAlarm()
        }
      })
    },
    initH2S(list) {
      const that = this
      this.devList.forEach(item => {
        h2s.addGraphic(new mars3d.graphic.BillboardPrimitive({
          id: item.code,
          name: item.name,
          position: [item.lng, item.lat, 10],
          style: {
            image: Vue.prototype.baseConfig.page + `static/images/${item.status}.png`,
            scale: 1,
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            clampToGround: true
          },
          attr: item
        }).bindPopup(function (event) {
            return getH2SDeviceValue(event.graphic.id).then(response => {
              if (response.code === 200) {
                const attr = {}
                console.log(response.data.value)
                attr["点位名称："] = event.graphic.attr.wellName!==''?event.graphic.attr.wellName: '-'
                attr["设备编号："] =event.graphic.attr.code
                attr["设备名称："] =event.graphic.attr.name
                attr["设备状态："] = event.graphic.attr.status === 1 ? '在线' : '离线'
                attr["H2S浓度(ppm)："] = response.data.value.toString()!==''?response.data.value.toString(): '-'
                attr["最新上数时间："] = response.data.logtime
                attr["地 址："] =event.graphic.attr.location
                return mars3d.Util.getTemplateHtml({ title: "硫化氢设备", template: "all", attr: attr })
              }
            })
        }))
      })
    },
    // 图层控制节点选择
    handleCheckChange(data, checked, indeterminate) {
      if(data.hasOwnProperty('url')) {
        const layer = window.map.getLayerByAttr(data.id.toString(), 'id')
        console.log(layers[data.id], 'layer')
        if(!layers[data.id]) {
           return
        }
        layers[data.id].show = checked
      }
    },

    // 坐标定位，居中，绘点
    setCenter(position) {
      var center = { lat: position[1], lng: position[0], alt: 20000, heading: 360, pitch: -45 }
      window.map.setCameraView(center)
    },
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.overview-map-container{
  width: 100%;
  overflow: hidden;
  padding: 0px;
  .map-demo{
    width: 100%;
    .svg-icon{
      width: 20px;
      height: 20px;
    }
    .alarm-icon{
      width: 29px;
      height: 30px;
    }
  }
}
.map-dz {
  height: 88vh;
  overflow-y: hidden;
  .el-tree {
    background-color: rgb(14 62 74) !important;
    color: white;
  }
  .el-tree-node__content:hover {
    background-color: #034f69;
  }
  .el-tree-node:focus>.el-tree-node__content {
    background-color: #034f69;
  }
  table td {
    line-height: 26px !important;
    font-size: 15px !important;
    background-color: rgb(0 163 204 / 26%) !important;
    border-radius: 3px;
    padding: 2px 10px;
    min-width: 240px;
  }
  .el-loading-mask {
    background-color: rgba(255, 255, 255, .3) !important;
  }
  .el-loading-spinner .circular {
    height: 70px;
    width: 70px;
    font-weight: bold;
    font-size: 18px;
    border-radius: 2px;
  }
  .circle_btn{
    background: #419efe;
    margin-top: 5px;
    width: 25px;
    height: 25px;
    text-align: center;
    border-radius: 50%;
    color: white;
    padding-top: 4px;
  }
}
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
::-webkit-scrollbar {
  height: 4px;
  background-color: rgb(14 62 74) !important;
}
/* //滚动条的滑块 */
::-webkit-scrollbar-thumb {
  background-color: #034f69;
  border-radius: 3px;
}
.no-head-scrollbar .el-scrollbar__wrap, has-head-scrollbar .el-scrollbar__wrap {
  padding: 0px 10px;
}
.layer-checkbox {
  position: absolute;
  top: 5px;
  right: 2px;
  border-radius: 5px;
  background-color: #0e3e4a;
  width: 230px;
  height: 400px;
  overflow-y: scroll;
}
.main-menu-btn {
  position: absolute;
  top: calc(50% - 50px);
  left: -75px;
  width: 150px;
  height: 30px;
  cursor: pointer;
  transform: rotate(90deg);
  background-size: 100% 100% !important;
  background-color: rgba(139, 180, 208, 0.8);
  border-radius: 100%;
}

.layer-title {
  color: white;
  padding: 10px;
}
.layer-hidden-div{
  position: absolute;
  z-index: 5000;
  top: 5px;
  right: 0px;
  box-sizing: border-box;
  padding: 10px;
  border-radius: 10px 0px 0px 10px;
  background-color: #0e3e4a;
  border: 1px solid #034f69;
  border-left: 0px;
  font-size: 16px;
  font-weight: 500;
  writing-mode:vertical-rl;
  color: white;
  span{
    writing-mode: lr-tb;
  }
  &:hover{
    cursor: pointer;
    color: white;
  }
}
.initPosition {
  position: absolute;
  z-index: 5000;
  bottom: 0px;
  left: 0px;
  width: 60px;
  height: 60px;
  background: url("../../assets/overview/漫游未选中.png") no-repeat !important;
  background-size: 100% 100% !important;
  cursor: pointer;
}
.initPosition:hover {
  background: url("../../assets/overview/漫游选中.png") no-repeat !important;
  background-size: 100% 100% !important;
}
</style>