<script setup>
import DepartWrap from './components/DepartWrap.vue'
import { Search, Plus } from '@element-plus/icons-vue'
import { apiSystemUser, apiSystemRole } from '@/api/system'
import EditUser from './components/EditUser.vue'
import ResetPwd from './components/ResetPwd.vue'
import MoveUserDepart from './components/MoveUserDepart.vue'

// 获取角色
const roleId = ref('')
const roleArr = ref([])
async function getRoleList() {
  const res = await apiSystemRole.roleList()
  if (res.Ret !== 200) return
  const list = res.Data.List || []
  roleArr.value = list
}
getRoleList()

const keyword = ref('')

const departId = ref('')

const tableColOpt = [
  {
    label: '姓名',
    key: 'SysRealName'
  },
  {
    label: '用户名',
    key: 'SysUserName'
  },
  {
    label: '手机号',
    key: 'Phone'
  },
  {
    label: '角色',
    key: 'SysRoleName'
  },
  {
    label: '部门/分组',
    key: 'SysDepartmentName'
  },
  {
    label: '状态',
    key: 'IsEnabled'
  },
]
const userList = ref([])
const page = ref(1)
const pageSize = ref(20)
const tableLoading = ref(false)
const totals = ref(0)
async function getUserList() {
  tableLoading.value = true
  const res = await apiSystemUser.userList({
    PageSize: pageSize.value,
    CurrentIndex: page.value,
    RoleId: roleId.value,
    KeyWord: keyword.value,
    DepartmentId: departId.value
  })
  tableLoading.value = false
  if (res.Ret === 200) {
    userList.value = res.Data.List || []
    totals.value = res.Data.Paging.Totals
  }
}
getUserList()
function handlePageChange(e) {
  page.value = e
  getUserList()
}
function refreshUserList() {
  page.value = 1
  getUserList()
}

// 编辑用户
const showEditUser = ref(false)
let userData = ref(null)
function handleAddUser(e) {
  userData.value = e
  showEditUser.value = true
}

// 重置密码
const showResetPwd = ref(false)
function openResetPassDialog(e) {
  userData.value = e
  showResetPwd.value = true
}

// 移动分组
const showMoveUserDepart = ref(false)
function openMoveDepartDialog(e) {
  userData.value = e
  showMoveUserDepart.value = true
}

// 启用\禁用用户
async function changeStatus(e) {
  const res = await apiSystemUser.setUserEnableStatus({
    sysUserId: e.SysUserId,
    IsEnabled: e.IsEnabled ? false : true
  })
  if (res.Ret !== 200) return
  ElMessage.success('设置成功')
  getUserList()
}


</script>


<template>
  <div class="flex system-userlist-page">
    <DepartWrap v-model:departActive="departId" @change="refreshUserList" />
    <div class="user-wrap">
      <div class="user-top-box">
        <el-button
          v-permission="'sysUser:add'"
          type="primary"
          :icon="Plus"
          @click="handleAddUser(null)"
          >添加用户</el-button
        >
        <el-input
          placeholder="姓名/账号/手机号搜索"
          v-model="keyword"
          :prefix-icon="Search"
          clearable
          @input="refreshUserList"
          style="max-width: 359px; float: right"
        >
        </el-input>
        <el-select
          v-model="roleId"
          placeholder="请选择角色"
          clearable
          style="float: right; width: 150px; margin-right: 20px"
          @change="refreshUserList"
        >
          <el-option
            v-for="item in roleArr"
            :key="item.SysRoleId"
            :label="item.SysRoleName"
            :value="item.SysRoleId"
          >
          </el-option>
        </el-select>
      </div>
      <div class="table-wrap">
        <el-table
          :data="userList"
          border
          stripe
          highlight-current-row
          element-loading-text="数据加载中..."
          v-loading="tableLoading"
        >
          <el-table-column
            v-for="column in tableColOpt"
            :key="column.key"
            :prop="column.key"
            :label="column.label"
          >
            <template #default="{ row }">
              <span
                v-if="column.key === 'IsEnabled'"
                :style="{ color: !row.IsEnabled ? '#f00' : '' }"
                >{{ row.IsEnabled ? "启用" : "禁用" }}</span
              >
              <span v-else>{{ row[column.key] }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="260">
            <template #default="{ row }">
              <el-button
                type="primary"
                v-permission="'sysUser:edit'"
                link
                @click.stop="handleAddUser(row)"
                >编辑</el-button
              >
              <el-button
                v-permission="'sysUser:resetPassword'"
                type="primary"
                link
                @click.stop="openResetPassDialog(row)"
                >重置密码</el-button
              >
              <el-button
                v-permission="'department:move'"
                type="primary"
                link
                @click.stop="openMoveDepartDialog(row)"
                >移动分组</el-button
              >
              <el-button
                v-permission="'sysUser:editEnabled'"
                v-if="row.SysUserName !== 'admin'"
                :type="row.IsEnabled ? 'danger' : 'primary'"
                link
                @click.stop="changeStatus(row)"
                >{{ row.IsEnabled ? "禁用" : "启用" }}</el-button
              >
              <!-- </div> -->
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          layout="total,prev,pager,next"
          :current-page="page"
          :page-size="pageSize"
          :total="totals"
          @current-change="handlePageChange"
          style="margin-top: 30px; justify-content: flex-end"
        />
      </div>
    </div>
  </div>
  <!-- 新增\编辑用户 -->
  <EditUser
    v-model:show="showEditUser"
    :data="userData"
    @success="getUserList"
  />
  <!-- 重置密码 -->
  <ResetPwd v-model:show="showResetPwd" :data="userData" />
  <!-- 移动分组 -->
  <MoveUserDepart
    v-model:show="showMoveUserDepart"
    :data="userData"
    @success="getUserList"
  />
</template>

<style lang="scss" scoped>
.system-userlist-page {
  gap: 30px;
  .user-wrap {
    flex: 1;
  }
  .table-wrap {
    margin-top: 20px;
  }
}
</style>