<template>
  <ComMapBox ref="ComMapBox" :id="'artifactsInfo'">
    <ComCardBox @close="close()">
      <div class="widget-artifactsInfo">
        <div class="header">
          <el-tooltip class="item" effect="dark" :content="info.name" placement="top">
            <div class="name">{{ info.name }}</div>
          </el-tooltip>
        </div>
        <div class="content">
          <div class="content-item">
            <div class="name">设计单位：</div>
            <div class="value">xxx</div>
          </div>
          <div class="content-item">
            <div class="name">施工单位：</div>
            <div class="value">xxx</div>
          </div>
          <div class="content-item">
            <div class="name">监理单位：</div>
            <div class="value">xxx</div>
          </div>
          <div class="content-item">
            <div class="name">工程量：</div>
            <div class="value">xxx</div>
          </div>
        </div>
      </div>
    </ComCardBox>
  </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
//构件查看
@Component({ name: 'artifactsInfo', components: { ComMapBox, ComCardBox } })
export default class artifactsInfo extends Vue {
  position: Array<any> = []
  viewer
  info = null
  mounted() {
    this.viewer = (window as any).viewer
    this.close()
    ;(this.$refs['ComMapBox'] as any).initBox()
    ;(this.$refs['ComMapBox'] as any).setPosition(this.position)
  }
  close() {
    ;(this.$refs['ComMapBox'] as any).remove()
  }
  beforeDestroy() {
    this.close()
  }
}
</script>

<style lang='scss' scoped>
.widget-artifactsInfo {
  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 {
    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>