<template>
  <div class="min-h-screen bg-gray-50 dark:bg-gray-900 p-6">
    <!-- 顶部导航栏 -->
    <div class="flex justify-between items-center mb-6">
      <h1 class="text-2xl font-bold text-gray-900 dark:text-white">人力资源管理</h1>
      <div class="flex space-x-4">
        <button 
          @click="showAddEmployee = true"
          class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
        >
          <PlusIcon class="h-5 w-5 inline-block mr-2" />
          添加员工
        </button>
      </div>
    </div>

    <!-- 员工统计卡片 -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
        <h3 class="text-lg font-medium text-gray-900 dark:text-white">总员工数</h3>
        <p class="mt-2 text-3xl font-bold text-indigo-600">{{ employees.length }}</p>
      </div>
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
        <h3 class="text-lg font-medium text-gray-900 dark:text-white">在职员工</h3>
        <p class="mt-2 text-3xl font-bold text-green-600">{{ employees.filter(e => e.status === 'active').length }}</p>
      </div>
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
        <h3 class="text-lg font-medium text-gray-900 dark:text-white">试用期</h3>
        <p class="mt-2 text-3xl font-bold text-yellow-600">{{ employees.filter(e => e.status === 'probation').length }}</p>
      </div>
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
        <h3 class="text-lg font-medium text-gray-900 dark:text-white">离职员工</h3>
        <p class="mt-2 text-3xl font-bold text-red-600">{{ employees.filter(e => e.status === 'inactive').length }}</p>
      </div>
    </div>

    <!-- 搜索和筛选 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 mb-6">
      <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
        <div>
          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">部门</label>
          <select 
            v-model="filters.department"
            class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md dark:bg-gray-700 dark:text-white"
          >
            <option value="">所有部门</option>
            <option v-for="dept in departments" :key="dept.id" :value="dept.id">
              {{ dept.name }}
            </option>
          </select>
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">职位</label>
          <select 
            v-model="filters.position"
            class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md dark:bg-gray-700 dark:text-white"
          >
            <option value="">所有职位</option>
            <option v-for="pos in positions" :key="pos.id" :value="pos.id">
              {{ pos.name }}
            </option>
          </select>
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">状态</label>
          <select 
            v-model="filters.status"
            class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md dark:bg-gray-700 dark:text-white"
          >
            <option value="">所有状态</option>
            <option value="active">在职</option>
            <option value="probation">试用期</option>
            <option value="inactive">离职</option>
          </select>
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">搜索</label>
          <div class="mt-1 relative rounded-md shadow-sm">
            <input 
              type="text" 
              v-model="searchText"
              placeholder="搜索员工姓名..."
              class="block w-full pr-10 border-gray-300 dark:border-gray-600 rounded-md focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-700 dark:text-white"
            />
            <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
              <SearchIcon class="h-5 w-5 text-gray-400" />
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 员工列表 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
      <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
        <thead class="bg-gray-50 dark:bg-gray-700">
          <tr>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">员工信息</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">部门/职位</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">入职日期</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">状态</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">操作</th>
          </tr>
        </thead>
        <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
          <tr v-for="employee in filteredEmployees" :key="employee.id">
            <td class="px-6 py-4 whitespace-nowrap">
              <div class="flex items-center">
                <div class="flex-shrink-0 h-10 w-10">
                  <img class="h-10 w-10 rounded-full" :src="employee.avatar" :alt="employee.name">
                </div>
                <div class="ml-4">
                  <div class="text-sm font-medium text-gray-900 dark:text-white">{{ employee.name }}</div>
                  <div class="text-sm text-gray-500 dark:text-gray-400">{{ employee.employeeId }}</div>
                </div>
              </div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <div class="text-sm text-gray-900 dark:text-white">{{ getDepartmentName(employee.departmentId) }}</div>
              <div class="text-sm text-gray-500 dark:text-gray-400">{{ getPositionName(employee.positionId) }}</div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
              {{ formatDate(employee.joinDate) }}
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <span :class="getStatusClass(employee.status)" class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full">
                {{ getStatusText(employee.status) }}
              </span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
              <button 
                @click="handleView(employee)"
                class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300 mr-3"
              >
                查看
              </button>
              <button 
                @click="handleEdit(employee)"
                class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300 mr-3"
              >
                编辑
              </button>
              <button 
                @click="handleDelete(employee)"
                class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300"
              >
                删除
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 添加/编辑员工弹窗 -->
    <div v-if="showAddEmployee" class="fixed inset-0 bg-gray-500 bg-opacity-75 flex items-center justify-center z-50">
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-2xl w-full">
        <div class="p-6">
          <div class="flex justify-between items-center mb-6">
            <h3 class="text-lg font-medium text-gray-900 dark:text-white">
              {{ selectedEmployee ? '编辑员工' : '添加员工' }}
            </h3>
            <button 
              @click="showAddEmployee = false"
              class="text-gray-400 hover:text-gray-500 dark:hover:text-gray-300"
            >
              <XIcon class="h-6 w-6" />
            </button>
          </div>

          <form @submit.prevent="handleSubmit" class="space-y-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">姓名</label>
                <input 
                  type="text" 
                  v-model="employeeForm.name"
                  class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-700 dark:text-white"
                />
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">工号</label>
                <input 
                  type="text" 
                  v-model="employeeForm.employeeId"
                  class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-700 dark:text-white"
                />
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">部门</label>
                <select 
                  v-model="employeeForm.departmentId"
                  class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md dark:bg-gray-700 dark:text-white"
                >
                  <option v-for="dept in departments" :key="dept.id" :value="dept.id">
                    {{ dept.name }}
                  </option>
                </select>
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">职位</label>
                <select 
                  v-model="employeeForm.positionId"
                  class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md dark:bg-gray-700 dark:text-white"
                >
                  <option v-for="pos in positions" :key="pos.id" :value="pos.id">
                    {{ pos.name }}
                  </option>
                </select>
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">入职日期</label>
                <input 
                  type="date" 
                  v-model="employeeForm.joinDate"
                  class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-700 dark:text-white"
                />
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">状态</label>
                <select 
                  v-model="employeeForm.status"
                  class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md dark:bg-gray-700 dark:text-white"
                >
                  <option value="active">在职</option>
                  <option value="probation">试用期</option>
                  <option value="inactive">离职</option>
                </select>
              </div>
              <div class="md:col-span-2">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">备注</label>
                <textarea 
                  v-model="employeeForm.remarks"
                  rows="3"
                  class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-700 dark:text-white"
                ></textarea>
              </div>
            </div>

            <div class="flex justify-end space-x-3">
              <button 
                type="button"
                @click="showAddEmployee = false"
                class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
              >
                取消
              </button>
              <button 
                type="submit"
                class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
              >
                {{ selectedEmployee ? '保存' : '添加' }}
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { 
  SearchIcon, 
  PlusIcon,
  XIcon
} from 'lucide-vue-next'

// 默认头像配置
const defaultImages = {
  avatar: 'https://ui-avatars.com/api/?name=User&background=random&color=fff&size=150'
}

// 员工数据
const employees = ref([
  {
    id: 1,
    name: '张三',
    department: '技术部',
    position: '高级工程师',
    status: '在职',
    joinDate: '2023-01-15',
    avatar: defaultImages.avatar
  },
  {
    id: 2,
    name: '李四',
    department: '市场部',
    position: '市场经理',
    status: '在职',
    joinDate: '2023-03-20',
    avatar: defaultImages.avatar
  },
  {
    id: 3,
    name: '王五',
    department: '人事部',
    position: '人事专员',
    status: '试用期',
    joinDate: '2024-01-10',
    avatar: defaultImages.avatar
  }
])

// 部门数据
const departments = ref([
  { id: 'D001', name: '技术部' },
  { id: 'D002', name: '市场部' },
  { id: 'D003', name: '人事部' },
  { id: 'D004', name: '财务部' }
])

// 职位数据
const positions = ref([
  { id: 'P001', name: '前端开发' },
  { id: 'P002', name: '后端开发' },
  { id: 'P003', name: '产品经理' },
  { id: 'P004', name: 'UI设计师' }
])

// 搜索和筛选
const searchText = ref('')
const filters = ref({
  department: '',
  position: '',
  status: ''
})

// 员工表单
const showAddEmployee = ref(false)
const selectedEmployee = ref(null)
const employeeForm = ref({
  name: '',
  employeeId: '',
  departmentId: '',
  positionId: '',
  joinDate: '',
  status: 'active',
  remarks: ''
})

// 计算属性
const filteredEmployees = computed(() => {
  return employees.value.filter(employee => {
    const matchesSearch = !searchText.value || 
      employee.name.toLowerCase().includes(searchText.value.toLowerCase()) ||
      employee.employeeId.toLowerCase().includes(searchText.value.toLowerCase())
    const matchesDepartment = !filters.value.department || employee.departmentId === filters.value.department
    const matchesPosition = !filters.value.position || employee.positionId === filters.value.position
    const matchesStatus = !filters.value.status || employee.status === filters.value.status
    return matchesSearch && matchesDepartment && matchesPosition && matchesStatus
  })
})

// 方法
const getDepartmentName = (id) => {
  const dept = departments.value.find(d => d.id === id)
  return dept ? dept.name : '未知部门'
}

const getPositionName = (id) => {
  const pos = positions.value.find(p => p.id === id)
  return pos ? pos.name : '未知职位'
}

const getStatusClass = (status) => {
  const classes = {
    active: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200',
    probation: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200',
    inactive: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200'
  }
  return classes[status] || 'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200'
}

const getStatusText = (status) => {
  const texts = {
    active: '在职',
    probation: '试用期',
    inactive: '离职'
  }
  return texts[status] || '未知'
}

const formatDate = (date) => {
  return new Date(date).toLocaleDateString()
}

const handleView = (employee) => {
  // 实现查看员工详情的逻辑
  console.log('查看员工:', employee)
}

const handleEdit = (employee) => {
  selectedEmployee.value = employee
  employeeForm.value = { ...employee }
  showAddEmployee.value = true
}

const handleDelete = (employee) => {
  const index = employees.value.findIndex(e => e.id === employee.id)
  if (index !== -1) {
    employees.value.splice(index, 1)
  }
}

const handleSubmit = () => {
  if (selectedEmployee.value) {
    const index = employees.value.findIndex(e => e.id === selectedEmployee.value.id)
    if (index !== -1) {
      employees.value[index] = { ...employeeForm.value }
    }
  } else {
    const employee = {
      ...employeeForm.value,
      id: `E${new Date().getTime()}`,
      avatar: defaultImages.avatar
    }
    employees.value.push(employee)
  }
  showAddEmployee.value = false
  selectedEmployee.value = null
}
</script> 