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

// 模拟员工数据
const staffList = ref([
  {
    id: 1,
    name: '张三',
    position: '高级前端开发工程师',
    avatar: 'https://picsum.photos/200/200?random=1',
    intro: '张三在前端开发领域拥有丰富的经验，擅长 Vue、React 等主流框架，对前端性能优化有深入研究。',
    honors: ['优秀员工', '技术创新奖']
  },
  {
    id: 2,
    name: '李四',
    position: '后端架构师',
    avatar: 'https://picsum.photos/200/200?random=2',
    intro: '李四专注于后端系统设计与开发，精通 Java、Go 语言，主导过多个大型项目的架构设计。',
    honors: ['杰出贡献奖', '最佳团队成员']
  },
  {
    id: 3,
    name: '王五',
    position: '产品经理',
    avatar: 'https://picsum.photos/200/200?random=3',
    intro: '王五具备敏锐的市场洞察力和出色的产品规划能力，成功打造过多款用户喜爱的产品。',
    honors: ['优秀产品奖', '最佳创意奖']
  }
]);
</script>

<template>
  <div class="max-w-7xl mx-auto p-6">
    <h1 class="text-3xl font-bold text-gray-800 mb-8 text-center">员工风采</h1>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <ElCard v-for="staff in staffList" :key="staff.id" class="shadow-md hover:shadow-xl transition-shadow">
        <div class="flex flex-col items-center">
          <img :src="staff.avatar" alt="staff avatar" class="w-32 h-32 rounded-full object-cover mb-4">
          <h2 class="text-xl font-semibold text-gray-700">{{ staff.name }}</h2>
          <p class="text-gray-600 text-sm mb-4">{{ staff.position }}</p>
        </div>
        <ElDivider />
        <p class="text-gray-600 mb-4">{{ staff.intro }}</p>
        <div class="flex flex-wrap gap-2">
          <ElTag v-for="honor in staff.honors" :key="honor" type="success" size="small">
            {{ honor }}
          </ElTag>
        </div>
      </ElCard>
    </div>
  </div>
</template>

<style scoped>

</style>