<script lang="ts" setup>
import { ref } from 'vue';
import { ElTabs, ElTabPane } from 'element-plus';

// 当前选中的tab
const activeTab = ref('read');

// 查阅统计数据
const consultStats = ref({
  readCount: 2,
  unreadCount: 1,
  readers: ['东冬', '世鹏'],
  unreaders: ['张三']
});

// 处理tab切换
const handleTabChange = (tab: string) => {
  activeTab.value = tab;
};

// 获取名字的最后两个字
const getLastTwoChars = (name: string) => {
  return name.slice(-2);
};
</script>

<template>
  <div class="consult-container">
    <!-- Tabs切换 -->
    <ElTabs v-model="activeTab" @tab-change="handleTabChange" class="mb-4">
      <ElTabPane 
        :label="`${consultStats.readCount}人已阅`" 
        name="read"
      />
      <ElTabPane 
        :label="`${consultStats.unreadCount}人未阅`" 
        name="unread"
      />
    </ElTabs>
    
    <!-- 人员列表 -->
    <div v-if="activeTab === 'read'" class="readers-list">
      <div 
        v-for="(reader, index) in consultStats.readers" 
        :key="index"
        class="reader-item mr-2 mb-2"
      >
        {{ getLastTwoChars(reader) }}
      </div>
    </div>
    
    <div v-else class="readers-list">
      <div 
        v-for="(unreader, index) in consultStats.unreaders" 
        :key="index"
        class="reader-item mr-2 mb-2 unread"
      >
        {{ getLastTwoChars(unreader) }}
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.consult-container {
  width: 100%;
  padding: 16px 0;
  font-size: 14px;
  
  .readers-list {
    display: flex;
    flex-wrap: wrap;
  }
  
  .reader-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #409eff;
    color: white;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    
    &:hover {
      background-color: #66b1ff;
      transform: scale(1.1);
    }
    
    &.unread {
      background-color: #dcdfe6;
      color: #606266;
      
      &:hover {
        background-color: #e4e7ed;
      }
    }
  }
}
</style>
