<template>
  <div id="centerDiv" class="mapcontainer">
    <!--时钟-->
    <clock/>
    <!--天气-->
    <weather/>
    <!--选择区-->
    <select-all/>
    <!--统计结果显示-->
    <div class="label-div">
      <div class="label">
        全省高后果区
      </div>
      <div class="value">
        77
      </div>
    </div>

    <!--地图-->
    <Map :url="configUrl" @onload="onMapload" />
    <!--遮罩-->
    <div class="mask">航天二院203所</div>
  </div>
</template>

<script>
import Map from '@/components/Map/MarsMap.vue'
import 'mars3d-heatmap'
import axios from 'axios'
import Weather from '@/components/weather/weather'
import Clock from '@/components/clock/Clock'
import SelectAll from './components/selectAll'
export default {
  name: 'Index',
  components: {
    SelectAll,
    Weather,
    Clock,
    Map
  },

  data() {
    return {
      map: null, // 地图
      configUrl: 'static/config/config.json',
      alpha: 100, // 透明度
      underground: null, // ？
      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: [
        { x: 112.73874, y: 37.693689, id: 0, name: '晋中管理处', count: 158 },
        { x: 111.121552, y: 37.5245, id: 0, name: '吕梁管理处', count: 10 },
        { x: 112.929902, y: 39.622888, id: 0, name: '同朔管理处', count: 44 },
        { x: 112.72496, y: 38.415485, id: 0, name: '忻州管理处', count: 9 },
        { x: 113.58249, y: 37.851892, id: 0, name: '阳泉管理处', count: 21 },
        { x: 110.980927, y: 35.010828, id: 0, name: '运城管理处', count: 21 },
        { x: 113.038394, y: 35.850111, id: 0, name: '长晋管理处', count: 11 },
        { x: 111.491467, y: 36.064572, id: 0, name: '临汾管理处', count: 30 }
      ],
      stationLayer: null, // 管理站图层
      hqaLayer: 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.addPipe()
      // 创建entity图层
      const graphicLayer = new this.mars3d.layer.GraphicLayer()
      map.addLayer(graphicLayer)
      this.addHighConsequenceArea()
      // 添加管理处
      this.addStation(graphicLayer)

      // this.addLine()
      // this.addProvinceWall(graphicLayer)
      // this.addProvinceLine(graphicLayer)
      // 开启炫光
      // var bloomEffect = new this.mars3d.effect.BloomEffect()
      // map.addEffect(bloomEffect)
      // this.addGraphic_05(graphicLayer)
    },
    // 高后果区热力图
    addHighConsequenceArea() {
      const { mars3d } = this
      axios.get('static/config/highConsequence.json').then((res) => {
        if (res.code === 200) {
          this.highConsequence = res.data
          debugger
          const hqaLayer = new mars3d.layer.HeatLayer({
            positions: this.highConsequence.map(item => {
              return { lng: item['经度'], lat: item['纬度'], value: 30 }
            }),
            heatStyle: {
              radius: 50, // 半径
              blur: 0.85 // 模糊因子
            },
            // 以下为矩形矢量对象的样式参数
            style: {
              opacity: 1.0,
              clampToGround: true
            },
            redrawZoom: true,
            flyTo: false
          })
          this.hqaLayer = hqaLayer
          this.map.addLayer(hqaLayer)
        }
      })
    },
    // 管理处
    addStation(graphicLayer) {
      const { mars3d } = this
      const stationLayer = new mars3d.layer.ModelLayer({
        name: '管理处',
        url: './static/gltf/house02.gltf',
        // url: './static/gltf/qwe.gltf',
        style: {
          scale: 10,
          heading: 0,
          minimumPixelSize: 30,
          clampToGround: true
        },
        positions: this.manageStations.map(item => {
          return { lng: item.x, lat: item.y, alt: item.z }
        })
      })
      this.stationLayer = stationLayer
      this.map.addLayer(stationLayer)

      // for (const station of this.manageStations) {
      //   console.log(station.name)
      //   var primitive = new mars3d.graphic.ModelPrimitive({
      //     position: [station.x, station.y, station.z],
      //     style: {
      //       url: './static/gltf/house02.gltf',
      //       scale: 10, // 比例
      //       minimumPixelSize: 50, // 最近像素大小，不考虑缩放
      //       heading: 0,
      //       label: {
      //         text: station.name,
      //         font_size: 18,
      //         color: '#ffffff',
      //         pixelOffsetY: -50,
      //         distanceDisplayCondition: true,
      //         distanceDisplayCondition_far: 500000,
      //         distanceDisplayCondition_near: 0
      //       }
      //     }
      //   })
      //   graphicLayer.addGraphic(primitive)
      // }
    },

    addProvinceWall(graphicLayer) {
      const { mars3d, Cesium } = this
      axios.get('static/geojson/140000_single.json').then((res) => {
        if (res.status === 200) {
          const feature = res.data.features[0]
          var coordinates = feature.geometry.coordinates[0]
          debugger
          var graphic = new mars3d.graphic.WallEntity({
            positions: coordinates,
            style: {
              diffHeight: 2000,
              // color: '#bdf700',
              // opacity: 0.6
              material: new mars3d.material.LineFlowMaterialProperty({
                image: './static/images/map/fence.png',
                color: Cesium.Color.fromCssColorString('#bdf700'),
                repeat: new Cesium.Cartesian2(5, 1),
                axisY: true, // 方向，true时上下，false左右
                speed: 10 // 速度，建议取值范围1-100
              })
            }
          })
          graphicLayer.addGraphic(graphic)
        }
      })
    },
    addProvinceLine(graphicLayer) {
      const { mars3d, Cesium } = this
      axios.get('static/geojson/140000_single.json').then((res) => {
        if (res.status === 200) {
          const feature = res.data.features[0]
          const _color1 = Cesium.Color.fromCssColorString('#1fe1ff').withAlpha(0.2)
          const _color2 = Cesium.Color.fromCssColorString('#1fe1ff').withAlpha(0.9)
          let _color = _color1
          setInterval(function() {
            _color = _color === _color1 ? _color2 : _color1
          }, 500)
          var coordinates = feature.geometry.coordinates[0]
          const graphic = new mars3d.graphic.PolylineEntity({
            positions: coordinates,
            style: {
              width: 5,
              material: new Cesium.ColorMaterialProperty(
                new Cesium.CallbackProperty(function(time) {
                  return _color
                }, false)
              )
            }
          })
          graphicLayer.addGraphic(graphic)
        }
      })
    },
    // 自定义的弹窗
    addGraphic_05(graphicLayer) {
      const { Cesium, mars3d } = this
      var graphic = new mars3d.graphic.DivGraphic({
        position: Cesium.Cartesian3.fromDegrees(111.031145, 36.948563, -2100),
        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">燃气管线</div>
                                <div class="label-content">
                                    <div class="data-li">
                                        <div class="data-label">管径：</div>
                                        <div class="data-value"><span class="label-num">1200</span><span class="label-unit">mm</span>
                                        </div>
                                    </div>
                                    <div class="data-li">
                                        <div class="data-label">材质：</div>
                                        <div class="data-value"><span class="label-num">3pe</span>
                                        </div>
                                    </div>
                                    <div class="data-li">
                                        <div class="data-label">压力等级：</div>
                                        <div class="data-value"><span class="label-num">中</span>
                                        </div>
                                    </div>
                                    <div class="data-li">
                                        <div class="data-label">铺设年代：</div>
                                        <div class="data-value"><span class="label-num">2000</span><span class="label-unit">年</span>
                                        </div>
                                    </div>`,
          // anchor: [0, 0],
          horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          distanceDisplayCondition: new Cesium.DistanceDisplayCondition(1000, 200000), // 按视距距离显示
          scaleByDistance: new Cesium.NearFarScalar(10000, 1.0, 100000, 0.1),
          heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
        },
        pointerEvents: false // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
      })
      graphicLayer.addGraphic(graphic)
      graphic.testPoint = true // 打开测试点，与DIV点进行对比位置调整css
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .label-div{
    position: absolute;
    top: 6rem;
    left:30rem;
    z-index:100;
    color: white;
    background-image: url("../../../static/images/button_images/board-box.png");
    .label{
      margin-bottom: 1rem;
      font-size:1.5rem;
    }
    .value{
      font-family: DS-DigitalBold;
      font-size:3rem;
    }
  }
</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>
