<!--
=============================================================================
企微IT智能服务台 — 坐席列表表格组件
=============================================================================
说明：管理后台坐席列表表格，使用 Element Plus el-table
  功能：显示坐席信息、状态筛选、角色/技能标签编辑操作
-->
<template>
  <div class="table-wrapper">
    <el-table
      :data="agents"
      style="width: 100%"
      :header-cell-style="{ background: 'var(--bg-tertiary)', color: 'var(--text-secondary)', fontSize: '12px', fontWeight: '500' }"
      :cell-style="{ color: 'var(--text-primary)', fontSize: '13px' }"
      row-class-name="agent-table-row"
      v-loading="loading"
      element-loading-text="正在加载坐席数据..."
    >
      <!-- 坐席列 -->
      <el-table-column label="坐席" min-width="180">
        <template #default="{ row }">
          <div class="agent-info">
            <div class="agent-avatar" :style="{ background: getAvatarBg(row) }">
              {{ row.name.charAt(0) }}
            </div>
            <div>
              <div class="agent-name">{{ row.name }}</div>
              <div class="agent-id">{{ row.user_id }}</div>
            </div>
          </div>
        </template>
      </el-table-column>

      <!-- 状态列 -->
      <el-table-column label="状态" width="90">
        <template #default="{ row }">
          <el-tag :type="getStatusType(row.status)" size="small" effect="dark">
            {{ getStatusText(row.status) }}
          </el-tag>
        </template>
      </el-table-column>

      <!-- 技能标签列 -->
      <el-table-column label="技能标签" min-width="180">
        <template #default="{ row }">
          <div class="tag-group">
            <el-tag
              v-for="tag in row.skill_tags"
              :key="tag"
              size="small"
              effect="plain"
            >
              {{ tag }}
            </el-tag>
            <span v-if="!row.skill_tags || row.skill_tags.length === 0" class="text-muted">未设置</span>
          </div>
        </template>
      </el-table-column>

      <!-- 角色列 -->
      <el-table-column label="角色" width="80">
        <template #default="{ row }">
          <el-tag :type="row.role === 'admin' ? 'warning' : 'info'" size="small">
            {{ row.role === 'admin' ? '组长' : '坐席' }}
          </el-tag>
        </template>
      </el-table-column>

      <!-- OTP列 -->
      <el-table-column label="OTP" width="80" align="center">
        <template #default="{ row }">
          <el-tag v-if="row.otp_enabled === 1" type="success" size="small">
            已启用
          </el-tag>
          <el-tag v-else-if="row.otp_secret" type="warning" size="small">
            未验证
          </el-tag>
          <span v-else class="text-muted">未绑定</span>
        </template>
      </el-table-column>

      <!-- 负载列 -->
      <el-table-column label="当前/最大负载" width="110" align="center">
        <template #default="{ row }">
          <span>{{ row.current_load }} / {{ row.max_load }}</span>
        </template>
      </el-table-column>

      <!-- 今日结单列 -->
      <el-table-column label="今日结单" width="90" align="center">
        <template #default="{ row }">
          {{ row.today_resolved ?? 0 }}
        </template>
      </el-table-column>

      <!-- 操作列 -->
      <el-table-column label="操作" width="120" align="center" fixed="right">
        <template #default="{ row }">
          <el-button size="small" text type="primary" @click="$emit('edit', row)">
            编辑
          </el-button>
          <el-button size="small" text type="danger" @click="$emit('delete', row)">
            移除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
// ==========================================================================
// 依赖导入
// ==========================================================================
import type { Agent } from '@/types'

// ==========================================================================
// Props / Emits
// ==========================================================================
defineProps<{
  /** 坐席数据列表 */
  agents: Agent[]
  /** 是否正在加载 */
  loading?: boolean
}>()

defineEmits<{
  /** 编辑坐席 */
  edit: [agent: Agent]
  /** 移除坐席 */
  delete: [agent: Agent]
}>()

// ==========================================================================
// 工具方法
// ==========================================================================

/** 获取状态标签类型 */
function getStatusType(status: string): 'success' | 'warning' | 'danger' | 'info' {
  switch (status) {
    case 'online': return 'success'
    case 'busy': return 'warning'
    case 'offline': return 'info'
    default: return 'info'
  }
}

/** 获取状态文本 */
function getStatusText(status: string): string {
  switch (status) {
    case 'online': return '在线'
    case 'busy': return '忙碌'
    case 'offline': return '离线'
    default: return status
  }
}

/** 获取头像背景色 */
function getAvatarBg(row: Agent): string {
  if (row.role === 'admin') return 'var(--accent-light)'
  return 'rgba(16, 185, 129, 0.12)'
}
</script>

<style scoped>
/* 坐席信息 */
.agent-info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.agent-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}
.agent-name {
  font-weight: 500;
  color: var(--text-primary);
}
.agent-id {
  font-size: 11px;
  color: var(--text-muted);
}

.text-muted {
  color: var(--text-muted);
  font-size: 12px;
}
</style>

<style>
/* 全局表行悬停样式 */
.agent-table-row:hover td {
  background-color: var(--bg-tertiary) !important;
}
</style>
