<template>
  <div class="page-container">
    <h2 class="page-title">系统管理</h2>

    <el-tabs v-model="activeTab" class="system-tabs">
      <el-tab-pane label="用户管理" name="users">
        <div class="table-card card-shadow">
          <div class="table-header">
            <el-input v-model="userKeyword" placeholder="搜索用户" clearable style="width: 220px" />
            <el-button type="primary" size="small" @click="fetchUsers">
              <el-icon><Search /></el-icon>查询
            </el-button>
          </div>
          <el-table :data="userList" v-loading="userLoading" stripe size="default">
            <el-table-column prop="username" label="用户名" min-width="120" />
            <el-table-column prop="real_name" label="真实姓名" min-width="120" />
            <el-table-column prop="email" label="邮箱" min-width="160" />
            <el-table-column prop="dept.name" label="部门" min-width="120">
              <template #default="{ row }">
                {{ row.dept?.name || '--' }}
              </template>
            </el-table-column>
            <el-table-column prop="roles" label="角色" min-width="180">
              <template #default="{ row }">
                <el-tag v-for="r in row.roles" :key="r.id" size="small" style="margin-right: 4px">
                  {{ r.name }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="is_active" label="状态" width="90">
              <template #default="{ row }">
                <el-tag :type="row.is_active ? 'success' : 'danger'" size="small">
                  {{ row.is_active ? '正常' : '禁用' }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>

      <el-tab-pane label="操作日志" name="logs">
        <div class="table-card card-shadow">
          <el-empty description="日志功能开发中" />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Search } from '@element-plus/icons-vue'

const activeTab = ref('users')
const userList = ref<any[]>([])
const userLoading = ref(false)
const userKeyword = ref('')

async function fetchUsers() {
  userLoading.value = true
  try {
    const res = await fetch(`/api/v1/users?keyword=${encodeURIComponent(userKeyword.value)}`, {
      headers: { Authorization: `Bearer ${localStorage.getItem('pdg_token') || ''}` },
    })
    const data = await res.json()
    userList.value = data.data || []
  } catch (e: any) {
    ElMessage.error(e?.message || '加载失败')
  } finally {
    userLoading.value = false
  }
}

onMounted(fetchUsers)
</script>

<style scoped lang="scss">
.page-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 16px;
  color: #303133;
}

.system-tabs {
  background: #fff;
  padding: 16px;
  border-radius: 8px;
}

.table-card {
  padding: 16px;

  .table-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
  }
}
</style>
