<template>
  <div class="app-container workbench-container">
    <el-card class="box-card" shadow="never">
      <template #header>
        <div class="card-header">
          <span>我的应用</span>
          <el-tag type="primary">{{ currentTenantName }}</el-tag>
        </div>
      </template>

      <div class="app-list">
        <AppCard
            v-for="project in projects"
            :key="project.projectBizId"
            :project="project"
        />
      </div>

      <div v-if="!projects.length" class="empty-container">
        <el-empty description="暂无可用应用" />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { computed, watch } from 'vue'
import useUserStore from '@/store/modules/user'
import AppCard from './components/AppCard.vue'

const userStore = useUserStore()

// 当前租户名称
const currentTenantName = computed(() => {
  return userStore.currentTenant.apiLoginTenantInfoResponse?.tenantName || '未选择租户'
})

// 获取项目列表
const projects = computed(() => {
  return userStore.currentTenant.apiLoginProjectInfoResponseList || []
})

// 监听租户变化
watch(
    () => userStore.currentTenant,
    () => {
      // 租户变化时自动刷新
    }
)
</script>

<style lang="scss" scoped>
.workbench-container {
  padding: 20px;
  background-color: #f0f2f5;
  min-height: calc(100vh - 50px);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
}

.app-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 10px 0;
}

.empty-container {
  padding: 40px 0;
}
</style>
