<template>
  <ComMapBox ref="ComMapBox" :id="id">
    <ComCardBox @close="close()" :styleData="info.type == '摄像头' ? videoCardStyle : cardStyle">
      <div class="widget-deviceInfo">
        <div class="header">
          <div class="name">{{ info.name }}【在线】</div>
        </div>
        <div class="vcontent" v-if="info.type == '摄像头'">
          <div class="left-content">
            <div class="content-item left-item">
              <div class="name">工地：</div>
              <div class="value">{{ info.constructName }}</div>
              <div class="name">位置：</div>
              <div class="value">xxx</div>
            </div>
          </div>
          <div class="right-content">
            <iframe
              src="https://xmgl.glodon.com/ivs/api/url/redirect/621b3205d1abc4001b6cf03b/web"
              allowfullscreen="true"
            ></iframe>
          </div>
        </div>
        <div class="content" v-else>
          <div class="content-item">
            <div class="name">工地名称：</div>
            <div class="value">{{ info.constructName }}</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">2022-09-01 14:49</div>
          </div>
          <div class="content-item">
            <div class="name">PM2.5：</div>
            <div class="value">53 ug/m³</div>
          </div>
          <div class="content-item">
            <div class="name">PM2.5：</div>
            <div class="value">36 ug/m³</div>
          </div>
          <div class="content-item">
            <div class="name">噪声：</div>
            <div class="value">102 dB</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'
//设备信息
@Component({ name: 'deviceInfo', components: { ComMapBox, ComCardBox } })
export default class deviceInfo extends Vue {
  info: any = {} //设备信息
  id = null //面板唯一标识id
  position = null //面板位置
  viewer
  //视频信息卡片样式
  videoCardStyle: object = {
    '--height': '1.5625rem', //高度
    '--width': '2.708333rem', //宽度
    '--borderColor': 'rgba(14, 167, 255, 0.6)', //边框线颜色
    '--backgroundColor': 'rgba(7, 38, 67,0.44)' //背景颜色
  }
  //环境监测信息卡片样式
  cardStyle: object = {
    '--height': '1.822917rem', //高度
    '--width': '1.197917rem', //宽度
    '--borderColor': 'rgba(14, 167, 255, 0.6)', //边框线颜色
    '--backgroundColor': 'rgba(7, 38, 67,0.44)' //背景颜色
  }
  mounted() {
    this.viewer = (window as any).viewer
    this.close()
    this.initInfoPop(this.position)
  }
  initInfoPop(position) {
    ;(this.$refs['ComMapBox'] as any).initBox()
    ;(this.$refs['ComMapBox'] as any).setPosition(position)
  }
  close() {
    ;(this.$refs['ComMapBox'] as any).remove()
  }
  remove() {
    this.close()
  }
  beforeDestroy() {
    this.close()
  }
}
</script>

<style lang='scss' scoped>
.widget-deviceInfo {
  height: 100%;
  width: 95%;
  padding: 0.052083rem /* 10/192 */ 0.078125rem /* 15/192 */ 0;
  .header {
    height: 0.104167rem /* 20/192 */;
    display: flex;
    justify-content: space-between;
    // border-bottom: 1px solid rgba(14, 167, 255, 0.84);
    margin: 10px 0 0 0;
    .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-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);
    }
  }
  .content {
    overflow: auto;
    height: calc(100% - 25px);
    width: 100%;
    display: flex;
    flex-flow: column;
  }
  .vcontent {
    overflow: auto;
    height: calc(100% - 25px);
    width: 100%;
    display: flex;
    flex-flow: column;
    .left-content {
      width: 100%;
      .left-item {
        display: flex;
        align-items: center;
        padding: 10px 0 !important;
        .name,
        .value {
          white-space: nowrap !important;
        }
      }
    }
    .right-content {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 80%;
      width: 100%;
      iframe {
        height: 100%;
        width: 100%;
      }
    }
  }
}
</style>