<template>
  <div class="page-container staff-manage">
    <PageTitle title="人员管理" />
    
    <div class="main-content">
      <!-- 左侧部门树 -->
      <div class="dept-tree">
        <el-tree
          :data="deptTreeData"
          :props="{ label: 'name', children: 'children' }"
          node-key="id"
          default-expand-all
          highlight-current
          @node-click="handleDeptClick"
        >
          <template #default="{ node, data }">
            <span :class="['tree-node', { active: currentDeptId === data.id }]">{{ node.label }}</span>
          </template>
        </el-tree>
      </div>

      <!-- 右侧人员列表 -->
      <div class="staff-list">
        <!-- 操作栏 -->
        <div class="action-bar">
          <el-button type="danger" @click="handleAdd">+ 新增</el-button>
          <el-button :disabled="selectedRows.length === 0" @click="handleBatchDelete">批量删除</el-button>
        </div>

        <!-- 表格 -->
        <el-table :data="staffList" border @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column prop="name" label="姓名" min-width="100" align="center" />
          <el-table-column prop="phone" label="手机号" min-width="140" align="center" />
          <el-table-column prop="role" label="角色" min-width="120" align="center" />
          <el-table-column prop="deptName" label="部门名称" min-width="120" align="center" />
          <el-table-column prop="status" label="状态" min-width="80" align="center">
            <template #default="{ row }">
              <span :class="['status-text', row.status === '启用' ? 'active' : '']">{{ row.status }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100" align="center">
            <template #default="{ row }">
              <el-button type="primary" link size="small" @click="handleEdit(row)">编辑</el-button>
              <el-button type="danger" link size="small" @click="handleDelete(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <TablePagination v-model:page="queryParams.pageNum" v-model:page-size="queryParams.pageSize" :total="total" @change="handleQuery" />
      </div>
    </div>

    <!-- 新增/编辑弹窗 -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="500px" destroy-on-close>
      <el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="formData.name" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="formData.phone" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item label="所属部门" prop="deptId">
          <el-tree-select v-model="formData.deptId" :data="deptTreeData" :props="{ label: 'name', children: 'children' }" node-key="id" placeholder="请选择部门" style="width: 100%" />
        </el-form-item>
        <el-form-item label="角色" prop="role">
          <el-select v-model="formData.role" placeholder="请选择角色" style="width: 100%">
            <el-option label="采购负责人" value="采购负责人" />
            <el-option label="普通员工" value="普通员工" />
            <el-option label="部门主管" value="部门主管" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="formData.status">
            <el-radio label="启用">启用</el-radio>
            <el-radio label="停用">停用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="danger" @click="handleSubmit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { PageTitle, TablePagination } from '@/components'

const currentDeptId = ref<number | null>(null)
const dialogVisible = ref(false)
const formRef = ref()
const editingRow = ref<any>(null)
const selectedRows = ref<any[]>([])

const queryParams = reactive({ pageNum: 1, pageSize: 10 })
const total = ref(50)

const formData = reactive({
  name: '',
  phone: '',
  deptId: null as number | null,
  role: '',
  status: '启用'
})

const formRules = {
  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
  deptId: [{ required: true, message: '请选择部门', trigger: 'change' }]
}

const dialogTitle = computed(() => editingRow.value ? '编辑人员' : '新增人员')

// 部门树数据
const deptTreeData = ref([
  {
    id: 1, name: '人事部',
    children: [
      { id: 11, name: '人事部01' },
      { id: 12, name: '人事部02' }
    ]
  },
  {
    id: 2, name: '技术部',
    children: [
      { id: 21, name: '技术部01' },
      { id: 22, name: '技术部02' }
    ]
  },
  { id: 3, name: '财务部' }
])

// 人员列表数据
const staffList = ref([
  { id: 1, name: '郑婷婷', phone: '137 8651 5262', role: '采购负责人', deptName: '技术部', status: '启用' },
  { id: 2, name: '冯艺莲', phone: '156 6084 7617', role: '采购负责人', deptName: '技术部', status: '启用' },
  { id: 3, name: '吴彦琛', phone: '158 0598 5923', role: '采购负责人', deptName: '财务部', status: '启用' },
  { id: 4, name: '吴彦漆', phone: '137 8231 8088', role: '采购负责人', deptName: '设计部', status: '启用' },
  { id: 5, name: '周雄', phone: '180 6243 3980', role: '采购负责人', deptName: '财务部', status: '启用' },
  { id: 6, name: '吴誉誉', phone: '131 1251 9348', role: '采购负责人', deptName: '人事部', status: '启用' },
  { id: 7, name: '王凡玄', phone: '185 3264 9149', role: '采购负责人', deptName: '财务部', status: '启用' },
  { id: 8, name: '冯启彬', phone: '184 5857 8572', role: '采购负责人', deptName: '设计部', status: '启用' },
  { id: 9, name: '郑文锦', phone: '189 2860 9388', role: '采购负责人', deptName: '财务部', status: '启用' },
  { id: 10, name: '赵吾光', phone: '181 0834 1643', role: '采购负责人', deptName: '人事部', status: '启用' }
])

const handleDeptClick = (data: any) => {
  currentDeptId.value = data.id
  handleQuery()
}

const handleQuery = () => {
  // 根据选中的部门筛选人员
}

const handleSelectionChange = (rows: any[]) => {
  selectedRows.value = rows
}

const handleAdd = () => {
  editingRow.value = null
  formData.name = ''
  formData.phone = ''
  formData.deptId = currentDeptId.value
  formData.role = ''
  formData.status = '启用'
  dialogVisible.value = true
}

const handleEdit = (row: any) => {
  editingRow.value = row
  formData.name = row.name
  formData.phone = row.phone
  formData.deptId = null
  formData.role = row.role
  formData.status = row.status
  dialogVisible.value = true
}

const handleBatchDelete = () => {
  ElMessageBox.confirm(`确定要删除选中的 ${selectedRows.value.length} 名人员吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    ElMessage.success('删除成功')
  })
}

const handleDelete = (row: any) => {
  ElMessageBox.confirm(`确定要删除"${row.name}"吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    const index = staffList.value.findIndex(item => item.id === row.id)
    if (index > -1) {
      staffList.value.splice(index, 1)
    }
    ElMessage.success('删除成功')
  })
}

const handleSubmit = async () => {
  const valid = await formRef.value?.validate()
  if (!valid) return
  if (editingRow.value) {
    ElMessage.success('编辑成功')
  } else {
    ElMessage.success('新增成功')
  }
  dialogVisible.value = false
}
</script>

<style scoped lang="scss">
.staff-manage {
  .main-content {
    display: flex;
    gap: 20px;
    min-height: 500px;
  }

  .dept-tree {
    width: 200px;
    flex-shrink: 0;
    border-right: 1px solid #eee;
    padding-right: 15px;

    .tree-node {
      font-size: 14px;
      color: #333;
      &.active { color: #e60012; }
    }

    :deep(.el-tree-node__content) {
      height: 36px;
    }

    :deep(.el-tree-node.is-current > .el-tree-node__content) {
      background-color: #fff5f5;
      .tree-node { color: #e60012; }
    }
  }

  .staff-list {
    flex: 1;
    min-width: 0;

    .action-bar {
      margin-bottom: 15px;
      display: flex;
      justify-content: flex-end;
      gap: 10px;
    }

    .status-text {
      color: #999;
      &.active { color: #67c23a; }
    }
  }
}

:deep(.el-table) {
  th.el-table__cell {
    background: #fafafa;
    font-weight: 500;
    color: #333;
  }
}
</style>
