<!-- =============================================================================
// 企微IT智能服务台 — 参与者面板组件
// =============================================================================
// 说明：在聊天区顶部展示当前会话的参与者列表，提供邀请和移除入口
// 功能：
//   1. 显示参与者列表（坐席 + 协作坐席 + 被邀请员工）含头像
//   2. 主责坐席可点击「邀请」按钮打开邀请弹窗
//   3. 主责坐席可移除参与者
//   4. 参与者加入/退出状态实时更新
// 位置：放在 UserInfoBar 下方，聊天消息区上方
// ============================================================================= -->

<template>
  <div class="participant-bar" v-if="hasParticipants">
    <!-- 参与者列表 -->
    <div class="participant-bar__list">
      <span class="participant-bar__label">
        {{ totalParticipantCount }}人参与:
      </span>

      <!-- 主责坐席（始终第一个显示） -->
      <div class="participant-item participant-item--primary">
        <div class="participant-avatar participant-avatar--primary">
          <span class="avatar-letter">{{ agentName ? agentName.charAt(agentName.length - 1) : '席' }}</span>
        </div>
        <span class="participant-name">{{ agentName }}(主责)</span>
      </div>

      <!-- 协作坐席 -->
      <div
        v-for="aid in collaboratingAgentIds"
        :key="'collab-' + aid"
        class="participant-item participant-item--collab"
      >
        <div class="participant-avatar participant-avatar--collab">
          <span class="avatar-letter">{{ getAgentName(aid).charAt(getAgentName(aid).length - 1) }}</span>
        </div>
        <span class="participant-name">{{ getAgentName(aid) }}(协作)</span>
      </div>

      <!-- 被邀请参与者 -->
      <div
        v-for="p in participants"
        :key="'p-' + p.id"
        class="participant-item"
        :class="{ 'participant-item--pending': !p.joined }"
      >
        <!-- 头像：有 avatar 用 img，无则首字母降级 -->
        <div class="participant-avatar" :class="p.joined ? '' : 'participant-avatar--pending'">
          <img
            v-if="p.avatar"
            :src="p.avatar"
            :alt="p.name"
            class="avatar-img"
            @error="onAvatarError($event)"
          />
          <span v-else class="avatar-letter">{{ p.name.charAt(p.name.length - 1) }}</span>
        </div>
        <span class="participant-name">
          {{ p.name }}{{ p.type === 'employee' ? '' : `(${p.type})` }}
          <span v-if="!p.joined" class="pending-hint">待加入</span>
        </span>
        <!-- 移除按钮（仅主责坐席可见） -->
        <el-icon
          v-if="isPrimaryAgent"
          class="remove-icon"
          @click.stop="handleRemove(p.id)"
        >
          <Close />
        </el-icon>
      </div>
    </div>

    <!-- 操作按钮 -->
    <div class="participant-bar__actions">
      <!-- 邀请按钮（仅主责坐席可见） -->
      <el-button
        v-if="isPrimaryAgent"
        size="small"
        type="primary"
        link
        @click="$emit('invite')"
      >
        + 邀请
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
// ============================================================================
// 导入
// ============================================================================
import { computed } from 'vue'
import { Close } from '@element-plus/icons-vue'
import type { ParticipantInfo } from '@/api/conversation'

// ============================================================================
// Props & Emits
// ============================================================================

interface Props {
  /** 参与者列表（不含主责坐席，从 currentConversation.participants 获取） */
  participants: ParticipantInfo[]
  /** 主责坐席姓名 */
  agentName: string
  /** 当前登录坐席是否为主责坐席 */
  isPrimaryAgent: boolean
  /** 协作坐席ID列表 */
  collaboratingAgentIds?: string[]
  /** 协作坐席姓名映射（agent_id → name） */
  collaboratingAgentNames?: Record<string, string>
}

const props = withDefaults(defineProps<Props>(), {
  collaboratingAgentIds: () => [],
  collaboratingAgentNames: () => ({}),
})

const emit = defineEmits<{
  /** 点击邀请按钮 */
  'invite': []
  /** 移除参与者（主责坐席操作） */
  'remove': [userId: string]
}>()

// ============================================================================
// 计算属性
// ============================================================================

/** 是否有参与者（排除只有坐席自己一个人的情况） */
const hasParticipants = computed(() => {
  return props.participants.length > 0 || props.collaboratingAgentIds.length > 0
})

/** 总参与者数量（主责 + 协作 + 被邀请） */
const totalParticipantCount = computed(() => {
  // 主责坐席 1人 + 协作坐席 + 被邀请参与者
  return 1 + props.collaboratingAgentIds.length + props.participants.length
})

// ============================================================================
// 方法
// ============================================================================

/** 获取协作坐席姓名（从映射表查找，找不到则显示ID） */
function getAgentName(agentId: string): string {
  return props.collaboratingAgentNames?.[agentId] || agentId
}

/** 移除参与者（仅主责坐席可操作） */
function handleRemove(userId: string): void {
  if (!props.isPrimaryAgent) return
  emit('remove', userId)
}

/** 头像加载失败时隐藏 img，降级显示首字母 */
function onAvatarError(event: Event): void {
  const img = event.target as HTMLImageElement
  img.style.display = 'none'
}
</script>

<style scoped>
.participant-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  background: var(--bg-tertiary, #f5f7fa);
  border-bottom: 1px solid var(--border-light, #e4e7ed);
  font-size: 13px;
  flex-shrink: 0;
}

.participant-bar__list {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
}

/* 隐藏滚动条但保留滚动功能 */
.participant-bar__list::-webkit-scrollbar {
  display: none;
}

.participant-bar__label {
  color: var(--text-secondary, #909399);
  white-space: nowrap;
  font-size: 12px;
  flex-shrink: 0;
}

/* 参与者条目 */
.participant-item {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  padding: 2px 6px;
  border-radius: 12px;
  background: var(--bg-secondary, #fff);
  border: 1px solid var(--border-light, #e4e7ed);
  transition: background 0.15s;
}

.participant-item:hover {
  background: var(--bg-tertiary, #f5f7fa);
}

.participant-item--primary {
  border-color: var(--accent, #3b82f6);
  background: rgba(59, 130, 246, 0.06);
}

.participant-item--collab {
  border-color: var(--success, #67c23a);
  background: rgba(103, 194, 58, 0.06);
}

.participant-item--pending {
  opacity: 0.7;
}

/* 头像容器 */
.participant-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  background: var(--accent, #3b82f6);
}

.participant-avatar--primary {
  background: var(--accent, #3b82f6);
}

.participant-avatar--collab {
  background: var(--success, #67c23a);
}

.participant-avatar--pending {
  background: var(--text-tertiary, #c0c4cc);
}

/* 头像图片 */
.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

/* 头像首字降级 */
.avatar-letter {
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
}

/* 参与者姓名 */
.participant-name {
  font-size: 12px;
  white-space: nowrap;
  color: var(--text-primary, #303133);
}

.pending-hint {
  font-size: 10px;
  color: var(--text-tertiary, #c0c4cc);
  margin-left: 2px;
}

/* 移除图标 */
.remove-icon {
  font-size: 12px;
  color: var(--text-tertiary, #c0c4cc);
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s;
}

.remove-icon:hover {
  color: var(--danger, #f56c6c);
}

.participant-bar__actions {
  flex-shrink: 0;
  margin-left: 8px;
}
</style>
