<template>
  <div class="permission-role">
    <el-card class="!border-none mb-4" shadow="never" v-if="showSearch">
      <el-form class="mb-[-16px]" ref="queryFormRef" :model="queryParams" inline @submit.prevent="handleQuery">
        <el-form-item class="w-[280px]" label="角色名称" prop="name">
          <el-input v-model="queryParams.name" placeholder="请输入角色名称" clearable @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">搜索</el-button>
          <el-button @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="!border-none" shadow="never" v-loading="isLoading">
      <div class="wd-card-header">
        <el-button v-perms="['auth.role/add']" type="primary" icon="Plus" @click="handleAdd()">新增角色</el-button>
        <el-button
          v-perms="['auth:role/edit']"
          type="warning"
          icon="Edit"
          :disabled="multipleSelection.length != 1"
          @click="handleEdit()"
        >
          修改
        </el-button>
        <el-button
          v-perms="['auth.role/delete']"
          type="danger"
          icon="Delete"
          :disabled="multipleSelection.length == 0"
          @click="handleDelete()"
        >
          删除
        </el-button>
        <right-toolbar v-model:showSearch="showSearch" v-model:columns="columns" @refresh="getLists"></right-toolbar>
      </div>
      <el-table size="large" :data="tableData" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column prop="id" label="ID" width="80" align="center" v-if="columns.id.visible" />
        <el-table-column prop="name" label="角色名称" width="180" align="center" v-if="columns.name.visible" />
        <el-table-column prop="desc" label="备注" min-width="200" align="center" v-if="columns.desc.visible" />
        <el-table-column prop="sort" label="排序" width="100" align="center" v-if="columns.sort.visible" />
        <el-table-column
          prop="create_time"
          label="创建时间"
          width="200"
          align="center"
          v-if="columns.create_time.visible"
        />
        <el-table-column label="操作" width="120" align="center" fixed="right" v-if="columns.operation.visible">
          <template #default="{ row }">
            <el-button type="primary" link v-perms="['auth.role/edit']" @click="handleEdit(row)"> 编辑 </el-button>
            <el-button type="danger" link v-perms="['auth.role/delete']" @click="handleDelete(row.id)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="flex mt-4 justify-end">
        <Pagination v-model="queryParams" :total="total" @change="getLists" />
      </div>
    </el-card>
    <edit-role ref="editRef" @success="getLists" />
  </div>
</template>

<script setup lang="ts" name="PermissionRole">
import type { FormInstance } from 'element-plus'
import { roleLists, roleDelete } from '@/api/permission/role'
import EditRole from './edit.vue'

// 组件参数
const queryFormRef = shallowRef<FormInstance>()
const editRef = shallowRef<InstanceType<typeof EditRole>>()
const queryParams = reactive({
  page: 1,
  limit: 10,
  name: ''
})
const total = ref(0)
const multipleSelection = ref<any[]>([])
const isLoading = ref(false)
const tableData = ref<any[]>([])
const showSearch = ref(true)
const columns = ref({
  id: { label: 'ID', visible: true },
  name: { label: '角色名称', visible: true },
  desc: { label: '备注', visible: true },
  sort: { label: '排序', visible: true },
  create_time: { label: '创建时间', visible: true },
  operation: { label: '操作', visible: true }
})

// 获取列表
const getLists = async () => {
  isLoading.value = true
  roleLists(queryParams)
    .then((res) => {
      tableData.value = res.data || []
      total.value = res.total || 0
      isLoading.value = false
    })
    .catch(() => {
      isLoading.value = false
    })
}
// 搜索
const handleQuery = () => {
  queryParams.page = 1
  getLists()
}
// 重置
const resetQuery = () => {
  queryFormRef.value?.resetFields()
  handleQuery()
}
// 多选框选中数据
const handleSelectionChange = (selection: any[]) => {
  multipleSelection.value = selection
}
// 新增
const handleAdd = () => {
  editRef.value?.open('add')
  editRef.value?.setFormData()
}
// 编辑
const handleEdit = (row?: any) => {
  editRef.value?.open('edit')
  editRef.value?.setFormData(row ? row : multipleSelection.value[0])
}
// 删除
const handleDelete = (id?: number) => {
  const roleIds = id || multipleSelection.value.map((item) => item.id)
  ElMessageBox.confirm(`是否确认删除角色ID为 ${roleIds} 的数据项吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      await roleDelete({ id: roleIds })
      ElMessage.success('删除成功')
      getLists()
      return
    })
    .catch(() => {})
}

onMounted(() => {
  getLists()
})
</script>
