<template>
  <div class="min-h-screen bg-gray-100 dark:bg-gray-900">
    <!-- 顶部导航 -->
    <div class="bg-white dark:bg-gray-800 shadow">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
        <div class="flex justify-between items-center">
          <h1 class="text-2xl font-bold text-gray-900 dark:text-white">绩效管理</h1>
          <div class="flex space-x-4">
            <button @click="showAddAssessmentModal = true" class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700">
              创建评估
            </button>
            <button @click="showAddGoalModal = true" class="bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700">
              添加目标
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
      <!-- 绩效统计卡片 -->
      <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">
          <div class="text-sm font-medium text-gray-500 dark:text-gray-400">待评估</div>
          <div class="mt-2 text-3xl font-bold text-blue-600 dark:text-blue-400">{{ pendingAssessments }}</div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
          <div class="text-sm font-medium text-gray-500 dark:text-gray-400">已完成</div>
          <div class="mt-2 text-3xl font-bold text-green-600 dark:text-green-400">{{ completedAssessments }}</div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
          <div class="text-sm font-medium text-gray-500 dark:text-gray-400">平均得分</div>
          <div class="mt-2 text-3xl font-bold text-yellow-600 dark:text-yellow-400">{{ averageScore }}</div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
          <div class="text-sm font-medium text-gray-500 dark:text-gray-400">目标达成率</div>
          <div class="mt-2 text-3xl font-bold text-purple-600 dark:text-purple-400">{{ goalCompletionRate }}%</div>
        </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 mb-1">搜索</label>
            <input type="text" v-model="searchText" placeholder="员工姓名/评估周期" class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">评估类型</label>
            <select v-model="filters.type" class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
              <option value="">所有类型</option>
              <option v-for="type in assessmentTypes" :key="type.id" :value="type.id">{{ type.name }}</option>
            </select>
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">状态</label>
            <select v-model="filters.status" class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
              <option value="">所有状态</option>
              <option v-for="status in statusTypes" :key="status.id" :value="status.id">{{ status.name }}</option>
            </select>
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">时间范围</label>
            <select v-model="filters.timeRange" class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
              <option value="">所有时间</option>
              <option value="week">本周</option>
              <option value="month">本月</option>
              <option value="quarter">本季度</option>
              <option value="year">本年</option>
            </select>
          </div>
        </div>
      </div>

      <!-- 绩效评估列表 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden mb-6">
        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
          <h2 class="text-lg font-medium text-gray-900 dark:text-white">绩效评估列表</h2>
        </div>
        <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>
              <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="assessment in filteredAssessments" :key="assessment.id">
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="text-sm font-medium text-gray-900 dark:text-white">{{ assessment.employeeName }}</div>
                <div class="text-sm text-gray-500 dark:text-gray-400">{{ assessment.department }}</div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">
                {{ getAssessmentTypeName(assessment.type) }}
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">
                {{ assessment.period }}
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">
                {{ assessment.score }}
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <span :class="getAssessmentStatusClass(assessment.status)" class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full">
                  {{ getAssessmentStatusName(assessment.status) }}
                </span>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                <button @click="viewAssessment(assessment)" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300 mr-3">查看</button>
                <button @click="editAssessment(assessment)" class="text-yellow-600 hover:text-yellow-900 dark:text-yellow-400 dark:hover:text-yellow-300 mr-3">编辑</button>
                <button @click="deleteAssessment(assessment)" class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300">删除</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- 目标列表 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
          <h2 class="text-lg font-medium text-gray-900 dark:text-white">目标列表</h2>
        </div>
        <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>
              <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="goal in filteredGoals" :key="goal.id">
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="text-sm font-medium text-gray-900 dark:text-white">{{ goal.employeeName }}</div>
                <div class="text-sm text-gray-500 dark:text-gray-400">{{ goal.department }}</div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="text-sm font-medium text-gray-900 dark:text-white">{{ goal.name }}</div>
                <div class="text-sm text-gray-500 dark:text-gray-400">{{ goal.description }}</div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">
                {{ formatDate(goal.startDate) }}
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">
                {{ formatDate(goal.endDate) }}
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
                  <div class="bg-blue-600 h-2.5 rounded-full" :style="{ width: goal.progress + '%' }"></div>
                </div>
                <div class="text-sm text-gray-500 dark:text-gray-400 mt-1">{{ goal.progress }}%</div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                <button @click="viewGoal(goal)" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300 mr-3">查看</button>
                <button @click="editGoal(goal)" class="text-yellow-600 hover:text-yellow-900 dark:text-yellow-400 dark:hover:text-yellow-300 mr-3">编辑</button>
                <button @click="deleteGoal(goal)" class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300">删除</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- 创建评估模态框 -->
    <div v-if="showAddAssessmentModal" class="fixed inset-0 bg-gray-500 bg-opacity-75 flex items-center justify-center">
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-md w-full p-6">
        <h2 class="text-xl font-bold mb-4 text-gray-900 dark:text-white">创建绩效评估</h2>
        <form @submit.prevent="addAssessment">
          <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">员工</label>
            <select v-model="newAssessment.employeeId" required class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
              <option v-for="employee in employees" :key="employee.id" :value="employee.id">{{ employee.name }}</option>
            </select>
          </div>
          <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">评估类型</label>
            <select v-model="newAssessment.type" required class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
              <option v-for="type in assessmentTypes" :key="type.id" :value="type.id">{{ type.name }}</option>
            </select>
          </div>
          <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">评估周期</label>
            <input type="text" v-model="newAssessment.period" required class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
          </div>
          <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">评估内容</label>
            <textarea v-model="newAssessment.content" required class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"></textarea>
          </div>
          <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">评分标准</label>
            <textarea v-model="newAssessment.criteria" required class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"></textarea>
          </div>
          <div class="flex justify-end space-x-3">
            <button type="button" @click="showAddAssessmentModal = false" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
              取消
            </button>
            <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">
              创建
            </button>
          </div>
        </form>
      </div>
    </div>

    <!-- 添加目标模态框 -->
    <div v-if="showAddGoalModal" class="fixed inset-0 bg-gray-500 bg-opacity-75 flex items-center justify-center">
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-md w-full p-6">
        <h2 class="text-xl font-bold mb-4 text-gray-900 dark:text-white">添加目标</h2>
        <form @submit.prevent="addGoal">
          <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">员工</label>
            <select v-model="newGoal.employeeId" required class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
              <option v-for="employee in employees" :key="employee.id" :value="employee.id">{{ employee.name }}</option>
            </select>
          </div>
          <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">目标名称</label>
            <input type="text" v-model="newGoal.name" required class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
          </div>
          <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">目标描述</label>
            <textarea v-model="newGoal.description" required class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"></textarea>
          </div>
          <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">开始日期</label>
            <input type="date" v-model="newGoal.startDate" required class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
          </div>
          <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">结束日期</label>
            <input type="date" v-model="newGoal.endDate" required class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
          </div>
          <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">目标权重</label>
            <input type="number" v-model="newGoal.weight" required min="1" max="100" class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
          </div>
          <div class="flex justify-end space-x-3">
            <button type="button" @click="showAddGoalModal = false" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
              取消
            </button>
            <button type="submit" class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700">
              添加
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

// 员工数据
const employees = ref([
  { id: 1, name: '张三', department: '技术部' },
  { id: 2, name: '李四', department: '市场部' },
  { id: 3, name: '王五', department: '销售部' },
  { id: 4, name: '赵六', department: '人力资源部' }
])

// 评估数据
const assessments = ref([
  {
    id: 1,
    employeeId: 1,
    employeeName: '张三',
    department: '技术部',
    type: 1,
    period: '2024年第一季度',
    score: 85,
    content: '工作表现评估',
    criteria: '技术能力、团队协作、工作态度',
    status: 1
  },
  {
    id: 2,
    employeeId: 2,
    employeeName: '李四',
    department: '市场部',
    type: 2,
    period: '2024年第一季度',
    score: 92,
    content: '项目完成情况评估',
    criteria: '项目质量、进度控制、客户反馈',
    status: 2
  }
])

// 目标数据
const goals = ref([
  {
    id: 1,
    employeeId: 1,
    employeeName: '张三',
    department: '技术部',
    name: '提升前端开发能力',
    description: '完成Vue.js高级课程学习并应用到项目中',
    startDate: '2024-01-01',
    endDate: '2024-03-31',
    progress: 75,
    weight: 30
  },
  {
    id: 2,
    employeeId: 2,
    employeeName: '李四',
    department: '市场部',
    name: '增加市场份额',
    description: '通过营销活动提升品牌知名度',
    startDate: '2024-01-01',
    endDate: '2024-06-30',
    progress: 40,
    weight: 40
  }
])

// 评估类型
const assessmentTypes = ref([
  { id: 1, name: '季度评估' },
  { id: 2, name: '项目评估' },
  { id: 3, name: '年度评估' },
  { id: 4, name: '晋升评估' }
])

// 状态类型
const statusTypes = ref([
  { id: 1, name: '待评估' },
  { id: 2, name: '已完成' },
  { id: 3, name: '已取消' }
])

// 筛选条件
const searchText = ref('')
const filters = ref({
  type: '',
  status: '',
  timeRange: ''
})

// 模态框状态
const showAddAssessmentModal = ref(false)
const showAddGoalModal = ref(false)

// 新评估表单
const newAssessment = ref({
  employeeId: '',
  type: '',
  period: '',
  content: '',
  criteria: ''
})

// 新目标表单
const newGoal = ref({
  employeeId: '',
  name: '',
  description: '',
  startDate: '',
  endDate: '',
  weight: 50
})

// 计算属性
const filteredAssessments = computed(() => {
  return assessments.value.filter(item => {
    const matchesSearch = !searchText.value || 
      item.employeeName.toLowerCase().includes(searchText.value.toLowerCase()) ||
      item.period.toLowerCase().includes(searchText.value.toLowerCase())
    const matchesType = !filters.value.type || item.type === filters.value.type
    const matchesStatus = !filters.value.status || item.status === filters.value.status
    return matchesSearch && matchesType && matchesStatus
  })
})

const filteredGoals = computed(() => {
  return goals.value.filter(item => {
    const matchesSearch = !searchText.value || 
      item.employeeName.toLowerCase().includes(searchText.value.toLowerCase()) ||
      item.name.toLowerCase().includes(searchText.value.toLowerCase())
    return matchesSearch
  })
})

const pendingAssessments = computed(() => {
  return assessments.value.filter(item => item.status === 1).length
})

const completedAssessments = computed(() => {
  return assessments.value.filter(item => item.status === 2).length
})

const averageScore = computed(() => {
  const scores = assessments.value.map(assessment => assessment.score)
  const sum = scores.reduce((total, score) => total + score, 0)
  return scores.length > 0 ? (sum / scores.length).toFixed(1) : '0.0'
})

const goalCompletionRate = computed(() => {
  const totalProgress = goals.value.reduce((total, goal) => total + goal.progress, 0)
  return goals.value.length > 0 ? Math.round(totalProgress / goals.value.length) : 0
})

// 格式化日期
const formatDate = (date) => {
  return new Date(date).toLocaleDateString('zh-CN')
}

// 获取评估类型名称
const getAssessmentTypeName = (typeId) => {
  const type = assessmentTypes.value.find(t => t.id === typeId)
  return type ? type.name : '未知类型'
}

// 获取评估状态名称
const getAssessmentStatusName = (statusId) => {
  const status = statusTypes.value.find(s => s.id === statusId)
  return status ? status.name : '未知状态'
}

// 获取评估状态样式
const getAssessmentStatusClass = (statusId) => {
  const classes = {
    1: 'bg-blue-100 text-blue-800 dark:bg-blue-700 dark:text-blue-300',
    2: 'bg-green-100 text-green-800 dark:bg-green-700 dark:text-green-300',
    3: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300'
  }
  return classes[statusId] || 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300'
}

// 添加评估
const addAssessment = () => {
  const employee = employees.value.find(e => e.id === newAssessment.value.employeeId)
  const item = {
    id: assessments.value.length + 1,
    ...newAssessment.value,
    employeeName: employee.name,
    department: employee.department,
    score: 0,
    status: 1
  }
  assessments.value.push(item)
  showAddAssessmentModal.value = false
  resetNewAssessment()
}

// 重置新评估表单
const resetNewAssessment = () => {
  newAssessment.value = {
    employeeId: '',
    type: '',
    period: '',
    content: '',
    criteria: ''
  }
}

// 添加目标
const addGoal = () => {
  const employee = employees.value.find(e => e.id === newGoal.value.employeeId)
  const item = {
    id: goals.value.length + 1,
    ...newGoal.value,
    employeeName: employee.name,
    department: employee.department,
    progress: 0
  }
  goals.value.push(item)
  showAddGoalModal.value = false
  resetNewGoal()
}

// 重置新目标表单
const resetNewGoal = () => {
  newGoal.value = {
    employeeId: '',
    name: '',
    description: '',
    startDate: '',
    endDate: '',
    weight: 50
  }
}

// 查看评估
const viewAssessment = (item) => {
  // 实现查看评估逻辑
  console.log('查看评估:', item)
}

// 编辑评估
const editAssessment = (item) => {
  // 实现编辑评估逻辑
  console.log('编辑评估:', item)
}

// 删除评估
const deleteAssessment = (item) => {
  if (confirm(`确定要删除"${item.employeeName}"的评估记录吗？`)) {
    const index = assessments.value.findIndex(a => a.id === item.id)
    if (index !== -1) {
      assessments.value.splice(index, 1)
    }
  }
}

// 查看目标
const viewGoal = (item) => {
  // 实现查看目标逻辑
  console.log('查看目标:', item)
}

// 编辑目标
const editGoal = (item) => {
  // 实现编辑目标逻辑
  console.log('编辑目标:', item)
}

// 删除目标
const deleteGoal = (item) => {
  if (confirm(`确定要删除"${item.employeeName}"的目标"${item.name}"吗？`)) {
    const index = goals.value.findIndex(g => g.id === item.id)
    if (index !== -1) {
      goals.value.splice(index, 1)
    }
  }
}
</script> 