<template>
  <div class="page">
    <el-card shadow="never" class="small-padding">
      <el-tabs :model-value="'0'" size="small" class="h-full">
        <el-tab-pane label="项目概况" name="0" lazy>
          <InfoVue></InfoVue>
        </el-tab-pane>
        <el-tab-pane label="网关和设备" name="1" lazy>
          <DeviceVue :resourcesTypes="1"></DeviceVue>
        </el-tab-pane>
        <el-tab-pane label="场景联动" name="4" lazy>
          <SceneVue :resourcesTypes="4"></SceneVue>
        </el-tab-pane>
        <el-tab-pane label="组态应用" name="2" lazy>
          <TopoVue :resourcesTypes="2"></TopoVue>
        </el-tab-pane>
        <el-tab-pane label="视频监控" name="3" lazy>
          <VideoVue :resourcesTypes="3"></VideoVue>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import TopoVue from './topo.vue'
import InfoVue from './info.vue'
import VideoVue from './video.vue'
import DeviceVue from './device.vue'
import SceneVue from './scene.vue'

// 资源类型 resourcesTypes
//  设备  1
//  组态  2
//  视频  3
//  场景联动  4

</script>
<style scoped lang="scss">
::v-deep {
  .subtitle {
    display: flex;
    justify-content: space-between;
    height: 24px;
    align-items: center;
    font-weight: 500;
    margin-bottom: 10px
  }
}
</style>
