<template>
  <div class="widget-pipeInfo" ref="widget-pipeInfo" v-show="isShow">
    <div class="header">
      <div class="name">{{ displayData.name }}</div>
      <!-- <div class="status">{{ '建设中' }}</div> -->
    </div>
    <div class="content">
      <div class="content-item">
        <div class="name">道路名称：</div>
        <div class="value">{{ displayData.roadName }}</div>
      </div>
      <div class="content-item">
        <div class="name">(设计)：</div>
        <div class="value">
          {{ displayData.design.name || '无' }}<br />
          设计长度{{ displayData.design.total }}M， 管道部件{{ displayData.design.pipe }}个，管点部件{{
            displayData.design.node
          }}个
        </div>
      </div>
      <div class="content-item">
        <div class="name">(施工)：</div>
        <div class="value">
          {{ displayData.con.name || '无' }}<br />
          施工{{ displayData.con.pipeLen }}米，扫码{{ displayData.con.part }}个部件，扫码{{
            displayData.con.times
          }}次，上传{{ displayData.con.pictures }}张图片
        </div>
      </div>
      <div class="content-item">
        <div class="name">(监理)：</div>
        <div class="value">
          {{ displayData.spv.name || '无' }}<br />
          监理{{ displayData.spv.pipeLen }}米，扫码{{ displayData.spv.part }}个部件，扫码{{
            displayData.spv.times
          }}次，上传{{ displayData.spv.pictures }}张图片
        </div>
      </div>
    </div>
  </div>
</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
//进度查看
@Component({ name: 'pipeInfo', components: { ComMapBox, ComCardBox } })
export default class pipeInfo extends Vue {
  viewer
  isExist = null
  isShow = false
  displayData = {
    name: '无',
    roadName: '无',
    code: '无',
    design: {
      name: '无',
      total: 0,
      pipe: 0,
      node: 0
    },
    spv: {
      name: '无',
      pipeLen: 0,
      times: 0,
      part: 0,
      pictures: 0
    },
    con: {
      name: '无',
      pipeLen: 0,
      times: 0,
      part: 0,
      pictures: 0,
      totalLen: 0
    }
  }
  get boxTarget() {
    return this.$refs['widget-pipeInfo'] as any
  }
  get mapContainerId() {
    return this.$store.state.bigScreen.mapContainerId
  }
  mounted() {
    this.viewer = (window as any).viewer
    this.initBox()
  }
  //初始化
  initBox() {
    this.remove()
    this.isExist = document.querySelector('#' + this.mapContainerId).appendChild(this.boxTarget)
  }
  remove() {
    if (document.querySelector('.widget-pipeInfo')) {
      document.querySelector('.widget-pipeInfo').remove()
      this.isExist = null
    }
  }
}
</script>

<style lang='scss' scoped>
.widget-pipeInfo {
  width: 350px;
  height: auto;
  background: rgba(0, 0, 0, 0.6);
  border: 2px solid #00437f;
  border-radius: 5px;
  color: white;
  position: absolute;
  right: 300px;
  top: var(--top);
  padding: 10px;
  left: var(--left);
  z-index: 999;
  .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 {
    height: calc(100% - 20px);
    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 {
        width: 60%;
        height: 0.052083rem /* 10/192 */;
        border-radius: 5px;
        background: linear-gradient(90deg, #1088f7, #ebe171);
      }
      .progress-value {
        color: rgba(234, 224, 114, 1);
      }
    }
  }
}
</style>