<template>
  <el-container>
    <el-header>
      <backIndex />
    </el-header>

    <el-container>
      <el-main class="emain">
        <div class="management-container">
          <!-- 用户管理 -->
          <div class="section">
            <h3>用户管理</h3>
          </div>

          <div>
            <!-- 搜索框和添加用户按钮的容器 -->
            <div class="toolbar">
              <!-- 用户搜索框 -->
              <el-input v-model="userSearch" placeholder="输入员工id或用户id" class="user-search" prefix-icon="el-icon-search">
              </el-input>

              <!-- 添加用户按钮 -->
              <el-button @click="handleAddUser" type="primary" class="add-user-button">
                添加用户
              </el-button>
            </div>

            <!-- 用户表格 -->
            <el-table :data="paginatedUsers" stripe style="width: 90%; margin: 20px auto;" border>
              <el-table-column prop="id" label="用户ID" align="center"></el-table-column>
              <el-table-column prop="email" label="邮箱" align="center"></el-table-column>
              <el-table-column prop="password" label="密码" align="center"></el-table-column>
              <el-table-column prop="phone" label="电话号" align="center"></el-table-column>
              <el-table-column prop="lastLogin" label="最后登录时间" align="center"></el-table-column>
              <el-table-column prop="registerTime" label="注册时间" align="center"></el-table-column>
              <el-table-column label="操作" width="220" align="center">
                <template v-slot="scope">
                  <div class="button-group">
                    <el-button @click="handleEditUser(scope.row)" size="mini" type="primary" plain>编辑</el-button>
                    <el-button @click="handleDeleteUser(scope.row)" size="mini" type="danger" plain>删除</el-button>
                    <el-button @click="handleViewUser(scope.row)" size="mini" type="info" plain>查看详情</el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>

            <!-- 分页控件 -->
            <el-pagination :current-page="userCurrentPage" :page-size="userPageSize" :total="userData.length"
              @current-change="handleUserPageChange" layout="prev, pager, next, jumper" class="pagination" />
          </div>

          <!-- 快递员管理 -->
          <div class="section">
            <h3>快递员管理</h3>

            <!-- 添加快递员按钮 -->
            <div class="action-buttons">
              <el-button @click="handleAddCourier" type="primary">添加快递员</el-button>
            </div>

            <el-table :data="paginatedCouriers" stripe style="width: 90%; margin: 0 auto;" border>
              <el-table-column prop="id" label="员工号" align="center"></el-table-column>
              <el-table-column prop="name" label="姓名" align="center"></el-table-column>
              <el-table-column prop="status" label="在职状态" align="center"></el-table-column>
              <el-table-column prop="phone" label="电话" align="center"></el-table-column>
              <el-table-column prop="entryTime" label="入职时间" align="center"></el-table-column>
              <el-table-column label="操作" width="220" align="center">
                <template v-slot="scope">
                  <div class="button-group">
                    <el-button @click="handleEditCourier(scope.row)" size="mini" type="primary" plain>编辑</el-button>
                    <el-button @click="handleDeleteCourier(scope.row)" size="mini" type="danger" plain>删除</el-button>
                    <el-button @click="handleViewCourier(scope.row)" size="mini" type="info" plain>查看详情</el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>

            <!-- 分页控件 -->
            <el-pagination :current-page="courierCurrentPage" :page-size="courierPageSize" :total="courierData.length"
              @current-change="handleCourierPageChange" layout="prev, pager, next, jumper" class="pagination" />
          </div>
        </div>
      </el-main>
    </el-container>
    <el-footer>
      <Footer />
    </el-footer>

    <!-- 编辑用户对话框 -->
    <el-dialog title="编辑用户" v-model="editUserDialogVisible">
      <el-form :model="currentUser">
        <el-form-item label="用户ID">
          <el-input v-model="currentUser.id" readonly />
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="currentUser.email" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="currentUser.password" />
        </el-form-item>
        <el-form-item label="电话号">
          <el-input v-model="currentUser.phone" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editUserDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSaveUserEdit">保存</el-button>
      </div>
    </el-dialog>
    <!-- 添加用户对话框 -->
    <el-dialog title="添加用户" v-model="addUserDialogVisible">
      <el-form :model="newUser" label-width="100px">
        <el-form-item label="用户ID">
          <el-input v-model="newUser.id" placeholder="请输入用户ID" />
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="newUser.email" placeholder="请输入邮箱" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="newUser.password" placeholder="请输入密码" />
        </el-form-item>
        <el-form-item label="电话号">
          <el-input v-model="newUser.phone" placeholder="请输入电话号码" />
        </el-form-item>
        <el-form-item label="注册时间">
          <el-date-picker v-model="newUser.registerTime" type="date" placeholder="选择注册时间" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addUserDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSaveNewUser">保存</el-button>
      </div>
    </el-dialog>

    <!-- 编辑快递员对话框 -->
    <el-dialog title="编辑快递员" v-model="editCourierDialogVisible">
      <el-form :model="currentCourier">
        <el-form-item label="员工号">
          <el-input v-model="currentCourier.id" readonly />
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="currentCourier.name" />
        </el-form-item>
        <el-form-item label="在职状态">
          <el-input v-model="currentCourier.status" />
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="currentCourier.phone" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editCourierDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSaveCourierEdit">保存</el-button>
      </div>
    </el-dialog>
    <!-- 添加快递员对话框 -->
    <el-dialog title="添加快递员" v-model="addCourierDialogVisible">
      <el-form :model="newCourier" label-width="100px">
        <el-form-item label="员工号">
          <el-input v-model="newCourier.id" placeholder="请输入员工号" />
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="newCourier.name" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="在职状态">
          <el-input v-model="newCourier.status" placeholder="请输入在职状态（如：在职、离职）" />
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="newCourier.phone" placeholder="请输入电话号码" />
        </el-form-item>
        <el-form-item label="入职时间">
          <el-date-picker v-model="newCourier.entryTime" type="date" placeholder="选择入职时间" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addCourierDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSaveNewCourier">保存</el-button>
      </div>
    </el-dialog>
    <!-- 查看快递员详情对话框 -->
    <el-dialog title="快递员详情" v-model="viewCourierDialogVisible">
      <el-form :model="currentCourier" label-width="100px">
        <el-form-item label="员工号">
          <el-input v-model="currentCourier.id" readonly />
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="currentCourier.name" readonly />
        </el-form-item>
        <el-form-item label="在职状态">
          <el-input v-model="currentCourier.status" readonly />
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="currentCourier.phone" readonly />
        </el-form-item>
        <el-form-item label="入职时间">
          <el-input v-model="currentCourier.entryTime" readonly />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="viewCourierDialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>

    <!-- 查看详情对话框 -->
    <!-- 查看用户详情对话框 -->
    <el-dialog title="查看用户详情" v-model="viewUserDialogVisible">
      <el-form :model="currentUser" label-width="100px" readonly>
        <el-form-item label="用户ID">
          <el-input v-model="currentUser.id" readonly />
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="currentUser.email" readonly />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="currentUser.password" readonly />
        </el-form-item>
        <el-form-item label="电话号">
          <el-input v-model="currentUser.phone" readonly />
        </el-form-item>
        <el-form-item label="最后登录时间">
          <el-input v-model="currentUser.lastLogin" readonly />
        </el-form-item>
        <el-form-item label="注册时间">
          <el-input v-model="currentUser.registerTime" readonly />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="viewUserDialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>

  </el-container>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
// 查看用户详情
const viewUserDialogVisible = ref(false)


const handleViewUser = (user) => {
  currentUser.value = { ...user } // 将选中的用户数据赋值给当前用户对象
  viewUserDialogVisible.value = true // 显示查看详情对话框
}
// 查看快递员
const viewCourierDialogVisible = ref(false) // 控制查看对话框的显示
const handleViewCourier = (courier: any) => {
  currentCourier.value = { ...courier } // 将当前选择的快递员数据赋值
  viewCourierDialogVisible.value = true // 打开查看对话框
}

// 添加用户
const addUserDialogVisible = ref(false) // 控制添加用户对话框的显示
const newUser = ref({
  id: '',           // 用户ID
  email: '',        // 用户邮箱
  password: '',     // 用户密码
  phone: '',        // 用户电话
  registerTime: ''  // 注册时间
})

const handleAddUser = () => {
  newUser.value = { id: '', email: '', password: '', phone: '', registerTime: '' } // 初始化表单
  addUserDialogVisible.value = true // 打开添加对话框
}

const handleSaveNewUser = () => {
  if (!newUser.value.id || !newUser.value.email || !newUser.value.phone) {
    ElMessage.warning('请完整填写信息')
    return
  }
  // 添加到用户数据

  ElMessage.success('用户添加成功')
  addUserDialogVisible.value = false // 关闭对话框
}

// 用户和快递员数据
const userData = ref([
  { id: '001', email: 'user1@example.com', password: 'password123', phone: '13800000001', lastLogin: '2024-11-01 10:30:00', registerTime: '2023-01-15 14:20:00' },
  { id: '002', email: 'user2@example.com', password: 'password123', phone: '13800000002', lastLogin: '2024-11-02 12:00:00', registerTime: '2023-02-10 09:15:00' },
  

  // ... 其他用户数据
]);
const courierData = ref([
  { id: '001', name: '小刘', status: '在职', phone: '13800000001', entryTime: '2022-03-01' },
  { id: '002', name: '小王', status: '离职', phone: '13800000002', entryTime: '2021-06-15' },
  // ... 其他快递员数据
  { id: '001', name: '小刘', status: '在职', phone: '13800000001', entryTime: '2022-03-01' },
  { id: '002', name: '小王', status: '离职', phone: '13800000002', entryTime: '2021-06-15' },
  { id: '001', name: '小刘', status: '在职', phone: '13800000001', entryTime: '2022-03-01' },
  { id: '002', name: '小王', status: '离职', phone: '13800000002', entryTime: '2021-06-15' },
  { id: '001', name: '小刘', status: '在职', phone: '13800000001', entryTime: '2022-03-01' },
  { id: '002', name: '小王', status: '离职', phone: '13800000002', entryTime: '2021-06-15' },
  { id: '001', name: '小刘', status: '在职', phone: '13800000001', entryTime: '2022-03-01' },
  { id: '002', name: '小王', status: '离职', phone: '13800000002', entryTime: '2021-06-15' },
  { id: '001', name: '小刘', status: '在职', phone: '13800000001', entryTime: '2022-03-01' },

  { id: '002', name: '小王', status: '离职', phone: '13800000002', entryTime: '2021-06-15' },
  { id: '001', name: '小刘', status: '在职', phone: '13800000001', entryTime: '2022-03-01' },
  { id: '002', name: '小王', status: '离职', phone: '13800000002', entryTime: '2021-06-15' },
  { id: '001', name: '小刘', status: '在职', phone: '13800000001', entryTime: '2022-03-01' },
  { id: '002', name: '小王', status: '离职', phone: '13800000002', entryTime: '2021-06-15' },
  { id: '001', name: '小刘', status: '在职', phone: '13800000001', entryTime: '2022-03-01' },
  { id: '002', name: '小王', status: '离职', phone: '13800000002', entryTime: '2021-06-15' },
  { id: '001', name: '小刘', status: '在职', phone: '13800000001', entryTime: '2022-03-01' },
  { id: '002', name: '小王', status: '离职', phone: '13800000002', entryTime: '2021-06-15' },

]);

// 当前用户/快递员
const currentUser = ref<any>({})
const currentCourier = ref<any>({})

// 对话框可见性
const editUserDialogVisible = ref(false)
const editCourierDialogVisible = ref(false)

// 当前页和分页大小
const userPageSize = 5
const courierPageSize = 5
const userCurrentPage = ref(1)
const courierCurrentPage = ref(1)
const userSearch = ref('')
// 添加快递员
const addCourierDialogVisible = ref(false) // 控制添加快递员对话框的显示
const newCourier = ref({
  id: '',         // 员工号
  name: '',       // 姓名
  status: '',     // 在职状态
  phone: '',      // 电话
  entryTime: ''   // 入职时间
})

const handleAddCourier = () => {
  newCourier.value = { id: '', name: '', status: '', phone: '', entryTime: '' } // 初始化表单
  addCourierDialogVisible.value = true // 打开添加对话框
}

const handleSaveNewCourier = () => {
  if (!newCourier.value.id || !newCourier.value.name || !newCourier.value.phone) {
    ElMessage.warning('请完整填写信息')
    return
  }
  // 添加到快递员数据
  courierData.value.push({ ...newCourier.value })
  ElMessage.success('快递员添加成功')
  addCourierDialogVisible.value = false // 关闭对话框
}

// 分页后的用户和快递员数据
const paginatedUsers = computed(() => {
  const start = (userCurrentPage.value - 1) * userPageSize
  return userData.value.slice(start, start + userPageSize)
})
const paginatedCouriers = computed(() => {
  const start = (courierCurrentPage.value - 1) * courierPageSize
  return courierData.value.slice(start, start + courierPageSize)
})

// 编辑用户
const handleEditUser = (user: any) => {
  currentUser.value = { ...user }
  editUserDialogVisible.value = true
}

// 编辑快递员
const handleEditCourier = (courier: any) => {
  currentCourier.value = { ...courier }
  editCourierDialogVisible.value = true
}

// 删除用户
const handleDeleteUser = (user: any) => {
  ElMessageBox.confirm(
    '确定删除该用户吗？',
    '删除确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    // 删除操作
    const index = userData.value.findIndex(u => u.id === user.id)
    if (index !== -1) userData.value.splice(index, 1)
    ElMessage.success('删除成功')
  }).catch(() => {
    ElMessage.info('删除已取消')
  })
}

// 删除快递员
const handleDeleteCourier = (courier: any) => {
  ElMessageBox.confirm(
    '确定删除该快递员吗？',
    '删除确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    // 删除操作
    const index = courierData.value.findIndex(c => c.id === courier.id)
    if (index !== -1) courierData.value.splice(index, 1)
    ElMessage.success('删除成功')
  }).catch(() => {
    ElMessage.info('删除已取消')
  })
}

// 保存用户编辑
const handleSaveUserEdit = () => {
  const index = userData.value.findIndex(u => u.id === currentUser.value.id)
  if (index !== -1) {
    userData.value[index] = { ...currentUser.value }
    ElMessage.success('用户信息已更新')
  }
  editUserDialogVisible.value = false
}

// 保存快递员编辑
const handleSaveCourierEdit = () => {
  const index = courierData.value.findIndex(c => c.id === currentCourier.value.id)
  if (index !== -1) {
    courierData.value[index] = { ...currentCourier.value }
    ElMessage.success('快递员信息已更新')
  }
  editCourierDialogVisible.value = false
}

// 分页变化
const handleUserPageChange = (page: number) => userCurrentPage.value = page
const handleCourierPageChange = (page: number) => courierCurrentPage.value = page
</script>

<style scoped>
.toolbar {
  display: flex;
  justify-content: flex-end;
  /* 将内容对齐到右边 */
  align-items: center;
  width: 90%;
  margin: 20px auto;
}

.user-search {
  flex: 0 0 200px;
  /* 搜索框的固定宽度 */
  margin-right: 10px;
  /* 可以根据需要调整这个值 */
}

/* 添加用户按钮 */
.add-user-button {
  flex-shrink: 0;
}

.emain {
  margin-top: 50px;
}

.management-container {
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.management-container h2 {
  font-size: 24px;
  color: #333;
  margin-bottom: 20px;
}

.section {
  margin-top: 30px;
}

.section h3 {
  font-size: 20px;
  color: #666;
  margin-bottom: 15px;
  text-align: center;
}

.el-table {
  margin-top: 20px;
}

.button-group {
  display: flex;
  justify-content: space-evenly;
}

.el-button {
  min-width: 60px;
  font-size: 12px;
  padding: 4px 8px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.el-table-column {
  text-align: center;
}

.el-table__header-wrapper th {
  text-align: center;
}


.action-buttons {
  text-align: right;
  margin-top: 20px;
  margin-right: 100px;
  margin-bottom: 20px;
}
</style>
