<template>
  <div class="sys-content">
    <MenuTitle title="系统管理" subtitle="System Manager" />
    <el-card>
      <div class="btns">
        <el-button
          test-element="userSystem-AddUser"
          type="primary"
          v-if="uRole === UserRole.ADMIN"
          plain
          @click="openAddUserDialog"
          >创建用户</el-button
        >
        <el-button type="danger" plain @click="handleBatchDelete" class="" v-if="uRole === UserRole.ADMIN"
          >批量删除</el-button
        >
      </div>
    </el-card>
    <div class="table-content">
      <el-table
        :data="tableData"
        border
        :header-cell-style="{ textAlign: 'center' }"
        :cell-style="{ textAlign: 'center' }"
        :row-style="{ height: '58px' }"
        @selection-change="handleSelectionChange"
        v-loading="tableLoading"
        element-loading-background="rgba(48, 65, 86, 0.7)"
      >
        <el-table-column
          type="selection"
          width="40"
          :selectable="() => uRole === UserRole.ADMIN"
          v-if="uRole === UserRole.ADMIN"
        />
        <el-table-column property="number" label="序号" width="55" type="index" />
        <el-table-column property="username" label="用户账号" show-overflow-tooltip />
        <el-table-column property="nickname" label="用户名称" show-overflow-tooltip />
        <el-table-column property="role" label="用户角色" show-overflow-tooltip>
          <template #default="scope">
            {{ scope.row.role == 1 ? '管理员' : '普通用户' }}
          </template>
        </el-table-column>
        <el-table-column property="status" label="用户状态" show-overflow-tooltip>
          <template #default="scope">
            {{ scope.row.status ? '启用' : '停用' }}
          </template>
        </el-table-column>
        <el-table-column property="create_time" label="创建时间" width="280" show-overflow-tooltip />
        <el-table-column label="操作" width="220">
          <template #default="scope">
            <el-button
              link
              type="primary"
              plain
              @click="handleEdit(scope.row)"
              id="editUser"
              v-if="uRole === UserRole.ADMIN"
            >
              编辑
            </el-button>
            <el-button link type="danger" plain @click="handleDelete(scope.row)" v-if="uRole === UserRole.ADMIN">
              删除
            </el-button>
            <el-button type="danger" plain disabled v-if="uRole === UserRole.NORMAL_USER">无操作权限</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination w-full flex flex-row-reverse pr-4 m-t-4">
        <Pagination
          :total="pageObj.total"
          v-model:page="pageObj.pageNo"
          v-model:limit="pageObj.pageSize"
          @pagination="getUserListData"
        />
      </div>
    </div>

    <!-- 删除弹窗组件 -->
    <deleteDialog
      v-model:dialogVisible="showDeleteDialog"
      @get-user-list="getUserListData"
      :ids="userIds"
      :deleteMode="deleteMode"
      :id="userId"
    />
    <!-- 创建用户弹窗组件 -->
    <addUserDialog
      v-model:dialogVisible="dialogVisible"
      :mode="mode"
      :nickName="nickName"
      :userName="userName"
      :id="userId"
      :userRole="userRole"
      :userStatus="userStatus"
      :userPassword="userPassword"
      @get-user-list="getUserListData"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import Pagination from '@/components/pagination/index.vue'
import deleteDialog from '@/components/Delete/index.vue'
import addUserDialog from './components/addUserDialog.vue'
import { getUserList, getUserRole, UserRole } from '@/api/user.ts'
import { DeleteMode } from '@/components/Delete/enum.ts'
import { AddMode } from './components/enum.ts'
import { ElMessage } from 'element-plus'
import MenuTitle from '@/components/MenuTitle.vue'
const userId = ref<number>(-1)
const userIds = ref<number[]>([])
const nickName = ref<string>('')
const userName = ref<string>('')
const userRole = ref<number>(0)
const userStatus = ref<boolean>(true)
const userPassword = ref<string>('')
const showDeleteDialog = ref(false)
const deleteMode = ref<DeleteMode>(DeleteMode.SINGLE_DELETE)
const dialogVisible = ref<boolean>(false)
const mode = ref<AddMode>(AddMode.ADD_MODE)
const tableData = ref([])
const pageObj = ref({
  total: 0,
  pageSize: 10,
  pageNo: 1
})
// 编辑用户信息的方法
const handleEdit = async (row: any) => {
  mode.value = AddMode.UPDATE_MODE
  nickName.value = row.nickname
  userName.value = row.username
  userRole.value = row.role
  userStatus.value = row.status
  userPassword.value = row.password
  dialogVisible.value = true
  userId.value = row.id
}
// 弹窗关闭的方法
const handleDelete = async (row: any) => {
  showDeleteDialog.value = true
  deleteMode.value = DeleteMode.SINGLE_DELETE
  userId.value = row.id
}
// 批量删除用户的方法
const handleBatchDelete = async () => {
  if (!userIds.value || userIds.value.length === 0) {
    ElMessage({
      message: '请先选择要删除的用户',
      type: 'warning'
    })
    return
  } else {
    deleteMode.value = DeleteMode.BATCH_DELETE
    showDeleteDialog.value = true
  }
}
// 多选框改变后的方法
const handleSelectionChange = (data: any) => {
  let array = []
  for (let i = 0; i < data.length; i++) {
    array.push(data[i].id)
  }
  userIds.value = array
}

const openAddUserDialog = () => {
  mode.value = AddMode.ADD_MODE
  dialogVisible.value = true
}

const tableLoading = ref(false)

// 获取用户列表数据的方法
const getUserListData = async () => {
  tableLoading.value = true
  const userList = await getUserList({
    page: pageObj.value.pageNo,
    size: pageObj.value.pageSize
  })
  tableLoading.value = false
  tableData.value = userList.data.list
  pageObj.value.total = userList.data.total
}

const uRole = ref<UserRole>(UserRole.NORMAL_USER)
// 查询用户角色
const getURole = async () => {
  const res = await getUserRole()
  uRole.value = res.data
}

onMounted(async () => {
  await getURole()
  getUserListData()
})
</script>

<style scoped>
/* 去除按钮边框 */
.el-button:focus {
  outline: none;
}
.title {
  text-align: left;
  font-size: 18px;
  font-weight: 500;
  color: white;
}
.low-titme {
  color: #ccc;
  text-align: left;
  margin-left: 20px;
}
.divider {
  margin-top: 15px;
}
.btns {
  display: flex;
  justify-content: end;
}
</style>

<style>
/* 修改弹窗样式 */
.el-dialog {
  background-size: 100% 100%;
  background-repeat: no-repeat;

  .el-dialog__title {
    color: #ffffff;
  }
}

/* 修改el输入框的样式 */
.el-input__wrapper {
  background-color: #1d5484;
  box-shadow: none;
}

.table-content {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(78, 237, 255, 0.2);
  box-shadow: 0 0 15px rgba(78, 237, 255, 0.1);
  border-radius: 8px;
  padding: 10px !important;
}
</style>
