<template>
  <MapPopup ref="MapPopup" :id="id" :mapContainerId="'cesiumContainer'">
    <!-- <div class="popup-container">
      <div class="popup-title">
        <div class="title_content">（污水）[YYSK12]-[YYSK11]</div>
        <div class="page-btn">
          <span class="page-control el-icon-caret-left" @click="prePage()"></span>
          <span>{{page}}</span>
          <span class="page-control el-icon-caret-right" @click="nextPage()"></span>
        </div>
      </div>
      <div class="content_base">
        <span>等级：--</span>
        <span>管径：--</span>
        <span>管道长度：--</span>
        <span>材质：--</span>
      </div>
      <div class="content_info">
        <p>缺陷类型：<span style="font-weight:600">污水直排</span></p>
        <p>告警监测点：监测点1（管网水质监测仪）<span class="iconfont iconqidian1 location-btn"></span></p>
        <p>监测点距离管线：2.36km（位于管网下游）</p>
        <p>最近告警日期：2021-07-14</p>
        <p class="cause">告警原因，告警原因告警原因</p>
      </div>
    </div> -->
    <div class="popup-container">
      <div class="popup-title">
        <div class="title_content">（{{currentPage.drainageType||'未知'}}）{{currentPage.pipeNo}}</div>
        <div class="page-btn">
          <span class="page-control el-icon-caret-left" @click="prePage()" :style="{color:currentIndex==0?'#dadada':''}"></span>
          <span>{{page}}</span>
          <span class="page-control el-icon-caret-right" @click="nextPage()" :style="{color:currentIndex==(data.length-1)?'#dadada':''}"></span>
        </div>
      </div>
      <div class="content_base">
        <span>等级：<span style="color:#2d74e7">{{currentPage.pipelineLevel||'--'}}</span></span>
        <span>管径：<span style="color:#2d74e7">{{currentPage.pipeDiameter||'--'}}</span></span>
        <span>管道长度：<span style="color:#2d74e7">{{currentPage.pipeLength||'--'}}m</span></span>
        <span>材质：<span style="color:#2d74e7">{{currentPage.texture||'--'}}</span></span>
      </div>
      <div class="content_info">
        <p><span style="color:#b1b1b1">缺陷类型：</span><span style="font-weight:600">{{currentPage.hiddenDangerType||'--'}}</span></p>
        <p><span style="color:#b1b1b1">告警监测点：</span>{{currentPage.siteName||'--'}}（{{currentPage.deviceTypeName||'--'}}）
          <span class="iconfont iconqidian1 location-btn" @click="locationSite()"></span>
        </p>
        <p><span style="color:#b1b1b1">监测点距离管线：</span>{{currentPage.distance||'--'}}</p>
        <p><span style="color:#b1b1b1">最近告警日期：</span>{{currentPage.monitorDate||'--'}}</p>
        <p class="cause"><span style="color:#f38a27">告警原因：</span>{{currentPage.warningCause||'--'}}</p>
      </div>
    </div>
  </MapPopup>
</template>

<script lang="ts">
import MapPopup from '@/components/ComPopup/index.vue'
import { Vue, Component, Prop, Watch } from 'vue-property-decorator'

import { getSiteIcon } from '@/views/spectrum/common/siteIcon/siteIcon' // 站点图标
//属性查看
@Component({ name: 'serachInfo', components: { MapPopup } })
export default class serachInfo extends Vue {
  position: Array<any> = []
  id = 'hhh'
  data: Array<any> = []
  // 当前值索引
  currentIndex: any = 0
  //分页情况
  page: String = ''
  // 当前页数据
  currentPage: Object = {}

  @Watch('currentIndex')
  showApplyChange(val) {
    this.page = `${val + 1}/${this.data.length}`
    this.currentPage = this.data[val]
  }

  mounted() {
    this.initInfoPop(this.position)
    this.page = `${1}/${this.data.length}`
    this.currentPage = this.data[this.currentIndex]
  }

  initInfoPop(position) {
    ;(this.$refs['MapPopup'] as any).initBox()
    ;(this.$refs['MapPopup'] as any).setPosition(position)
  }

  locationSite() {
    const Cesium = (window as any).Cesium
    const viewer = (window as any).viewer
    const { longitude, latitude, deviceType } = this.data[this.currentIndex]
    const position = Cesium.Cartesian3.fromDegrees(longitude, latitude, 0)
    if (viewer.entities.getById('marker-finder-site')) viewer.entities.removeById('marker-finder-site')
    let entity = new Cesium.Entity({
      id: 'marker-finder-site',
      position: position,
      billboard: {
        image: getSiteIcon({ deviceType: deviceType }, false),
        width: 32,
        height: 32,
        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
        eyeOffset: Cesium.Cartesian3.ZERO,
        disableDepthTestDistance: Number.POSITIVE_INFINITY
      }
    })

    viewer.entities.add(entity)
    viewer.flyTo(entity)
  }

  remove() {
    ;(this.$refs['MapPopup'] as any).remove()
  }
  /**
   * 上一页
   */
  prePage() {
    if (this.currentIndex == 0) return
    else this.currentIndex -= 1
  }
  /**
   * 下一页
   */
  nextPage() {
    if (this.currentIndex == this.data.length) return
    else this.currentIndex += 1
  }
  /**
   *
   */
}
</script>

<style lang='scss' scoped>
.popup-container {
  width: 520px;
  height: 240px;
  background-color: #ffffff;
  z-index: 99999;
  box-shadow: 0 1px 8px 0 rgba(32, 33, 36, 0.2);
  border-radius: 3px;
  padding: 10px;
  position: relative;
  .popup-title {
    width: 100%;
    height: 30px;
    line-height: 30px;
    .title_content {
      width: calc(100% - 100px);
      height: 100%;
      float: left;
      font-weight: 600;
      color: #616367;
      font-size: 18px;
    }
    .page-btn {
      width: 100px;
      height: 100%;
      float: left;
      color: #b3b4b4;
      text-align: center;
      > span {
        &:nth-child(2) {
          color: #333333;
        }
        &.page-control {
          cursor: pointer;
        }
      }
    }
  }
  .content_base {
    width: 100%;
    height: 30px;
    line-height: 30px;
    color: #6a6f74;
    > span {
      &:nth-child(n + 2) {
        margin-left: 10px;
      }
    }
  }
  .content_info {
    > p {
      margin-top: 10px;
      color: #6d6971;
      &.cause {
        line-height: 24px;
      }
      .location-btn {
        color: #2d74e7;
        cursor: pointer;
      }
    }
  }
  &::before {
    display: block;
    content: '';
    border-style: solid;
    border-color: transparent;
    border-width: 16px 14px 16px 14px;
    border-top-color: #ffffff;
    position: absolute;
    left: 50%;
    bottom: -27px;
    -webkit-filter: drop-shadow(-3px 0px 2px rgba(0, 0, 0, 0.2));
    filter: drop-shadow(0px 5px 3px rgba(0, 0, 0, 0.1));
    transform: translateX(-50%);
  }
}
</style>