<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import DataTablePage from '@/components/DataTablePage.vue'
import { getTenant, setTenantQuota, type Tenant } from '@/api/modules/tenant'
import { getProjects, type Project } from '@/api/modules/project'

const route = useRoute()
const router = useRouter()
const tenant = ref<Tenant | null>(null)
const projects = ref<Project[]>([])
const loading = ref(false)
const quotaText = ref('')

async function load() {
  const id = route.params.id as string
  loading.value = true
  try {
    tenant.value = await getTenant(id)
    projects.value = await getProjects(id)
    quotaText.value = JSON.stringify(tenant.value?.quota || {})
  } finally {
    loading.value = false
  }
}

async function saveQuota() {
  if (!tenant.value) return
  try {
    const q = JSON.parse(quotaText.value || '{}')
    await setTenantQuota(tenant.value.id, q)
    ElMessage.success('配额已保存')
    load()
  } catch {
    ElMessage.error('配额需为合法 JSON')
  }
}

function openProject(id: string) {
  router.push(`/projects/${id}`)
}

onMounted(load)
</script>

<template>
  <div class="page">
    <el-page-header title="返回" @back="router.back()">
      <template #content>
        <span class="page-title">租户详情：{{ tenant?.name }}</span>
      </template>
    </el-page-header>
    <el-card class="section" v-loading="loading">
      <template #header>基本信息</template>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="名称">{{ tenant?.name }}</el-descriptions-item>
        <el-descriptions-item label="编码">{{ tenant?.code }}</el-descriptions-item>
        <el-descriptions-item label="状态">{{ tenant?.status }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ tenant?.create_time }}</el-descriptions-item>
      </el-descriptions>
      <el-divider />
      <div class="quota-edit">
        <span class="label">配额 JSON</span>
        <el-input v-model="quotaText" type="textarea" :rows="3" />
        <el-button type="primary" @click="saveQuota">保存配额</el-button>
      </div>
    </el-card>
    <el-card class="section">
      <template #header>项目空间</template>
      <DataTablePage title="项目空间" :data="projects">
        <template #columns>
          <el-table-column prop="name" label="项目名" min-width="140" />
          <el-table-column prop="code" label="编码" min-width="100" />
          <el-table-column prop="status" label="状态" min-width="100" />
          <el-table-column prop="create_time" label="创建时间" min-width="180" />
        </template>
        <template #actions="{ row }">
          <el-button link type="primary" @click="openProject(row.id)">打开</el-button>
        </template>
      </DataTablePage>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.page { padding: 16px; }
.section { margin-top: 16px; }
.page-title { font-size: 16px; font-weight: 600; }
.quota-edit { display: flex; flex-direction: column; gap: 12px; max-width: 480px; }
.label { font-size: 13px; color: #606266; }
</style>
