<template>
  <ComMapBox ref="ComMapBox" :id="id">
    <div class="widget-serachInfo">
      <div class="header">
        <div class="name">{{ roadName }}</div>
        <!-- <div class="status">{{ '建设中' }}</div> -->
      </div>
      <div class="content">
        <div class="content-item">
          <div class="name">工程进度：</div>
          <div class="value">
            <div class="progress-bg" :style="{ width: percent + '%' }"></div>
            <div class="progress-value">{{ percent }}%</div>
          </div>
        </div>
      </div>
    </div>
  </ComMapBox>
</template>

<script lang="ts">
import ComMapBox from '@/views/groupPage/components/ComMapBox.vue'
import ComCardBox from '@/views/groupPage/components/ComCardBox.vue'
import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
const Cesium = (window as any).Cesium
let _customDataSource = null
let handler = null
//搜索信息
@Component({ name: 'serachInfo', components: { ComMapBox, ComCardBox } })
export default class serachInfo extends Vue {
  position: Array<any> = []
  viewer
  roadName = null
  percent = null
  options = null
  id = null
  mounted() {
    this.viewer = (window as any).viewer
    // this.close() //初始不显示
    // this.addEntity(this.options)
    // this.addMapEvent()
    this.initDataSource()
    this.addEntity(this.options)
  }
  initDataSource() {
    _customDataSource = this.viewer.dataSources.getByName('SearchBox')[0]
  }
  initInfoPop(position) {
    ;(this.$refs['ComMapBox'] as any).initBox()
    ;(this.$refs['ComMapBox'] as any).setPosition(position)
  }
  addMapEvent() {
    const that = this
    handler = new Cesium.ScreenSpaceEventHandler(this.viewer.canvas)
    handler.setInputAction(
      function (movement) {
        var pickedObject = this.viewer.scene.pick(movement.position)
        // 使用时，最好利用pickPositionSupported判断一下浏览器是否支持模型高度拾取
        if (this.viewer.scene.pickPositionSupported && Cesium.defined(pickedObject)) {
          if (pickedObject.id._id === 'serachInfo') {
            // that.initInfoPop()
          }
        } else {
        }
      }.bind(this),
      Cesium.ScreenSpaceEventType.LEFT_CLICK
    )
  }
  addEntity(options) {
    var bottomPosition = Cesium.Cartographic.fromCartesian(options.position)
    var topPosition = Cesium.Cartographic.fromRadians(
      bottomPosition.longitude,
      bottomPosition.latitude,
      bottomPosition.height + 40
    )
    var bPosition = Cesium.Cartographic.toCartesian(bottomPosition)
    var tPosition = Cesium.Cartographic.toCartesian(topPosition)
    this.initInfoPop(tPosition)
    const percent = isNaN(options.scanProj.percent) ? 0 : parseFloat(options.scanProj.percent)
    this.roadName = options.scanProj.roadName
    this.percent = percent
    var entity = new Cesium.Entity({
      id: options.id,
      name: options.name,
      show: true,
      position: Cesium.Cartographic.toCartesian(topPosition),
      polyline: {
        positions: [bPosition, tPosition],
        material: Cesium.Color.fromBytes(56, 136, 205, 255),
        width: 3
      }
    })
    entity.displayType = options.scanProj.displayType
    entity.displayData = options.scanProj
    _customDataSource.entities.add(entity)
  }
  remove() {
    ;(this.$refs['ComMapBox'] as any).remove()
  }
}
</script>

<style lang='scss' scoped>
.widget-serachInfo {
  height: auto;
  width: 1.041667rem /* 200/192 */;
  left: -0.46875rem /* 90/192 */;
  top: -0.15625rem /* 30/192 */;
  position: absolute;
  color: #16c6ea;
  background: url('~@/views/groupPage/images/back.png') no-repeat;
  background-size: 100% 100%;
  padding: 0.052083rem /* 10/192 */;
  .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 {
      font-size: 0.072917rem /* 14/192 */;
      font-weight: 400;
      padding: 0.052083rem /* 10/192 */ 0;
      display: flex;
      .name {
        color: #ffffff;
      }
      .value {
        color: rgba(14, 202, 240, 1);
        flex: 1;
        white-space: normal;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .progress-bg {
        height: 0.052083rem /* 10/192 */;
        border-radius: 5px;
        background: linear-gradient(90deg, #1088f7, #ebe171);
      }
      //   .progress-value {
      //     color: rgba(234, 224, 114, 1);
      //   }
    }
  }
}
</style>