<script setup lang="ts">
import {
  handleConfirm,
  dlgApiSelectShow,
  tableColumns,
  dlgWidth,
  selectable,
  handleSelectionChange,
  handleSearch,
  searchFormColumns,
  searchFormData,
  tableData,
  pageInfo,
  total,
  handlePaginationChange
} from "@/components/ApiSelect/index";

defineProps({
  title: {
    type: String,
    default: "选择接口"
  },
  tableTip: {
    type: String,
    default: ""
  }
});
</script>

<template>
  <PlusDialog
    v-model="dlgApiSelectShow"
    :title="title"
    :width="dlgWidth"
    cancel-text="取消"
    confirm-text="确定"
    @confirm="handleConfirm"
  >
    <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"
        :is-selection="true"
        :selectionTableColumnProps="{
          selectable: selectable
        }"
        :pagination="{
          total,
          modelValue: pageInfo,
          pageSizeList: [10, 20, 50, 100],
          align: 'right'
        }"
        adaptive
        @paginationChange="handlePaginationChange"
        @selection-change="handleSelectionChange"
      >
        <template #title>
          <el-alert
            v-show="tableTip"
            type="info"
            :title="tableTip"
            :closable="false"
            show-icon
          />
        </template>
      </PlusTable>
    </el-card>
  </PlusDialog>
</template>
