<script setup lang="ts">
import { ref, watch } from 'vue';
import { useTable } from '@/hooks/common/table';
import { importTable, listDbTable } from '@/service/api/tool/gen';

defineOptions({
  name: 'ImportTableModal'
});

interface Emits {
  (e: 'submitted'): void;
}

const emit = defineEmits<Emits>();

const visible = defineModel<boolean>('visible', {
  default: false
});

const {
  columns,
  data,
  loading,
  getData,
  getDataByPage,
  mobilePagination,
  searchParams,
  resetSearchParams
} = useTable({
  apiFn: listDbTable,
  apiParams: {
    pageNum: 1,
    pageSize: 10,
    tableName: null,
    tableComment: null
  },
  immediate: false,
  showTotal: true,
  columns: () => [
    {
      type: 'selection',
      width: 48,
      align: 'center'
    },
    {
      key: 'tableName',
      title: '表名称',
      align: 'center'
    },
    {
      key: 'tableComment',
      title: '表描述',
      align: 'center'
    },
    {
      key: 'createTime',
      title: '创建时间',
      align: 'center'
    },
    {
      key: 'updateTime',
      title: '更新时间',
      align: 'center'
    }
  ]
});

// 选中的表
const checkedRowKeys = ref<string[]>([]);

function closeModal() {
  visible.value = false;
}

// 导入表
async function handleImportTable() {
  if (checkedRowKeys.value.length === 0) {
    window.$message?.warning('请选择要导入的表');
    return;
  }

  const { error } = await importTable({ tables: checkedRowKeys.value.join(',') });
  if (!error) {
    window.$message?.success('导入成功');
    closeModal();
    emit('submitted');
  }
}
watch(visible, () => {
  if (visible.value) {
    getData();
  }
});
</script>

<template>
  <!-- 导入表 -->
  <NModal v-model:show="visible" title="导入表" preset="card" class="w-1200px">
    <NScrollbar class="h-680px pr-20px">
      <NSpace vertical :size="16">
        <NForm :model="searchParams" inline>
          <NGrid responsive="screen" item-responsive>
            <NFormItemGi span="24 s:12 m:6" label="表名称" path="tableName" class="pr-24px">
              <NInput v-model:value="searchParams.tableName" placeholder="请输入表名称" />
            </NFormItemGi>
            <NFormItemGi span="24 s:12 m:6" label="表描述" path="tableComment" class="pr-24px">
              <NInput v-model:value="searchParams.tableComment" placeholder="请输入表描述" />
            </NFormItemGi>
            <NFormItemGi span="24 m:12" class="pr-24px">
              <NSpace class="w-full" justify="end">
                <NButton @click="resetSearchParams">
                  <template #icon>
                    <icon-ic-round-refresh class="text-icon" />
                  </template>
                  重置
                </NButton>
                <NButton type="primary" ghost @click="getDataByPage()">
                  <template #icon>
                    <icon-ic-round-search class="text-icon" />
                  </template>
                  搜索
                </NButton>
              </NSpace>
            </NFormItemGi>
          </NGrid>
        </NForm>

        <!-- 表格 -->
        <NDataTable
          v-model:checked-row-keys="checkedRowKeys"
          :columns="columns"
          :data="data"
          :scroll-x="1088"
          :loading="loading"
          remote
          :pagination="mobilePagination"
          :row-key="(row: any) => row.tableName"
          class="sm:h-full"
        />
      </NSpace>
    </NScrollbar>
    <template #footer>
      <NSpace justify="end" :size="16">
        <NButton @click="closeModal">取消</NButton>
        <NButton type="primary" :disabled="!checkedRowKeys.length" @click="handleImportTable">确定</NButton>
      </NSpace>
    </template>
  </NModal>
</template>

<style scoped></style>
