<script setup>
import { apiSystemRole } from '@/api/system'


const roleList = ref([])
const page = ref(1)
const pageSize = ref(200)
const tableLoading = ref(false)
const totals = ref(0)
async function getRoleList() {
  tableLoading.value = true
  const res = await apiSystemRole.roleList()
  tableLoading.value = false
  if (res.Ret !== 200) return
  roleList.value = res.Data.List || []
  totals.value = res.Data.Paging.Totals
}
getRoleList()
function handlePageChange(e) {
  page.value = e
  getRoleList()
}


const show = ref(false)
const activeItem = ref(null)
const formRef = ref(null)
const formState = reactive({
  name: ''
})
function handleEdit(e) {
  if (e) {
    activeItem.value = e
    formState.name = e.SysRoleName
  } else {
    activeItem.value = null
    formState.name = ''
  }
  show.value = true
}
async function handleSubmitForm() {
  await formRef.value.validate()
  const res = activeItem.value ? await apiSystemRole.roleAdd({
    SysRoleName: formState.name
  }) : await apiSystemRole.roleEdit({
    SysRoleName: formState.name,
    SysRoleId: activeItem.value.SysRoleId
  })
  if (res.Ret !== 200) return
  ElMessage.success(activeItem.value ? '编辑成功' : '添加成功')
  getRoleList()
  show.value = false
}

// 删除
async function handleDel(e) {
  await ElMessageBox.confirm('是否确认删除该角色?', '提示', {
    type: 'warning',
  })
  const res = await apiSystemRole.roleDel({
    SysRoleId: e.SysRoleId
  })
  if (res.Ret !== 200) return
  ElMessage.success('删除成功');
  getRoleList()
}




</script>


<template>
  <div class="system-rolelist-page">
    <div class="shadow-box top-box">
      <el-button type="primary" @click="handleEdit('')" v-permission="'role:add'">添加角色</el-button>
    </div>
    <div class="shadow-box content-box">
      <el-table
        :data="roleList"
        border
        stripe
        highlight-current-row
        element-loading-text="数据加载中..."
        v-loading="tableLoading"
      >
        <el-table-column prop="SysRoleId" label="序号" />
        <el-table-column prop="SysRoleName" label="角色" />
        <el-table-column prop="opt" label="操作">
          <template #default="{ row }">
            <el-button v-permission="'role:add'" link type="primary" @click="handleEdit(row)"
              >编辑</el-button
            >
            <el-button v-permission="'role:delete'" link type="danger" @click="handleDel(row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="total,prev,pager,next,jumper"
        :current-page="page"
        :page-size="pageSize"
        :total="totals"
        @current-change="handlePageChange"
        style="margin-top: 30px; justify-content: flex-end"
      />
    </div>
  </div>
  <!-- 角色弹窗 -->
  <el-dialog v-model="show" width="500" draggable>
    <template #header>
      <div style="display: flex; align-items: center">
        <el-icon size="20px">
          <i-ep-CirclePlus v-if="!activeItem" />
          <i-ep-Edit v-else />
        </el-icon>
        <span>{{ activeItem ? "编辑角色" : "添加角色" }}</span>
      </div>
    </template>
    <el-form ref="formRef" :model="formState">
      <el-form-item label="角色" prop="name">
        <el-input
          placeholder="请填写角色名称"
          v-model="formState.name"
        ></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="btn-content" style="text-align: center; padding-bottom: 20px">
        <el-button
          type="primary"
          style="width: 80px; margin-right: 24px"
          @click="handleSubmitForm"
          >保存</el-button
        >
        <el-button style="width: 80px" @click="show = false">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.content-box {
  margin-top: 20px;
}
</style>