<template>
  <div class="auto-height-container">
    <h4 class="form-header h4">基本信息</h4>
    <el-form label-width="80px" :model="form">
      <el-row>
        <el-col :offset="2" :span="8">
          <el-form-item label="用户昵称" prop="nickName">
            <el-input v-model="form.nickName" disabled />
          </el-form-item>
        </el-col>
        <el-col :offset="2" :span="8">
          <el-form-item label="登录账号" prop="userName">
            <el-input v-model="form.userName" disabled />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <h4 class="form-header h4">角色信息</h4>
    <el-table
      ref="roleRef"
      v-loading="loading"
      :data="roles.slice((pageNum - 1) * pageSize, pageNum * pageSize)"
      :row-key="getRowKey"
      @row-click="clickRow"
      @selection-change="handleSelectionChange"
    >
      <el-table-column align="center" label="序号" type="index" width="55">
        <template #default="scope">
          <span>{{ (pageNum - 1) * pageSize + scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column :reserve-selection="true" type="selection" width="55" />
      <el-table-column align="center" label="角色编号" prop="roleId" />
      <el-table-column align="center" label="角色名称" prop="roleName" />
      <el-table-column align="center" label="权限字符" prop="roleKey" />
      <el-table-column align="center" label="创建时间" prop="createTime" width="180" />
    </el-table>

    <vab-pagination
      :current-page="pageNum"
      :page-size="pageSize"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />

    <el-form label-width="100px">
      <div style="margin-top: 30px; margin-left: -120px; text-align: center">
        <el-button type="primary" @click="submitForm()">提交</el-button>
        <el-button @click="close()">返回</el-button>
      </div>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { getAuthRole, updateAuthRole } from '/@/api/userManagement'
import { useTabsStore } from '/@/store/modules/tabs'

defineOptions({
  name: 'AuthRole',
})

const route = useRoute()
const router = useRouter()
const tabStore = useTabsStore()
const { delVisitedRoute } = tabStore
const { proxy } = getCurrentInstance() as any

const loading = ref(true)
const total = ref(0)
const pageNum = ref(1)
const pageSize = ref(10)
const roleIds = ref([])
const roles = ref([])
const form = ref({
  nickName: undefined,
  userName: undefined,
  userId: undefined,
})

const handleSizeChange = (value: number) => {
  pageNum.value = 1
  pageSize.value = value
  // fetchData()
}

const handleCurrentChange = (value: number) => {
  pageNum.value = value
  // fetchData()
}

/** 单击选中行数据 */
function clickRow(row: any) {
  proxy.$refs['roleRef'].toggleRowSelection(row)
}

/** 多选框选中数据 */
function handleSelectionChange(selection: any) {
  roleIds.value = selection.map((item: any) => item.roleId)
}

/** 保存选中的数据编号 */
function getRowKey(row: any) {
  return row.roleId
}

/** 关闭按钮 */
async function close() {
  await delVisitedRoute(route.path)
  router.push({ name: 'UserManagement' })
}

/** 提交按钮 */
function submitForm() {
  const userId = form.value.userId
  const rIds = roleIds.value.join(',')
  updateAuthRole({ userId, roleIds: rIds }).then(() => {
    $baseMessage('授权成功', 'success', 'hey')
    close()
  })
}

;(() => {
  const userId = route.params && route.params.userId
  if (userId) {
    loading.value = true
    getAuthRole(userId).then((response: any) => {
      form.value = response.user
      roles.value = response.roles
      total.value = roles.value.length
      nextTick(() => {
        roles.value.forEach((row: any) => {
          if (row.flag) {
            proxy.$refs['roleRef'].toggleRowSelection(row)
          }
        })
      })
      loading.value = false
    })
  }
})()
</script>

<style lang="scss" scoped>
.form-header {
  padding-bottom: 5px;
  margin: 8px 10px 25px 10px;
  font-size: 15px;
  color: #6379bb;
  border-bottom: 1px solid #ddd;
}
</style>
