<template>
  <div class="role-view-container">
    <!-- 头部：返回按钮和标题 -->
    <div class="header-section">
      <el-button :icon="ArrowLeft" text @click="handleBack"> 返回 </el-button>
      <h2 class="page-title">查看角色</h2>
    </div>

    <!-- 角色信息 -->
    <div class="role-info-section">
      <div class="role-name">
        {{ roleName }}
      </div>
      <div class="permission-label">权限</div>
    </div>

    <!-- 权限表格 -->
    <div class="permission-table-section">
      <el-table :data="permissionTableData" border style="width: 100%">
        <el-table-column prop="level1Permission" label="一级权限" width="200" align="center">
          <template #default="{ row }">
            <span>{{ row.level1Permission || "-" }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="level2Permission" label="二级权限" width="200" align="center">
          <template #default="{ row }">
            <span>{{ row.level2Permission || "-" }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="level3Permission" label="三级权限" align="center">
          <template #default="{ row }">
            <span>{{ row.level3Permission || "-" }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading-container">
      <el-skeleton :rows="5" animated />
    </div>

    <!-- 空状态 -->
    <div v-if="!loading && permissionTableData.length === 0" class="empty-state">
      <el-empty description="暂无权限数据" :image-size="100" />
    </div>
  </div>
</template>

<script setup lang="ts" name="roleView">
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import { ArrowLeft } from "@element-plus/icons-vue";
import { getRolePermissionTable, type RolePermissionItem } from "@/api/modules/accountRoleManagement";

// 路由
const router = useRouter();
const route = useRoute();

// 角色名称
const roleName = ref<string>("");

// 权限表格数据
const permissionTableData = ref<RolePermissionItem[]>([]);

// 加载状态
const loading = ref(false);

// 获取角色权限数据
const loadRolePermissionData = async () => {
  const roleId = route.query.roleId;

  if (!roleId) {
    ElMessage.error("缺少角色ID参数");
    router.back();
    return;
  }

  loading.value = true;
  try {
    const res = await getRolePermissionTable({ roleId: Number(roleId) });
    const code = typeof res.code === "string" ? parseInt(res.code) : res.code;

    if (code === 200 && res.data) {
      permissionTableData.value = res.data;
      // 从路由参数或查询参数中获取角色名称，如果没有则使用默认值
      roleName.value = (route.query.roleName as string) || "角色";
    } else {
      ElMessage.error(res.msg || "获取权限数据失败");
    }
  } catch (error) {
    console.error("获取权限数据失败:", error);
    ElMessage.error("获取权限数据失败，请重试");
  } finally {
    loading.value = false;
  }
};

// 返回
const handleBack = () => {
  router.back();
};

// 初始化
onMounted(() => {
  loadRolePermissionData();
});
</script>

<style lang="scss" scoped>
.role-view-container {
  min-height: calc(100vh - 84px);
  padding: 20px;
  background: #ffffff;
}

// 头部区域
.header-section {
  position: relative;
  padding-bottom: 16px;
  margin-bottom: 24px;
  border-bottom: 1px solid #e4e7ed;
  .page-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--el-text-color-primary);
    text-align: center;
  }
}

// 角色信息区域
.role-info-section {
  margin-bottom: 24px;
  .role-name {
    margin-bottom: 12px;
    font-size: 18px;
    font-weight: 600;
    color: var(--el-text-color-primary);
  }
  .permission-label {
    font-size: 16px;
    font-weight: 500;
    color: var(--el-text-color-regular);
  }
}

// 权限表格区域
.permission-table-section {
  margin-top: 20px;
  :deep(.el-table) {
    .el-table__header {
      th {
        font-weight: 600;
        color: var(--el-text-color-primary);
        background-color: #f5f7fa;
      }
    }
    .el-table__body {
      td {
        padding: 12px 0;
      }
    }
  }
}

// 加载状态
.loading-container {
  padding: 40px 20px;
}

// 空状态
.empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  padding: 40px 20px;
}
</style>
