<script setup lang="ts">
import {
  tableColumns,
  handleSearch,
  searchFormColumns,
  searchFormData,
  tableData,
  total,
  pageInfo,
  handleOpenDlg,
  handlePaginationChange
} from "./permGroupApi";
import { ApiSelect } from "@/components/ApiSelect/index";
import { actionButtons } from "./permGroupApi";
defineOptions({
  name: "IsvPermPermGroupApi"
});
</script>

<template>
  <el-card shadow="never">
    <template #header>
      <PlusSearch
        v-model="searchFormData"
        :columns="searchFormColumns"
        :show-number="2"
        label-position="right"
        :has-reset="false"
        @search="handleSearch"
      />
    </template>
    <PlusTable
      :columns="tableColumns"
      :table-data="tableData"
      :action-bar="{ buttons: actionButtons, width: 80 }"
      :pagination="{
        total,
        modelValue: pageInfo,
        pageSizeList: [10, 20, 50, 100],
        align: 'right'
      }"
      showOverflowTooltip
      @paginationChange="handlePaginationChange"
    >
      <template #title>
        <el-button type="primary" @click="handleOpenDlg">授权接口</el-button>
      </template>
    </PlusTable>
    <ApiSelect tableTip="只显示授权接口" />
  </el-card>
</template>
