<template>
  <!-- 方案1: 姓名用 tag，工号普通文本 -->
  <div v-if="variant === 'tag-name'" class="teacher-name-no">
    <el-tag size="small" type="primary" effect="plain">{{ name || '-' }}</el-tag>
    <span class="separator">/</span>
    <span class="no">{{ no || '-' }}</span>
  </div>
  
  <!-- 方案2: 工号用 tag，姓名普通文本（推荐） -->
  <div v-else-if="variant === 'tag-no'" class="teacher-name-no">
    <span class="name">{{ name || '-' }}</span>
    <span class="separator">/</span>
    <el-tag size="small" type="primary" effect="plain">{{ no || '-' }}</el-tag>
  </div>
  
  <!-- 方案3: 姓名和工号都用 tag -->
  <div v-else-if="variant === 'tag-both'" class="teacher-name-no">
    <el-tag size="small" type="primary" effect="plain">{{ name || '-' }}</el-tag>
    <span class="separator">/</span>
    <el-tag size="small" type="info" effect="plain">{{ no || '-' }}</el-tag>
  </div>
  
  <!-- 方案4: 姓名用 tag（实心），工号普通文本 -->
  <div v-else-if="variant === 'tag-name-solid'" class="teacher-name-no">
    <el-tag size="small" type="primary">{{ name || '-' }}</el-tag>
    <span class="separator">/</span>
    <span class="no">{{ no || '-' }}</span>
  </div>
  
  <!-- 方案5: 姓名用彩色背景，工号普通文本 -->
  <div v-else-if="variant === 'badge-name'" class="teacher-name-no">
    <span class="name-badge">{{ name || '-' }}</span>
    <span class="separator">/</span>
    <span class="no">{{ no || '-' }}</span>
  </div>
  
  <!-- 默认方案: 姓名普通文本，工号轻量徽章（推荐，与页面协调） -->
  <div v-else class="teacher-name-no">
    <span class="name">{{ name || '-' }}</span>
    <span class="separator">/</span>
    <span class="no-badge">{{ no || '-' }}</span>
  </div>
</template>

<script setup lang="ts">
interface Props {
  name?: string;
  no?: string;
  variant?: 'default' | 'tag-name' | 'tag-no' | 'tag-both' | 'tag-name-solid' | 'badge-name';
}

withDefaults(defineProps<Props>(), {
  variant: 'default'
});
</script>

<style scoped>
.teacher-name-no {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.name {
  font-weight: 500;
  color: #303133;
}

.separator {
  font-size: 12px;
  color: #909399;
}

.no {
  font-size: 12px;
  color: #606266;
}

.no-primary {
  font-size: 12px;
  color: var(--el-color-primary, #667eea);
  font-weight: 500;
}

.no-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 500;
  background: var(--el-color-primary-light-9, #ecf5ff);
  color: var(--el-color-primary, #667eea);
  line-height: 1.2;
}

.name-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 500;
  font-size: 12px;
  background: var(--el-color-primary-light-9, #ecf5ff);
  color: var(--el-color-primary, #667eea);
}
</style>

