<template>
  <div>
    <h1>人员管理</h1>
    
    <!-- 添加router-view来渲染子路由内容 -->
    <router-view />
    
    <a-card style="margin-bottom: 16px;" v-if="!$route.path.includes('/personnel/')">
      <a-row gutter={24}>
        <a-col :span="8">
          <a-button type="primary" @click="handleAddUser">添加人员</a-button>
          <a-button style="margin-left: 8px;" @click="handleImportUsers">导入人员</a-button>
          <a-button style="margin-left: 8px;" @click="handleExportUsers">导出人员</a-button>
        </a-col>
        <a-col :span="16" style="text-align: right;">
          <a-input-search
            placeholder="搜索人员姓名或ID"
            allow-clear
            enter-button="搜索"
            size="large"
            style="width: 300px;"
            @search="handleSearch"
          />
        </a-col>
      </a-row>
    </a-card>
    
    <!-- 人员列表 -->
    <a-card title="人员列表" v-if="!$route.path.includes('/personnel/')">
      <a-table :columns="userColumns" :data-source="userList" :pagination="pagination" row-key="id">
        <template #bodyCell:status="{ record }">
          <a-badge :status="record.status === 'active' ? 'success' : 'default'" :text="record.status === 'active' ? '在职' : '离职'" />
        </template>
        <template #bodyCell:role="{ record }">
          <a-tag>{{ record.role }}</a-tag>
        </template>
        <template #bodyCell:action="{ record }">
          <a-space>
            <a-button type="link" @click="handleViewUser(record)">查看</a-button>
            <a-button type="link" @click="handleEditUser(record)">编辑</a-button>
            <a-button type="link" danger @click="handleDeleteUser(record.id)">删除</a-button>
            <a-button type="link" @click="handleResetPassword(record.id)">重置密码</a-button>
          </a-space>
        </template>
      </a-table>
    </a-card>
    
    <!-- 添加/编辑人员对话框 -->
    <a-modal
      v-model:open="userModalVisible"
      :title="userModalTitle"
      @ok="handleUserModalOk"
      @cancel="handleUserModalCancel"
    >
      <a-form :model="userForm" layout="vertical">
        <a-form-item label="姓名" name="name" :rules="[{ required: true, message: '请输入姓名' }]">
          <a-input v-model:value="userForm.name" placeholder="请输入姓名" />
        </a-form-item>
        <a-form-item label="工号" name="employeeId" :rules="[{ required: true, message: '请输入工号' }]">
          <a-input v-model:value="userForm.employeeId" placeholder="请输入工号" />
        </a-form-item>
        <a-form-item label="手机号" name="phone" :rules="[{ required: true, message: '请输入手机号' }]">
          <a-input v-model:value="userForm.phone" placeholder="请输入手机号" />
        </a-form-item>
        <a-form-item label="邮箱" name="email" :rules="[{ type: 'email', message: '请输入正确的邮箱地址' }]">
          <a-input v-model:value="userForm.email" placeholder="请输入邮箱" />
        </a-form-item>
        <a-form-item label="角色" name="role" :rules="[{ required: true, message: '请选择角色' }]">
          <a-select v-model:value="userForm.role" placeholder="请选择角色">
            <a-select-option value="admin">管理员</a-select-option>
            <a-select-option value="supervisor">监管人员</a-select-option>
            <a-select-option value="auditor">审核人员</a-select-option>
            <a-select-option value="analyst">分析人员</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="状态" name="status" :rules="[{ required: true, message: '请选择状态' }]">
          <a-select v-model:value="userForm.status" placeholder="请选择状态">
            <a-select-option value="active">在职</a-select-option>
            <a-select-option value="inactive">离职</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="部门" name="department" :rules="[{ required: true, message: '请选择部门' }]">
          <a-select v-model:value="userForm.department" placeholder="请选择部门">
            <a-select-option value="management">管理部门</a-select-option>
            <a-select-option value="supervision">监管部门</a-select-option>
            <a-select-option value="epidemic">疫情防控部门</a-select-option>
            <a-select-option value="analysis">数据分析部门</a-select-option>
            <a-select-option value="other">其他部门</a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import axios from 'axios'
import dayjs from 'dayjs'

// 分页配置
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0
})

// 人员列表数据
const userList = ref([
  {
    id: '1',
    name: '张三',
    employeeId: 'EMP001',
    phone: '13800138001',
    email: 'zhangsan@example.com',
    role: '管理员',
    department: '管理部门',
    status: 'active',
    createTime: '2024-01-15T09:30:00Z',
    lastLogin: '2024-04-10T14:20:00Z'
  },
  {
    id: '2',
    name: '李四',
    employeeId: 'EMP002',
    phone: '13800138002',
    email: 'lisi@example.com',
    role: '监管人员',
    department: '监管部门',
    status: 'active',
    createTime: '2024-01-20T10:15:00Z',
    lastLogin: '2024-04-09T16:45:00Z'
  },
  {
    id: '3',
    name: '王五',
    employeeId: 'EMP003',
    phone: '13800138003',
    email: 'wangwu@example.com',
    role: '审核人员',
    department: '疫情防控部门',
    status: 'active',
    createTime: '2024-02-01T14:30:00Z',
    lastLogin: '2024-04-08T10:15:00Z'
  },
  {
    id: '4',
    name: '赵六',
    employeeId: 'EMP004',
    phone: '13800138004',
    email: 'zhaoliu@example.com',
    role: '分析人员',
    department: '数据分析部门',
    status: 'active',
    createTime: '2024-02-15T11:45:00Z',
    lastLogin: '2024-04-07T13:30:00Z'
  },
  {
    id: '5',
    name: '钱七',
    employeeId: 'EMP005',
    phone: '13800138005',
    email: 'qianqi@example.com',
    role: '管理员',
    department: '管理部门',
    status: 'inactive',
    createTime: '2024-01-10T09:00:00Z',
    lastLogin: '2024-03-01T16:20:00Z'
  }
])

// 人员表格列定义
const userColumns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '工号',
    dataIndex: 'employeeId',
    key: 'employeeId'
  },
  {
    title: '手机号',
    dataIndex: 'phone',
    key: 'phone'
  },
  {
    title: '邮箱',
    dataIndex: 'email',
    key: 'email'
  },
  {
    title: '角色',
    dataIndex: 'role',
    key: 'role'
  },
  {
    title: '部门',
    dataIndex: 'department',
    key: 'department'
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status'
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime',
    customRender: (text) => dayjs(text).format('YYYY-MM-DD HH:mm')
  },
  {
    title: '最后登录',
    dataIndex: 'lastLogin',
    key: 'lastLogin',
    customRender: (text) => dayjs(text).format('YYYY-MM-DD HH:mm')
  },
  {
    title: '操作',
    key: 'action',
    width: 200,
    fixed: 'right'
  }
]

// 模态框配置
const userModalVisible = ref(false)
const userModalTitle = ref('添加人员')
const userForm = reactive({
  id: '',
  name: '',
  employeeId: '',
  phone: '',
  email: '',
  role: '',
  department: '',
  status: 'active'
})

// 搜索人员
const handleSearch = (keyword) => {
  // 这里应该有实际的搜索逻辑
  console.log('搜索人员:', keyword)
}

// 添加人员
const handleAddUser = () => {
  userModalTitle.value = '添加人员'
  Object.keys(userForm).forEach(key => {
    userForm[key] = ''
  })
  userForm.status = 'active'
  userModalVisible.value = true
}

// 编辑人员
const handleEditUser = (user) => {
  userModalTitle.value = '编辑人员'
  Object.keys(userForm).forEach(key => {
    userForm[key] = user[key] || ''
  })
  userModalVisible.value = true
}

// 查看人员
const handleViewUser = (user) => {
  console.log('查看人员:', user)
}

// 删除人员
const handleDeleteUser = (id) => {
  console.log('删除人员:', id)
}

// 重置密码
const handleResetPassword = (id) => {
  console.log('重置密码:', id)
}

// 导入人员
const handleImportUsers = () => {
  console.log('导入人员')
}

// 导出人员
const handleExportUsers = () => {
  console.log('导出人员')
}

// 模态框确认
const handleUserModalOk = () => {
  console.log('提交表单:', userForm)
  userModalVisible.value = false
}

// 模态框取消
const handleUserModalCancel = () => {
  userModalVisible.value = false
}
</script>

<style scoped>
  .stat-card {
    height: 100%;
  }
  
  .stat-content {
    text-align: center;
  }
  
  .stat-number {
    font-size: 24px;
    font-weight: bold;
    color: #1890ff;
  }
  
  .stat-label {
    font-size: 14px;
    color: #666;
    margin-top: 8px;
  }
</style>