<script setup lang="ts">
import { ArrowDown } from '@element-plus/icons-vue'
import AdminStatusTag from '@/components/admin/AdminStatusTag.vue'
import type { AdminRole, AdminUserListItem } from '@/types/admin'

defineProps<{
  loading: boolean
  items: AdminUserListItem[]
  pagination: { page: number; pageSize: number; total: number }
  actionLoadingId: number | null
  loadUsers: (page?: number) => Promise<void>
  isCurrentUser: (userId: number) => boolean
  updateRole: (item: AdminUserListItem, nextRole: AdminRole) => Promise<void>
  toggleStatus: (item: AdminUserListItem) => Promise<void>
  promptResetPassword: (item: AdminUserListItem) => Promise<void>
  promptUpdateInventoryGroups: (item: AdminUserListItem) => Promise<void>
  formatRoleLabel: (role: AdminRole) => string
  formatInventoryGroups: (item: AdminUserListItem) => string[]
  formatAdminDateTime: (value: string) => string
}>()
</script>

<template>
  <el-card shadow="never" class="section-card">
    <div class="users-table-toolbar table-toolbar">
      <strong>用户列表</strong>
      <span>共 {{ pagination.total }} 个账号</span>
    </div>
    <el-table
      :data="items"
      stripe
      size="small"
      v-loading="loading"
      element-loading-text="用户列表加载中"
      class="users-table data-table w-full"
    >
      <el-table-column prop="userId" label="ID" width="52" align="center" />
      <el-table-column prop="username" label="账号" width="112" show-overflow-tooltip />
      <el-table-column label="角色" width="82">
        <template #default="{ row }">{{ formatRoleLabel(row.role) }}</template>
      </el-table-column>
      <el-table-column label="库存组" width="112">
        <template #default="{ row }">
          <div class="inventory-tags">
            <el-tag
              v-for="(code, i) in formatInventoryGroups(row)"
              :key="i"
              size="small"
              :type="code === '未绑定' || code === '不限库存组' ? 'info' : undefined"
              >{{ code }}</el-tag
            >
          </div>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="128">
        <template #default="{ row }"><AdminStatusTag :status="row.status" /></template>
      </el-table-column>
      <el-table-column label="创建时间" width="154">
        <template #default="{ row }"
          ><span class="date-cell">{{ formatAdminDateTime(row.createdAt) }}</span></template
        >
      </el-table-column>
      <el-table-column label="更新时间" width="154">
        <template #default="{ row }"
          ><span class="date-cell">{{ formatAdminDateTime(row.updatedAt) }}</span></template
        >
      </el-table-column>
      <el-table-column label="操作" min-width="356">
        <template #default="{ row }">
          <div class="action-stack">
            <el-dropdown
              trigger="click"
              :disabled="isCurrentUser(row.userId)"
              @command="(cmd: string) => updateRole(row, cmd as AdminRole)"
            >
              <el-button
                :loading="actionLoadingId === row.userId"
                size="small"
                :disabled="isCurrentUser(row.userId)"
              >
                改角色<el-icon class="el-icon--right"><ArrowDown /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="admin" :disabled="row.role === 'admin'"
                    >设为管理员</el-dropdown-item
                  >
                  <el-dropdown-item command="operator" :disabled="row.role === 'operator'"
                    >设为运营</el-dropdown-item
                  >
                  <el-dropdown-item command="support" :disabled="row.role === 'support'"
                    >设为客服</el-dropdown-item
                  >
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <el-button
              :loading="actionLoadingId === row.userId"
              size="small"
              :disabled="isCurrentUser(row.userId)"
              @click="toggleStatus(row)"
              >{{ row.status === 'active' ? '停用' : '启用' }}</el-button
            >
            <el-button
              :loading="actionLoadingId === row.userId"
              size="small"
              :disabled="row.role !== 'support'"
              @click="promptUpdateInventoryGroups(row)"
              >配库存组</el-button
            >
            <el-button
              :loading="actionLoadingId === row.userId"
              size="small"
              type="primary"
              @click="promptResetPassword(row)"
              >重置密码</el-button
            >
            <el-tag v-if="isCurrentUser(row.userId)" size="small" type="info">当前账号</el-tag>
          </div>
        </template>
      </el-table-column>
      <template #empty><el-empty :image-size="60" description="暂无用户" /></template>
    </el-table>
    <el-pagination
      v-if="pagination.total > 0"
      v-model:current-page="pagination.page"
      :page-size="pagination.pageSize"
      :total="pagination.total"
      layout="total, prev, pager, next"
      class="pagination-center"
      @current-change="loadUsers"
    />
  </el-card>
</template>

<style scoped>
.users-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.users-table-toolbar strong {
  color: var(--text-primary);
  font-size: var(--text-base);
}
.users-table-toolbar span {
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: 700;
}
.users-table {
  background: rgba(255, 255, 255, 0.36);
}
.users-table :deep(td.el-table__cell) {
  height: 44px;
  background: rgba(255, 255, 255, 0.46);
}
.users-table :deep(.el-table__row--striped td.el-table__cell) {
  background: rgba(255, 255, 255, 0.62);
}
.users-table :deep(.el-table__body tr:hover > td.el-table__cell) {
  background: var(--el-table-row-hover-bg-color);
}
.inventory-tags {
  display: flex;
  gap: 4px;
  align-items: center;
  white-space: nowrap;
}
.inventory-tags :deep(.el-tag) {
  flex: 0 0 auto;
}
.date-cell {
  display: inline-block;
  white-space: nowrap;
  font-size: var(--text-xs);
}
.action-stack {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  align-items: center;
  white-space: nowrap;
}
.action-stack :deep(.el-button) {
  flex: 0 0 auto;
  margin-left: 0;
  padding: 5px 8px;
}
.action-stack :deep(.el-tag) {
  flex: 0 0 auto;
  padding: 0 7px;
}
.action-stack :deep(.el-icon--right) {
  margin-left: 4px;
}
</style>
