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

const router = useRouter()
const loading = ref(false)
const tenants = ref<Tenant[]>([])

async function load() {
  loading.value = true
  try {
    tenants.value = await getTenants()
  } finally {
    loading.value = false
  }
}

const dialogVisible = ref(false)
const form = ref({ name: '', code: '', status: 'active', owner_user_id: '', max_projects: 5, retention_policy_id: '' })

function openCreate() {
  form.value = { name: '', code: '', status: 'active', owner_user_id: '', max_projects: 5, retention_policy_id: '' }
  dialogVisible.value = true
}

async function submitCreate() {
  await createTenant({
    name: form.value.name,
    code: form.value.code || undefined,
    status: form.value.status,
    owner_user_id: form.value.owner_user_id || undefined,
    quota: { max_projects: Number(form.value.max_projects) },
    retention_policy_id: form.value.retention_policy_id || undefined,
  })
  ElMessage.success('创建成功')
  dialogVisible.value = false
  load()
}

function openDetail(row: Tenant) {
  router.push(`/tenants/${row.id}`)
}

onMounted(load)
</script>

<template>
  <div class="page-wrap">
    <DataTablePage
      title="租户管理"
      :data="tenants"
      :loading="loading"
      searchable
      :search-fields="['name', 'code']"
      create-text="新建租户"
      @create="openCreate"
    >
      <template #columns>
        <el-table-column prop="name" label="名称" min-width="120" />
        <el-table-column prop="code" label="编码" min-width="120" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="row.status === 'active' ? 'success' : 'info'">{{ row.status }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="owner_user_id" label="拥有者" min-width="120" />
        <el-table-column prop="retention_policy_id" label="留存策略" min-width="120" />
      </template>
      <template #actions="{ row }">
        <div class="action-buttons">
          <el-button link type="primary" @click="openDetail(row as Tenant)">详情</el-button>
        </div>
      </template>
    </DataTablePage>

    <el-dialog v-model="dialogVisible" title="新建租户" width="480px">
      <el-form :model="form" label-width="90px">
        <el-form-item label="名称" required>
          <el-input v-model="form.name" placeholder="租户名称" />
        </el-form-item>
        <el-form-item label="编码">
          <el-input v-model="form.code" placeholder="留空自动生成" />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="form.status">
            <el-option label="启用" value="active" />
            <el-option label="停用" value="disabled" />
          </el-select>
        </el-form-item>
        <el-form-item label="拥有者ID">
          <el-input v-model="form.owner_user_id" placeholder="用户 ID" />
        </el-form-item>
        <el-form-item label="最大项目数">
          <el-input-number v-model="form.max_projects" :min="1" />
        </el-form-item>
        <el-form-item label="留存策略ID">
          <el-input v-model="form.retention_policy_id" placeholder="retention_policy ID" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitCreate">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.page-wrap {
  height: 100%;
  padding: 16px;
  box-sizing: border-box;
}
</style>
