<!--
 * @Description: 高后果区专题
 * @Author: 王晓颖
 * @Date: 2021-04-07 14:40:59
 -->
<template>
  <layout-map>
    <!--选择区-->
    <!--<select-all @change="selectChange" />-->
    <!--统计结果显示-->
    <!--<div class="label-div">-->
    <!--<div class="label">-->
    <!--{{ boardData.name | boardNameFilter }}-->
    <!--</div>-->
    <!--<div class="value">-->
    <!--{{ boardData.value }}-->
    <!--</div>-->
    <!--</div>-->

    <!--地图-->
    <Map :url="configUrl" @onload="onMapload" />
    <div class="map-btn-group">
      <select-button :select="heatShow" name="热力图" icon="icon-heat" @click="showHeat(heatShow)"/>
      <select-button :select="positionShow" name="点位分布" icon="icon-position" @click="showPosition(positionShow)"/>
      <select-button :select="stationShow" name="管理处" icon="icon-station" @click="showStation(stationShow)"/>
    </div>
    <high-consequence-dialog ref="hcaDialog"/>
  </layout-map>
</template>

<script>
import Map from '@/components/Map/MarsMap.vue'
import Weather from '@/components/weather/weather'
import Clock from '@/components/clock/Clock'
import SelectAll from './components/selectAll'
import SelectButton from '@/components/SelectTool/components/selectButton'
import { getTimes } from '@/utils/dateutils'
import LayoutMap from '@/layout/layoutMap'
import { getHighConsequence } from '@/api/hca'
import HighConsequenceDialog from './components/highConsequenceDialog'
export default {
  name: 'Index',
  components: {
    HighConsequenceDialog,
    LayoutMap,
    SelectAll,
    Weather,
    Clock,
    Map,
    SelectButton
  },
  filters: {
    boardNameFilter(val) {
      if (val === '全部' || val === '') {
        return '全省高后果区'
      } else {
        return val + '区域高后果区'
      }
    }
  },

  data() {
    return {
      map: null, // 地图
      configUrl: 'static/config/config.json',
      alpha: 100, // 透明度
      underground: null, // ？
      heatShow: true, // 热力图显示
      stationShow: true, // 管理站显示
      positionShow: false, // 点位显示
      boardData: {
        name: '全部',
        value: 196
      }, // 统计版展示数据
      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': '临汾管理处' }
      ],
      highConsequence: [],
      threatLevel: {
        'Ⅰ级': '1',
        'Ⅱ级': '2',
        'Ⅲ级': '3'
      }, // 隐患等级
      pointColorArr: ['#f33349', '#f79a2c', '#f2fa19', '#95e40c', '#1ffee6'],
      stationLayer: null, // 管理站图层
      threatLayer: null, // 隐患位置
      heatLayer: null, // 高后果区热力图
      graphicLayer: 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.addHighConsequenceArea()
      // 添加管理处
      this.addStation()
      this.addStationDiv()
      this.refreshData()
    },
    // 高后果区热力图
    addHighConsequenceArea() {
      const { mars3d, Cesium } = this
      getHighConsequence().then(res => {
        let data = res.data.filter(item => item['DES02'] !== '无')
        data = data.map(item => {
          return {
            '编号': item['DES07'],
            '经度': parseFloat(item['DES02']),
            '纬度': parseFloat(item['DES03']),
            '位置描述': item['DES05'],
            '行政区域': item['DES09'],
            '地区级别': item['DES10'],
            '高后果区特征描述': item['DES11'],
            '机构名称': item['DES12'],
            '高后果区长度': item['DES08'],
            '识别时间': item['WD01_03'],
            '高后果区级别': item['WD02_04'],
            '所属管理处': item['DES01'],
            '人数范围': item['WD58_03'],
            '识别单位及负责人': item['DES04']
          }
        })
        this.highConsequence = data.filter(item => item['高后果区级别'] !== '无')
        this.boardData.value = this.highConsequence.length
        if (this.heatLayer) {
          this.map.removeLayer(this.heatLayer)
        }
        const heatLayer = new mars3d.layer.HeatLayer({
          name: 'heatLayer',
          positions: this.highConsequence.map(item => {
            return Cesium.Cartesian3.fromDegrees(item['经度'], item['纬度'], 1)
          }),
          heatStyle: {
            radius: 30, // 半径
            blur: 1 // 模糊因子
          },
          // 以下为矩形矢量对象的样式参数
          style: {
            opacity: 0.8,
            clampToGround: false,
            height: 10000,
            zIndex: 5
          }
        })
        this.heatLayer = heatLayer
        this.map.addLayer(heatLayer)
      })
    },
    // 高后果区位置
    addThreatPosition() {
      getHighConsequence().then(res => {
        let data = res.data.filter(item => item['DES02'] !== '无')
        data = data.map(item => {
          return {
            '高后果区编号': item['DES07'],
            '经度': parseFloat(item['DES02']),
            '纬度': parseFloat(item['DES03']),
            '位置描述': item['DES05'],
            '行政区域': item['DES09'],
            '地区级别': item['DES10'],
            '高后果区特征描述': item['DES11'],
            '机构名称': item['DES12'],
            '高后果区长度': item['DES08'],
            '识别时间': item['WD01_03'],
            '高后果区级别': item['WD02_04'],
            '所属管理处': item['DES01'],
            '影响人数范围': item['WD58_03'],
            '识别单位及负责人': item['DES04']
          }
        })
        this.highConsequence = data.filter(item => item['高后果区级别'] !== '无')
        this.boardData.value = this.highConsequence.length
        this.addFeatures(this.highConsequence)
      })
    },
    // 添加隐患点
    addFeatures(arr) {
      const { mars3d, Cesium } = this
      if (this.threatLayer) {
        this.map.removeLayer(this, threatLayer)
      }
      // 创建DIV数据图层
      var graphicLayer = new mars3d.layer.DivLayer()
      this.threatLayer = graphicLayer
      this.map.addLayer(graphicLayer)
      // 在layer上绑定监听事件
      graphicLayer.on(mars3d.EventType.click, event => {
        console.log('监听layer，单击了矢量对象', event)
        this.$refs.hcaDialog.initDialog(event.graphic.attr)
      })
      for (var i = 0, len = arr.length; i < len; i++) {
        const item = arr[i]
        var jd = item['经度']
        var wd = item['纬度']
        const level = parseInt(this.threatLevel[item['高后果区级别']]) - 1
        var clr = this.pointColorArr[level]
        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), // 按视距距离显示
            tooltip: item['高后果区编号']
          },
          attr: item
        })
        graphicLayer.addGraphic(graphic)
      }
    },
    // 管理处
    addStation() {
      const { mars3d } = this
      const stationLayer = new mars3d.layer.ModelLayer({
        name: '管理处',
        url: './static/gltf/output/guanlizhan.gltf',
        style: {
          scale: 10,
          heading: 90,
          minimumPixelSize: 30,
          clampToGround: true,
          zIndex: 3
        },
        positions: this.manageStations.map(item => {
          return { lng: item.x, lat: item.y, alt: item.z }
        })
      })
      this.stationLayer = stationLayer
      this.map.addLayer(stationLayer)
    },
    // 选框发生变化
    selectChange({ area, people, time, level }) {
      area = area === '全部' ? '' : area
      time = time === '全部' ? '' : time
      level = level === '全部' ? '' : level
      // 获取人数范围
      let min = 0
      let max = 100000
      switch (people) {
        case '10-100':
          min = 10
          max = 100
          break
        case '101-150':
          min = 101
          max = 150
          break
        case '151-200':
          min = 151
          max = 200
          break
        case '200以上':
          min = 200
          break
      }
      // 解析时间
      let beginTime = ''
      let endTime = ''
      if (time) {
        const result = getTimes(time)
        beginTime = result.beginDate
        endTime = result.endDate
      }
      this.boardData.name = area
      // 查询数据
      let count = 0
      for (const hca of this.highConsequence) {
        let flag = true // 标记是否合格
        const real_people = parseInt(hca['户数'] === null ? '1' : hca['户数'])
        // 比较区域
        if (area && hca['所属管理处'] && hca['所属管理处'].indexOf(area) === -1) {
          flag = false
        }
        // 比较人数
        if (real_people && (real_people > max || real_people < min)) {
          flag = false
        }
        // 比较时间
        if (time) {
          const real_date = new Date(hca['识别时间'])
          if (real_date && (real_date < beginTime || real_date > endTime)) {
            flag = false
          }
        }
        // 比较级别
        if (level && hca['高后果区级别'] && hca['高后果区级别'] === level) {
          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.manageStations) {
        var graphic = new mars3d.graphic.DivGraphic({
          position: Cesium.Cartesian3.fromDegrees(station.x, station.y, 10000),
          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 class="label-content">
                                    <div class="data-li">
                                        <div class="data-label">经度：</div>
                                        <div class="data-value"><span class="label-num">${station.x}</span>
                                        </div>
                                    </div>
                                    <div class="data-li">
                                        <div class="data-label">纬度：</div>
                                        <div class="data-value"><span class="label-num">${station.y}</span>
                                        </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),
            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
          },
          pointerEvents: false // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
        })
        graphicLayer.addGraphic(graphic)
        graphic.testPoint = false // 打开测试点，与DIV点进行对比位置调整css
      }
    },
    // 是否显示热力图
    showHeat(show) {
      // 现在正在显示
      if (show) { // 移除
        this.heatShow = false
        this.map.removeLayer(this.heatLayer, true)
        this.heatLayer = null
      } else {
        this.heatShow = true
        this.addHighConsequenceArea()
      }
    },
    // 是否显示管理处
    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()
      }
    },
    // 显示位置
    showPosition(show) {
      if (show) { // 移除
        this.positionShow = false
        this.map.removeLayer(this.threatLayer, true)
        this.threatLayer = null
      } else {
        this.positionShow = true
        this.addThreatPosition()
      }
    },
    refreshData() {
      this.timer = setInterval(() => {
        console.log('refreshData')
        if (this.heatLayer) {
          this.addHighConsequenceArea()
        }
        if (this.threatLayer) {
          this.addThreatPosition()
        }
      }, 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>

<style rel="stylesheet/scss" lang="scss">
  /*整个容器*/
  .mapcontainer {
    position: relative;
    height: 100%;
    width: 100%;
    background-color: transparent;
    /*background-color: #051151;*/
  }
  /*logo遮罩*/
  .mask{
    position: fixed;
    padding-left:10px;
    padding-right:10px;
    bottom:0px;
    left:0px;
    background-color:#000000;
    color:#ffffff;
    line-height:2
  }

</style>