<template>
  <el-drawer
    v-model="visible"
    title="租户详细信息"
    size="1200px"
    @closed="handleClosed"
  >
    <div v-loading="loading" class="detail-container">
      <el-descriptions
        :column="2"
        :label-width="110"
        border
        class="tenant-detail-descriptions"
      >
        <el-descriptions-item label="租户名称">
          <span class="detail-value">{{ detailData.tenant_name }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="租户编码">
          <el-tag type="info" effect="plain">{{ detailData.tenant_code }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="联系人">
          {{ detailData.contact_person || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="联系电话">
          {{ detailData.contact_phone || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="电子邮箱">
          {{ detailData.contact_email || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="租户地址" :span="2">
          {{ detailData.address || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="租户状态">
          <el-tag :type="detailData.status === 1 ? 'success' : 'danger'">
            {{ detailData.status === 1 ? '启用' : '禁用' }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="创建时间">
          {{ detailData.create_time || '-' }}
        </el-descriptions-item>
      </el-descriptions>

      <el-divider />

      <div class="tenant-detail-body">
        <el-tabs
          v-model="activeTab"
          tab-position="left"
          class="tenant-detail-tabs"
        >
          <el-tab-pane label="租户用户" name="users">
            <div class="tab-pane-inner">
              <TenantUsersTab :tid="detailTenantId" />
            </div>
          </el-tab-pane>
          <!-- 后续功能：在此继续增加 <el-tab-pane label="..." name="...">...</el-tab-pane> -->
        </el-tabs>
      </div>

      <!-- <div class="footer-actions">
        <el-button @click="visible = false">关闭</el-button>
      </div> -->
    </div>
  </el-drawer>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { getTenantDetail } from "@/api/tenant";
import TenantUsersTab from "./TenantUsersTab.vue";

const visible = ref(false);
const loading = ref(false);
const detailData = ref<any>({});
const detailTenantId = ref<number | null>(null);
const activeTab = ref("users");

const open = async (id: number) => {
  detailTenantId.value = id;
  activeTab.value = "users";
  visible.value = true;
  loading.value = true;
  try {
    const detailRes = await getTenantDetail(id);
    if (detailRes.code === 200) {
      detailData.value = detailRes.data;
    }
  } catch (error) {
    console.error("获取详情失败", error);
  } finally {
    loading.value = false;
  }
};

const handleClosed = () => {
  detailData.value = {};
  detailTenantId.value = null;
  activeTab.value = "users";
};

defineExpose({ open });
</script>

<style scoped>
.detail-container {
  padding: 10px 20px;
}
.detail-value {
  font-weight: bold;
  color: #333;
}
.footer-actions {
  margin-top: 24px;
  display: flex;
  justify-content: flex-end;
}

.tenant-detail-body {
  margin-top: 20px;
  min-height: 0;
}

.tenant-detail-tabs {
  width: 100%;
}

.tenant-detail-tabs :deep(.el-tabs__header) {
  margin-right: 0;
}

.tenant-detail-tabs :deep(.el-tabs__nav-wrap.is-left) {
  min-width: 112px;
}

.tenant-detail-tabs :deep(.el-tabs__item) {
  justify-content: flex-start;
  padding: 0 16px;
  height: 44px;
  line-height: 44px;
}

.tenant-detail-tabs :deep(.el-tabs__content) {
  padding: 0 0 0 16px;
  min-height: 320px;
}

.tab-pane-inner {
  min-width: 0;
}

:deep(.el-descriptions__label) {
  width: 120px;
  background-color: #f5f7fa;
}

.tenant-detail-descriptions :deep(.el-descriptions__table) {
  width: 100%;
  table-layout: fixed;
}
</style>
