<template>
  <Dialog
    class="sf_dialog"
    v-model="dialogVisible"
    title="人员列表"
    width="800"
    style="height: 500px"
    append-to-body
  >
    <el-table :data="userList" style="width: 100%" height="320px">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="nickname" label="姓名" />
      <el-table-column prop="username" label="账号/工号" />
      <el-table-column fixed="right" label="操作">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="deleteItem(scope.row.id)">
            移除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <Pagination
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </Dialog>
</template>
<script setup>
import * as RoleApi from '@/api/system/role'
const message = useMessage() // 消息弹窗
defineOptions({ name: 'UserListDialog' })
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  roleId: undefined
})
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数

const userList = ref([]) // 所有用户列表
const dialogVisible = ref(false) // 弹窗的是否展示

/** 打开弹窗 */
const open = async (id) => {
  queryParams.roleId = id
  getList()
  dialogVisible.value = true
}
/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await RoleApi.getRoleUserList(queryParams)
    userList.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}
const deleteItem = async (id) => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    await RoleApi.deleteUserById({ id })
    message.success('移除成功')
    // 刷新列表
    await getList()
  } catch {}
}

defineExpose({ open }) // 提供 open 方法，用于打开弹窗
</script>

<style lang="scss" scoped>
:deep() {
  .el-transfer {
    display: flex;
  }
  .el-transfer__buttons {
    display: flex !important;
    flex-direction: column-reverse;
    justify-content: center;
    gap: 20px;
    .el-transfer__button:nth-child(2) {
      margin: 0;
    }
  }
}
.sf_dialog {
  height: 500px;
  :deep(.el-dialog__header) {
    float: unset !important;
    position: relative !important;
  }
}
</style>
