<template>
<div class="iot-project-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-wrap v-if="activeName === 'info'" :infoData="infoData" />
        </div>
      </el-tab-pane>
      <el-tab-pane label="项目用户" name="user">
        <div class="tabs-body">
          <user-wrap v-if="activeName === 'user'" :infoData="infoData" />
        </div>
      </el-tab-pane>
      <el-tab-pane label="项目空间" name="space">
        <div class="tabs-body">
          <space-wrap v-if="activeName === 'space'" :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 {
  getProject
} from "@/api/tenant/project";
import InfoWrap from './info'
import UserWrap from './user'
import SpaceWrap from './space'
import DeviceListWrap from './deviceList'
export default {
  name: 'DetailsWrap',
  props: ['sourceId'],
  components: {
    InfoWrap,
    UserWrap,
    SpaceWrap,
    DeviceListWrap
  },
  data() {
    return {
      infoData: {},
      activeName: ''
    }
  },
  created() {
    this.getInfoByProjectId()
    this.activeName = 'info'
  },
  methods: {
    getInfoByProjectId() {
      getProject(this.sourceId).then(response => {
        this.infoData = response.data;
      });
    }
  }
}
</script>
<style less="scss">
.iot-project-details-warp {

}
</style>
