<template>
  <div class="user-management">
    <div class="user-table" :key="refreshKey">
      <el-table 
        :data="tableData" 
        header-cell-class-name="table-header" 
        row-class-name="table-row"
      >
        <el-table-column type="selection" width="80" />
        <el-table-column label="用户" property="account" min-width="200" />
        <el-table-column label="权限" property="usrRole" min-width="200" />
      </el-table>
      
      <div class="table-footer">
        <el-button type="primary" @click="addUser">新增</el-button>
        <el-button type="primary" @click="modifyPin">PIN</el-button>
        <el-button type="danger" @click="deleteSelectedUsers">删除</el-button>
      </div>
    </div>

    <!-- 弹窗组件 -->
    <DelWarn 
      v-if="delShowModal" 
      :visible="delShowModal" 
      icon="/src/assets/Warn.svg" 
      title="删除用户"
      :message="deleteUserMessage" 
      description="您正在删除用户，请谨慎操作" 
      confirm-text="确认删除" 
      cancel-text="取消删除"
      @confirm="handleConfirmDelete" 
      @cancel="handleCancelDelete" 
    />

    <DelMessage 
      v-if="delMessageShowModal" 
      v-model:visible="delMessageShowModal" 
      icon="/src/assets/OK.svg"
      message="已成功删除用户" 
      :username="selectedUsers[0]?.account" 
      @confirm="handleConfirmMsgDelete" 
    />

    <DelWarn 
      v-if="updatePinModal" 
      :visible="updatePinModal" 
      icon="/src/assets/update-pin-icon.svg" 
      title="PIN码更新"
      :message="updatePinMessage" 
      description="您正在更改PIN码,请谨慎操作" 
      confirm-text="确认更新" 
      cancel-text="取消更新"
      @confirm="handleConfirmUpdatePin" 
      @cancel="handleCancelUpdatePin" 
    />

    <EnterPinModal 
      v-if="enterPinModal" 
      :visible="enterPinModal" 
      :loading="updatePinLoading"
      @confirm="updatePinConfirm" 
      @cancel="closeEnterPinModal" 
    />

    <DelMessage 
      v-if="updatePinMsgModal" 
      :visible="updatePinMsgModal" 
      icon="/src/assets/OK.svg" 
      message="PIN码更新成功"
      :username="selectedUsers[0].account" 
      @confirm="handleConfirmMsg" 
    />

    <!-- 添加用户相关弹窗 -->
    <template v-if="currentStep === 'username'">
      <AddUserModal 
        :visible="insertUserShowModal" 
        :already-exist="isExist" 
        placeholder="请输入用户名" 
        :tips="tips"
        @confirm="handleConfirmInsert" 
        @cancel="handleCancelInsert" 
        @resetAlreadyExist="resetAlreadyExist" 
      />
    </template>

    <template v-else-if="currentStep === 'pin'">
      <EnterPinModal 
        :visible="isPinModalVisible" 
        :loading="registerLoading"
        @confirm="handlePinConfirm" 
        @cancel="closeModal" 
      />
    </template>

    <DelMessage 
      v-if="confirmInsert" 
      :visible="confirmInsert" 
      icon="/src/assets/OK.svg" 
      message="已成功添加新用户"
      :username="newUser.account" 
      @confirm="handleConfirmMsg" 
    />
  </div>
</template>

<script setup lang="ts">
import type { User } from '../../../types/Index'
import { DelWarn, DelMessage, AddUserModal, EnterPinModal } from '../components'
import { ref, onMounted, computed } from 'vue'
import {
  getUserList,
  deleteUser,
  userRegister,
  changeUserPassword,
} from '../../../services/Index/index'
const tableData = ref<User[]>([
  {
    id: 1,
    account: '管理员',
    password: '0000',
    usrRole: 'Admin',
    isBuiltInUser: true,
  },
  {
    id: 2,
    account: '操作员01',
    password: '0000',
    usrRole: 'Usr',
    isBuiltInUser: false,
  },
])
// 创建 `newUser` 对象存储用户名和 PIN 码
const newUser = ref({
  account: '',
  password: '',
  usrRole: 'Usr',
})
//创建临时用户对象，用于存储用户名和PIN码
const tempUser = ref({
  id: 0,
  password: '',
})
const registerLoading = ref(false)
const updatePinLoading = ref(false)
const placeholder = ref('请输入用户名')
const currentStep = ref('username') // 当前步骤，初始为用户名输入页面
//控制删除提醒teleport
const delShowModal = ref(false)
const delMessageShowModal = ref(false)
const updatePinModal = ref(false)
const updatePinMsgModal = ref(false)
const insertUserShowModal = ref(false)
const isPinModalVisible = ref(true)
const confirmInsert = ref(false)
const isChecked = ref(false)
const enterPinModal = ref(false)
//用户是否存在
const isExist = ref(false)
//提醒
const tips = ref('')
// 模拟用户数据
const selectedUsers = ref<User[]>([])
const refreshKey = ref(0)
// 获取用户列表
const fetchUserList = async () => {
  const response = await getUserList()
  console.log('获取用户列表', response)
  if (response && response.success) {
    tableData.value = response.data
  } else {
    console.log('获取用户列表失败')
  }
}
// 处理选择变化
const handleSelectionChange = (val: User[]) => {
  selectedUsers.value = val
  console.log('选中的用户', val)
  // 只有当有选中用户时才更新 tempUser
  if (val && val.length > 0) {
    tempUser.value.id = val[0].id
    tempUser.value.password = val[0].password
  } else {
    // 当没有选中用户时，重置 tempUser
    tempUser.value.id = 0
    tempUser.value.password = ''
  }
}
// 新增用户
const addUser = async () => {
  insertUserShowModal.value = true
}
// 修改用户权限 (模拟 PIN 码修改功能)
const modifyPin = async () => {
  if (selectedUsers.value.length === 0) {
    //通知用户没有选择用户，不使用控制台打印
    isChecked.value = true
    return
  }
  updatePinModal.value = true
}
// 删除用户
const deleteSelectedUsers = () => {
  if (selectedUsers.value.length === 0) {
    //通知用户没有选择用户，不使用控制台打印
    isChecked.value = true
    return
  }
  delShowModal.value = true
}
// 在组件挂载时调用获取用户列表
onMounted(() => {
  fetchUserList()
})

const handleConfirmDelete = async () => {
  try {
    const ids = selectedUsers.value.map((user) => user.id)
    for (const id of ids) {
      const response = await deleteUser({ id })
      if (!response || !response.success) {
        console.log('删除用户失败')
        return
      }
    }

    delShowModal.value = false
    // 在显示成功消息之前先保存要显示的用户名
    // const deletedUsername = selectedUsers.value[0]?.account
    // 清空选中的用户
    selectedUsers.value = []
    delMessageShowModal.value = true
  } catch (error) {
    console.error('删除用户时发生错误:', error)
  }
}

const handleCancelDelete = () => {
  delShowModal.value = false
}
const handleConfirmMsg = () => {
  confirmInsert.value = false
  isChecked.value = false
  updatePinMsgModal.value = false
  fetchUserList()
}
const handleConfirmMsgDelete = () => {
  delMessageShowModal.value = false
  fetchUserList()
}
//更新PIN
//定义请求
const handleUpdatePin = async () => {
  if (selectedUsers.value.length !== 1) {
    console.log('请选择一个用户来修改PIN码')
    return
  }

  const user = tempUser.value
  const response = await changeUserPassword({
    id: user.id,
    password: user.password,
  })

  if (response && response.success) {
  } else {
    console.log('修改用户权限失败')
  }
}
//确认更新pin，打开输入框
const handleConfirmUpdatePin = () => {
  updatePinModal.value = false
  enterPinModal.value = true
}
//输入pin，确认，发送请求
const updatePinConfirm = (val: string) => {
  enterPinModal.value = false
  updatePinLoading.value = true
  tempUser.value.password = val
  handleUpdatePin().then(() => {
    updatePinLoading.value = false
    updatePinMsgModal.value = true
  })
}
//取消
const closeEnterPinModal = () => {
  enterPinModal.value = false
}
//取消
const handleCancelUpdatePin = () => {
  updatePinModal.value = false
}
//添加用户
const handleConfirmInsert = (val: string) => {
  const user = tableData.value.find((item) => item.account == val)
  if (val == '') {
    isExist.value = true
    tips.value = '用户名不能为空'
    placeholder.value = '请输入用户名'
  } else if (user) {
    isExist.value = true
    tips.value = '用户已存在,请重新输入'
    placeholder.value = val
  } else {
    newUser.value.account = val // 存储用户名
    currentStep.value = 'pin'
  }
}
const handleCancelInsert = () => {
  insertUserShowModal.value = false
}
// 重置 `alreadyExist` 状态
const resetAlreadyExist = () => {
  isExist.value = false
  placeholder.value = '请输入用户名'
}
const handlePinConfirm = (pin: string) => {
  // 处理 PIN 码确认逻辑
  registerLoading.value = true
  newUser.value.password = pin
  handleAddUser().then(() => {
    confirmInsert.value = true
    registerLoading.value = false
    isPinModalVisible.value = false
  })
}
const closeModal = () => {
  isPinModalVisible.value = false
}
//添加用户的api
const handleAddUser = async () => {
  const res = await userRegister(newUser.value)
  if (res && res.success) {
    fetchUserList()
  }
}
// 选中用户的 `account` 信息，用于显示在 `Warning` 组件中
const selectedUserAccount = computed(() => {
  return selectedUsers.value.length > 0 ? selectedUsers.value[0].account : ''
})

// 动态生成的 message 内容
const updatePinMessage = computed(
  () => `是否更新PIN码 <strong>${selectedUserAccount.value}</strong> 用户`,
)
const deleteUserMessage = computed(
  () => `是否删除 <strong>${selectedUserAccount.value}</strong> 用户`,
)
</script>
<style scoped lang="less">
.user-management {
  width: 100%;
  height: 90vh;
  padding: 20px;
  box-sizing: border-box;
  background-color: #f5f7fa;
  display: flex;
  flex-direction: column;

  .user-table {
    flex: 1;
    background-color: #fff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;

    &:hover {
      box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.08);
    }

    :deep(.el-table) {
      flex: 1;
      border: none;
      border-radius: 8px;
      overflow: hidden;

      &::before {
        display: none;
      }

      .el-table__header {
        th {
          background-color: #f5f7fa;
          border: none;
          height: 60px;
          font-size: 24px;
          font-weight: 500;
          color: #303133;

          &.is-leaf {
            border: none;
          }
        }
      }

      .el-table__body {
        td {
          border: none;
          height: 60px;
          font-size: 24px;
          color: #606266;
          transition: background-color 0.3s;
        }

        tr {
          border: none;
          transition: all 0.3s;

          &:hover > td {
            background-color: #f5f7fa;
          }

          &.selected-row > td {
            background-color: #ecf5ff;
          }
        }
      }

      // 放大多选框
      .el-checkbox {
        transform: scale(1.5);

        .el-checkbox__inner {
          border-color: #dcdfe6;
          transition: all 0.3s;

          &:hover {
            border-color: #409eff;
          }
        }
      }
    }

    .table-footer {
      margin-top: 24px;
      display: flex;
      justify-content: center;
      gap: 20px;

      .el-button {
        min-width: 160px;
        height: 56px;
        border-radius: 8px;
        font-size: 24px;
        font-weight: 500;
        transition: all 0.3s;
        display: flex;
        align-items: center;
        justify-content: center;

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
        }

        &.el-button--primary {
          background-color: #409eff;
          border-color: #409eff;

          &:hover {
            background-color: #66b1ff;
            border-color: #66b1ff;
          }
        }

        &.el-button--danger {
          &:hover {
            box-shadow: 0 4px 12px rgba(245, 108, 108, 0.2);
          }
        }
      }
    }
  }
}

// 添加响应式设计
@media screen and (max-width: 768px) {
  .user-management {
    padding: 10px;

    .user-table {
      padding: 16px;

      .table-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;

        .el-button {
          width: 100%;
        }
      }
    }
  }
}
</style>
