<template>
  <div class="table-box">
    <ProTable ref="proTableRef" title="参数配置" row-key="roleId" :columns="columns" :search-columns="searchColumns" :request-api="getTableList">
      <!-- 表格 header 按钮 -->
      <template #tableHeader="scope">
        <el-button type="primary" icon="CirclePlus" @click="openDrawer('新增')"> 新增 </el-button>
        <el-button type="danger" icon="Delete" plain :disabled="!scope.isSelected" @click="batchDelete(scope.selectedListIds)"> 批量删除 </el-button>
      </template>

      <template #operation="{ row }">
        <div class="operation-group">
          <el-button type="primary" link icon="EditPen" v-auth="[]" @click="openDrawer('编辑', row)"> 编辑 </el-button>
          <el-button v-if="row.isLock !== '1'" type="primary" link icon="Delete" @click="deleteRow(row)"> 删除 </el-button>
          <div class="group" v-if="row.isLock !== '1'">
            <el-dropdown trigger="click">
              <el-button type="primary" link icon="DArrowRight"> 授权 </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item icon="Lock" @click="openAuthMenuDrawer('授权菜单', row)">授权菜单</el-dropdown-item>
                  <el-dropdown-item icon="Lock" @click="openAuthPermissionsDrawer('授权权限', row)"> 授权权限 </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </template>
    </ProTable>
    <RoleDrawer ref="drawerRef" size="40%" />
    <MenuDrawer ref="drawerMenuRef" size="40%" />
    <PermissionsDrawer ref="drawerPermissionsRef" size="40%" />
  </div>
</template>
<script lang="tsx" setup name="RoleManage">
import RoleApi from '@/api/module/system/role'
import RoleDrawer from './components/RoleDrawer.vue'
import MenuDrawer from './components/MenuDrawer.vue'
import { ColumnProps, ProTableInstance, SearchProps } from '@/components/ProTable/interface'
import { useDictOptions, useHandleData } from '@/hooks'
import { RoleBO, RoleQuery, RoleVO } from '@/api/interface/system/role'
import PermissionsDrawer from './components/PermissionsDrawer.vue'

const proTableRef = ref<ProTableInstance>()

// 表格配置项
const columns: ColumnProps<RoleVO>[] = [
  { type: 'selection', width: 60, selectable: row => row.isLock !== '1' },
  { type: 'index', label: '序号', width: 60 },
  { prop: 'name', label: '角色名称' },
  { prop: 'code', label: '角色标识', tag: true },
  {
    prop: 'status',
    label: '状态',
    tag: true,
    enum: useDictOptions('COMMON_STATUS'),
    width: 80,
    fieldNames: { label: 'dictLabel', value: 'dictValue', tagType: 'callbackShowStyle' }
  },
  { prop: 'orderNum', label: '排序' },
  { prop: 'remark', label: '备注' },
  { prop: 'createByName', label: '创建人' },
  { prop: 'createTime', label: '创建时间' },
  { prop: 'operation', label: '操作', width: 250, fixed: 'right' }
]

// 表格配置项
const searchColumns: SearchProps[] = [{ prop: 'name', label: '角色名称', el: 'input' }]

// 获取table列表
const getTableList = (params: RoleQuery) => RoleApi.page(params)

// 单行删除
const deleteRow = async (row: RoleVO) => {
  await useHandleData(RoleApi.delete, [row.roleId], `删除【${row.name}】角色`)
  proTableRef.value?.getTableList()
}

// 批量删除信息
const batchDelete = async (ids: (string | number)[]) => {
  await useHandleData(RoleApi.delete, ids, '删除所选数据')
  proTableRef.value?.clearSelection()
  proTableRef.value?.getTableList()
}

// 打开 drawer(新增、查看、编辑)
const drawerRef = ref<InstanceType<typeof RoleDrawer> | null>(null)
const openDrawer = (title: string, row: Partial<RoleBO> = {}) => {
  const params = {
    title,
    row: { ...row },
    isView: title === '查看',
    api: title === '新增' ? RoleApi.add : title === '编辑' ? RoleApi.edit : undefined,
    getTableList: proTableRef.value?.getTableList
  }
  drawerRef.value?.acceptParams(params)
}
const drawerMenuRef = ref<InstanceType<typeof MenuDrawer> | null>(null)
const openAuthMenuDrawer = (title: string, row: Partial<RoleVO> = {}) => {
  const params = {
    title,
    row: { ...row },
    api: RoleApi.addMenu,
    getTableList: proTableRef.value?.getTableList
  }
  drawerMenuRef.value?.acceptParams(params)
}

const drawerPermissionsRef = ref<InstanceType<typeof PermissionsDrawer> | null>(null)
const openAuthPermissionsDrawer = (title: string, row: Partial<RoleVO> = {}) => {
  const params = {
    title,
    row: { ...row },
    api: RoleApi.addPermission,
    getTableList: proTableRef.value?.getTableList
  }
  drawerPermissionsRef.value?.acceptParams(params)
}
</script>
<style lang="scss" scoped>
.operation-group {
  display: flex;
  justify-content: center;
  .group {
    display: flex;
    justify-content: center;
  }
}
.operation-group > * {
  margin-left: 8px;
}
</style>
