<template>
  <ComMapBox ref="ComMapBox" :id="'warningInfo'">
    <ComCardBox @close="close()" :styleData="cardStyle">
      <div class="widget-warningInfo">
        <div class="header">
          <div class="name">预警详细信息</div>
        </div>
        <div class="content">
          <div class="content-item">
            <div class="name">类型：</div>
            <div class="value">{{ options.type }}</div>
          </div>
          <div class="content-item">
            <div class="name">关注程度：</div>
            <div class="value">{{ options.concernExtent }}</div>
          </div>
          <div class="content-item">
            <div class="name">位置：</div>
            <div class="value">{{ options.location }}</div>
          </div>
          <el-collapse v-model="activeName" @change="showMore">
            <el-collapse-item name="more">
              <template slot="title"> 更多<i class="el-icon-loading" v-if="isLoading"></i> </template>
              <div class="content-item" v-for="(value, key) in originalData" :key="key">
                <div class="name">{{ key }}：</div>
                <div class="value">{{ value }}</div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
    </ComCardBox>
  </ComMapBox>
</template>

<script lang="ts">
import { mapSearch_api } from '@/api/APIs'
import ComMapBox from '@/views/groupPage/components/ComMapBox.vue'
import ComCardBox from '@/views/groupPage/components/ComCardBox.vue'
import { getLatAndLon } from '@/views/groupPage/util'
import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
import { getWarningInfoById, getDetailData } from '@/views/groupPage/apis'
const Cesium = (window as any).Cesium
let dataSource = new Cesium.CustomDataSource('TodayWarningList')
//预警信息
@Component({ name: 'warningInfo', components: { ComMapBox, ComCardBox } })
export default class warningInfo extends Vue {
  options: any = {}
  originalData = null
  activeName = ''
  isLoading = false
  id = null
  handler
  viewer
  cardStyle: object = {
    '--height': '1.588542rem' /* 305/192 */, //高度
    '--width': '1.666667rem ' /* 320/192 */, //宽度
    '--borderColor': 'rgba(50,182,252,1)', //边框线颜色
    '--backgroundColor': 'rgba(2, 20, 37, 0.45)' //背景颜色
  }
  mounted() {
    this.viewer = (window as any).viewer
    this.close() //初始不显示
    this.initMapSource()
    this.addMapEvent()
  }
  initInfoPop(positions) {
    ;(this.$refs['ComMapBox'] as any).initBox()
    ;(this.$refs['ComMapBox'] as any).setPosition(positions)
  }
  initMapSource() {
    if (!(window as any).viewer) return
    this.viewer = (window as any).viewer
    this.viewer.dataSources.add(dataSource)
  }
  addEntity(options) {
    this.removeEntity()
    this.close()
    this.options = options
    let imgSrc = require('@/views/groupPage/images/地图/预警定位.png')
    const positions = Cesium.Cartesian3.fromDegrees(Number(options.longitude), Number(options.latitude), 50)
    this.id = options.id
    let entity = new Cesium.Entity({
      id: 'warningInfo' + this.id,
      position: positions,
      billboard: {
        image: imgSrc,
        width: 32,
        height: 32,
        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
        eyeOffset: Cesium.Cartesian3.ZERO,
        disableDepthTestDistance: 9999999
      }
    })
    dataSource.entities.add(entity)
    this.flyTo(entity, positions)
  }
  addMapEvent() {
    const that = this
    this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.canvas)
    this.handler.setInputAction(
      function (movement) {
        var pickedObject = this.viewer.scene.pick(movement.position)
        const coordinate = getLatAndLon(this.viewer, movement)
        const position = Cesium.Cartesian3.fromDegrees(coordinate.longitude, coordinate.latitude, coordinate.altitude)
        // 使用时，最好利用pickPositionSupported判断一下浏览器是否支持模型高度拾取
        if (this.viewer.scene.pickPositionSupported && Cesium.defined(pickedObject)) {
          if (pickedObject.id._id === 'warningInfo' + this.id) {
            that.initInfoPop(position)
          }
        } else {
        }
      }.bind(this),
      Cesium.ScreenSpaceEventType.LEFT_CLICK
    )
  }
  flyTo(entity, positions) {
    //把相机飞到entity, entities, 或者data source位置。在这些数据还加载和渲染完成后，才能触发fyTo
    this.viewer
      .flyTo(entity, {
        offset: {
          heading: Cesium.Math.toRadians(0.0),
          pitch: Cesium.Math.toRadians(-60),
          range: 500
        }
      })
      .then(() => {
        this.initInfoPop(positions)
      })
  }
  async showMore(params) {
    if (!params.some((e) => e == 'more')) return
    this.isLoading = true
    const warningInfo = await getWarningInfoById({ id: this.options.id })
    const { warnIndexId, warnConParamValue } = warningInfo.result
    const originalData = await getDetailData({ warnIndexId: warnIndexId, warnConParamValue: warnConParamValue })
    this.originalData = originalData.result
    this.isLoading = false
  }
  removeEntity() {
    dataSource.entities.removeAll()
  }
  close() {
    ;(this.$refs['ComMapBox'] as any).remove()
  }
  destoryHandler() {
    if (this.handler && !this.handler.isDestroyed()) {
      this.handler.destroy()
      this.handler = null
    }
  }
  remove() {
    this.close()
    this.removeEntity()
    this.destoryHandler()
  }
  beforeDestroy() {
    this.close()
  }
}
</script>

<style lang='scss' scoped>
.widget-warningInfo {
  height: 100%;
  width: 90%;
  padding: 0.052083rem /* 10/192 */ 0.078125rem /* 15/192 */ 0;
  .header {
    height: 0.104167rem /* 20/192 */;
    display: flex;
    justify-content: space-between;
    .name {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 0.083333rem /* 16/192 */;
      font-weight: bold;
      color: #16c6ea;
    }
    .status {
      flex: 0.3;
      background: rgba(3, 153, 228, 1);
      border-radius: 2px;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 0.072917rem; /* 14/192 */
    }
  }
  .content {
    overflow: auto;
    height: calc(100% - 25px);
    width: 100%;
    display: flex;
    flex-flow: column;
    .content-item {
      width: 100%;
      font-size: 0.072917rem /* 14/192 */;
      font-weight: 400;
      padding: 0.052083rem /* 10/192 */ 0;
      .name,
      .value {
        display: inline-block;
      }
      .name {
        color: #ffffff;
      }
      .value {
        color: rgba(14, 202, 240, 1);
        word-wrap: break-word;
      }
    }
  }
  /deep/ .el-collapse {
    float: left;
    width: 100%;
    border: none;
    @mixin none() {
      border: none;
      background-color: transparent;
    }
    .el-collapse-item__header {
      height: 0.1875rem /* 36/192 */;
      font-size: 0.072917rem /* 14/192 */;
      color: #ffffff;
      @include none();
    }
    .el-collapse-item__wrap {
      @include none();
    }
  }
}
</style>