
<template>
  <div class="box">
    <el-container>
      <el-header>
        <div class="boxName">
          第二屏详情
        </div>
        <div class="spaceName">
          <b>空间名称：</b>{{spaceDetails.RoomLocalName?spaceDetails.RoomLocalName:"-"}}
        </div>
      </el-header>
      <el-container>
        <el-aside width="500px">
          <div class="aside-top">
            <div class="aside-top-left">
              <p><b>空间功能区类型:</b>{{spaceDetails.RoomFuncType?spaceDetails.RoomFuncType:"-"}}</p>
              <p><b>备注文字:</b>{{spaceDetails.Intro?spaceDetails.Intro:"-"}}</p>
            </div>
            <div class="aside-top-right">
              <p><b>空间二维码:</b><span v-if="!spaceDetails.RoomQRCode">-</span></p>
              <!-- <img src="./1.png" alt="" v-if="spaceDetails.QrCode"> -->
              <img :src="'/image-service/common/file_get/'+ spaceDetails.RoomQRCode +'?systemId=dataPlatform'" alt="二维码图片"
                v-if="spaceDetails.RoomQRCode">
            </div>
          </div>
          <div>
            <p><b>位置图片:</b></p>
          </div>
        </el-aside>
        <el-main>
          <el-tabs v-model="activeTab" type='card'>
            <template v-for="(item,index) in tabsList">
              <el-tab-pane :name="item.Code" :key="index" :label="item.Name">
                <!-- 静态数据 -->
                <div v-if="activeTab === 'staticData'" style="width:100%">
                  <iframe height="100%" width="100%" :src="iframeSrc" id="staticData"></iframe>
                </div>
                <!-- 动态数据 -->
                <div v-if="activeTab === 'dynamicData'" style="width:100%">
                  <!-- <iframe height="100%" width="100%" :src="iframeSrc"></iframe> -->
                </div>
                <!-- 对象关系 -->
                <div v-if="activeTab === 'objectRelationship'" style="width:100%">
                  <!-- <iframe height="100%" width="100%" :src="iframeSrc"></iframe>
                  <iframe height="100%" width="100%" :src="iframeSrc"></iframe>
                  <iframe height="100%" width="100%" :src="iframeSrc"></iframe> -->
                </div>
              </el-tab-pane>
            </template>
          </el-tabs>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { queryZone, getAllbusiness } from '@/api/scan/request'

export default {
  data() {
    return {
      tabsList: [
        { Code: 'staticData', Name: '静态数据' },
        { Code: 'dynamicData', Name: '动态数据' },
        { Code: 'objectRelationship', Name: '对象关系' }
      ],
      activeTab: 'staticData',
      spaceDetails: {},
      iframeSrc: '',
      projectId: ''
    }
  },
  created() {
    if (this.$route.query.RoomID && this.$route.query.zone) {
      this.getData();
    }
  },
  computed: {
    ...mapGetters('layout', ['userInfo', 'projects', 'userId', 'secret'])
  },
  methods: {
    getData() {
      // 获取空间信息
      let params = {
        data: {
          Filters: `RoomID="${this.$route.query.RoomID}"`
        },
        zone: this.$route.query.zone
      }
      queryZone(params, res => {
        this.spaceDetails = res.Content[0];
        if (this.$route.query.RoomID && this.$route.query.zone) {
          this.setFrame();
        }
      })
    },
    // 设置静态数据tab的iframe地址
    setFrame() {
      this.projectId = localStorage.getItem('projectId');
      document.getElementById("staticData").contentWindow.location.reload(true);
      this.iframeSrc = `${process.env.BASE_URL}:8889/#/details?perjectId=${this.projectId}&secret=${this.secret}&FmId=${this.$route.query.RoomID}&type=0&code=${this.$route.query.zone}`
    }
  },
  watch: {
    // 监听路由地址，并判断有RoomID和zone，重新请求空间
    "$route"(){
      if (this.$route.query.RoomID && this.$route.query.zone) {
        this.getData();
      }
    }
  }
}
</script>

<style lang="less" scoped>
#screenBox .screen-router[data-v-6c06ede0] {
  padding: 0;
}
.el-header {
  padding: 0;
  height: 80px !important;
  .boxName {
    color: #fff;
    font-size: 16px;
    line-height: 50px;
    height: 50px !important;
    padding: 0 20px;
    background-color: #3f4f62;
  }
  .spaceName {
    font-size: 14px;
    line-height: 30px;
    padding: 0 20px;
    border-bottom: 1px solid black;
    box-sizing: border-box;
  }
}
.el-aside {
  color: #333;
  border: 1px solid #e4e7ed;
  margin: 20px 0 0 20px;
  padding: 20px;
  box-sizing: border-box;
  .aside-top {
    overflow: hidden;
    .aside-top-left {
      float: left;
      width: 300px;
    }
    .aside-top-right {
      float: right;
      img {
        margin-left: -10px;
        width: 140px;
        height: 140px;
      }
    }
  }
}
.el-main {
  color: #333;
  text-align: center;
}
.el-tabs__content {
  height: 750px;
}
#pane-staticData {
  height: 750px;
  div {
    height: 100%;
  }
}
</style>