<template>
  <ElTablePro
    :data="tableData"
    :total="total"
    v-model:page="query.page"
    v-model:page-size="query.pageSize"
    table-key="employee"
    row-key="id"
    border
    stripe
    v-loading="loading"
    @pagination-change="handlePaginationChange"
  >
    <template #toolbar>
      <el-button type="primary" @click="handleAdd">新增</el-button>
    </template>

    <el-table-column prop="id" label="ID" width="80" disabled />
    <el-table-column prop="name" label="姓名" width="120" />
    <el-table-column prop="department" label="部门" width="120">
      <template #default="{ row }">
        <el-tag :type="deptTagType(row.department)">
          {{ row.department }}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="position" label="职位" />
    <el-table-column prop="salary" label="薪资" width="120">
      <template #default="{ row }">
        ¥{{ row.salary.toLocaleString() }}
      </template>
    </el-table-column>
    <el-table-column prop="status" label="状态" width="100">
      <template #default="{ row }">
        <el-tag :type="row.status ? 'success' : 'danger'">
          {{ row.status ? '在职' : '离职' }}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="180">
      <template #default="{ row }">
        <el-button link type="primary" @click="handleEdit(row)">编辑</el-button>
        <el-button link type="danger" @click="handleDelete(row)">删除</el-button>
      </template>
    </el-table-column>
  </ElTablePro>

  <ElFormDialog
    v-model="dialogVisible"
    :fields="formFields"
    :form-data="currentRow"
    title="员工信息"
    @confirm="handleFormConfirm"
  />
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import ElTablePro from '@/components/ElTablePro.vue'
import ElFormDialog from '@/components/ElFormDialog.vue'
import type { FormRules } from 'element-plus'

type Employee = {
  id: number
  name: string
  department: string
  position: string
  salary: number
  status: boolean
}

const formFields = [
  { prop: 'name', label: '姓名', type: 'input' as const, required: true },
  {
    prop: 'department',
    label: '部门',
    type: 'select' as const,
    required: true,
    options: [
      { label: '技术部', value: '技术部' },
      { label: '产品部', value: '产品部' },
      { label: '设计部', value: '设计部' },
      { label: '市场部', value: '市场部' },
      { label: '人事部', value: '人事部' },
    ],
  },
  { prop: 'position', label: '职位', type: 'input' as const, required: true },
  { prop: 'salary', label: '薪资', type: 'number' as const, required: true, min: 0 },
  { prop: 'status', label: '状态', type: 'switch' as const, activeText: '在职', inactiveText: '离职' },
]

const rules: FormRules = {
  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  department: [{ required: true, message: '请选择部门', trigger: 'change' }],
  position: [{ required: true, message: '请输入职位', trigger: 'blur' }],
  salary: [{ required: true, message: '请输入薪资', trigger: 'blur' }],
}

const loading = ref(false)
const total = ref(0)
const dialogVisible = ref(false)
const currentRow = ref<Record<string, any>>({})

const query = reactive({
  page: 1,
  pageSize: 10,
})

const allData = ref<Employee[]>([
  { id: 1, name: '陈伟', department: '技术部', position: '前端工程师', salary: 18000, status: true },
  { id: 2, name: '刘芳', department: '产品部', position: '产品经理', salary: 22000, status: true },
  { id: 3, name: '张磊', department: '技术部', position: '后端工程师', salary: 20000, status: true },
  { id: 4, name: '王丽', department: '设计部', position: 'UI设计师', salary: 16000, status: true },
  { id: 5, name: '李强', department: '市场部', position: '市场总监', salary: 25000, status: true },
  { id: 6, name: '赵敏', department: '人事部', position: 'HR经理', salary: 17000, status: false },
  { id: 7, name: '孙涛', department: '技术部', position: '架构师', salary: 35000, status: true },
  { id: 8, name: '周婷', department: '产品部', position: '产品助理', salary: 10000, status: true },
  { id: 9, name: '吴凯', department: '技术部', position: '测试工程师', salary: 14000, status: false },
  { id: 10, name: '郑华', department: '设计部', position: '视觉设计师', salary: 15000, status: true },
  { id: 11, name: '冯雪', department: '市场部', position: '运营专员', salary: 12000, status: true },
  { id: 12, name: '杨帆', department: '技术部', position: 'DevOps工程师', salary: 23000, status: true },
])

const tableData = ref<Employee[]>([])

let nextId = 13

const deptTagType = (dept: string) => {
  const map: Record<string, string> = {
    '技术部': 'primary',
    '产品部': 'warning',
    '设计部': 'success',
    '市场部': 'danger',
    '人事部': 'info',
  }
  return map[dept] || 'info'
}

const getList = () => {
  loading.value = true
  setTimeout(() => {
    const start = (query.page - 1) * query.pageSize
    const end = start + query.pageSize
    tableData.value = allData.value.slice(start, end)
    total.value = allData.value.length
    loading.value = false
  }, 300)
}

const handlePaginationChange = () => {
  getList()
}

const handleAdd = () => {
  currentRow.value = {}
  dialogVisible.value = true
}

const handleEdit = (row: Employee) => {
  currentRow.value = { ...row }
  dialogVisible.value = true
}

const handleFormConfirm = (data: Record<string, any>) => {
  if (data.id) {
    const index = allData.value.findIndex(item => item.id === data.id)
    if (index !== -1) {
      allData.value[index] = { ...allData.value[index], ...data }
    }
    ElMessage.success('编辑成功')
  } else {
    allData.value.unshift({
      id: nextId++,
      name: data.name,
      department: data.department,
      position: data.position,
      salary: data.salary,
      status: data.status ?? true,
    })
    ElMessage.success('新增成功')
  }
  getList()
}

const handleDelete = (row: Employee) => {
  ElMessageBox.confirm(`确认删除员工 ${row.name}？`, '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    const index = allData.value.findIndex(item => item.id === row.id)
    if (index !== -1) {
      allData.value.splice(index, 1)
    }
    getList()
    ElMessage.success('删除成功')
  }).catch(() => {})
}

onMounted(() => {
  getList()
})
</script>
