<template>
<div class="iot-region-details-warp">
  <div class="info-tabs">
    <el-tabs v-model="activeName" type="border-card">
      <el-tab-pane label="区域信息" name="info">
        <div class="tabs-body">
          <info></info>
        </div>
      </el-tab-pane>

      <el-tab-pane label="区域空间" name="space">
        <div class="tabs-body">
          <building-space v-if="activeName === 'space' && infoData" :infoData="infoData"></building-space>
        </div>
      </el-tab-pane>

      <!-- <el-tab-pane label="项目租户" name="tenant">
        <div class="tabs-body">
          <tenant-wrap v-if="activeName === 'tenant'" :infoData="infoData" />
        </div>
      </el-tab-pane>

      <el-tab-pane label="设备列表" name="allDevice">
        <div class="tabs-body">
          <device-list-wrap v-if="activeName === 'allDevice'" :sourceId="infoData.projectId" />
        </div>
      </el-tab-pane> -->
    </el-tabs>
  </div>
</div>
</template>
<script>
import {
  getRegion
} from "@/api/iot/region";
import Info from './Info'
import BuildingSpace from './BuildingSpace'
export default {
  name: 'DetailsWrap',
  props: ['sourceKey'],
  components: {
    Info,
    BuildingSpace
  },
  data() {
    return {
      infoData: {},
      activeName: ''
    }
  },
  created() {
    this.getInfoByProjectId()
    this.activeName = 'space'
  },
  methods: {
    getInfoByProjectId() {
      getRegion(this.sourceKey).then(response => {
        this.infoData = response.data;
      });
    }
  }
}
</script>
<style less="scss">
.iot-region-details-warp {

}
</style>
