<script setup lang="ts">
import { computed, ref } from 'vue'
import { useI18n } from 'vue-i18n'
// import { Search } from '@icon-park/vue-next'
import useTableScrollY from '@/composables/useTableScrollY'
// import { usePagination } from '@/composables/usePagination.ts'
// import CustomPagination from '@/components/custom-pagination/custom-pagination.vue'
import { createDatabaseColumn } from './columns.tsx'
import { DBTableItemInterface } from './type'
import { fetchGetDataBaseDetail } from '@/apis/database.ts'
import { useRoute, useRouter } from 'vue-router'

const { t } = useI18n()
const route = useRoute()
const router = useRouter()

const { pageContentWrapRef, tableContentY } = useTableScrollY(46 + 48 + 33)
// const { paginationData, handlePageNoChange, handlePageSizeChange } = usePagination()

// const searchDBTableInputValue = ref('')
const isSearchEmptyList = ref(false)
const dbTableList = ref<DBTableItemInterface[]>([])
const dbTableListLoading = ref(true)
const dbTitle = ref('')

const dbTableColumns = createDatabaseColumn({ t })

const emptyTableDataText = computed(() => {
  return isSearchEmptyList.value ? t('common_module.search_empty_data') : t('common_module.empty_data')
})

// const isLoadingPagination = computed(() => {
//   return tableContentY.value > 0
// })

/* created */
;(function () {
  getDBTableList()
})()

function getDBTableList() {
  fetchGetDataBaseDetail<{
    title: string
    tableInfos: { table_NAME: string; table_COMMENT: string; table_ROWS: number; table_COLUMN: number }[]
  }>(route.params.id as string)
    .then((res) => {
      if (res.code !== 0) return ''

      dbTitle.value = res.data.title

      const tableData: DBTableItemInterface[] = res.data.tableInfos.map((dataItem) => {
        return {
          name: dataItem.table_NAME,
          docs: dataItem.table_COMMENT,
          dataSize: `${dataItem.table_ROWS || '-'}行, ${dataItem.table_COLUMN || '-'}列`,
        }
      })

      dbTableList.value = tableData
    })
    .finally(() => {
      dbTableListLoading.value = false
    })
}

function handleNavBack() {
  router.replace({
    name: 'PersonalSpaceDatabase',
  })
}
</script>

<template>
  <div ref="pageContentWrapRef" class="h-full w-full">
    <!-- <div class="mb-[18px] flex justify-end">
      <n-input v-model:value="searchDBTableInputValue" :placeholder="t('common_module.search')" class="w-[256px]!">
        <template #suffix>
          <Search theme="outline" size="16" fill="#999" class="cursor-pointer" />
        </template>
      </n-input>
    </div> -->
    <div class="mb-[12px]">
      <span class="cursor-pointer select-none text-[14px]" @click="handleNavBack">
        <i class="iconfont icon-left mr-[6px] text-[12px]"></i>
        <span>{{ dbTitle || '返回数据库列表' }}</span>
      </span>
    </div>

    <div class="rounded-[10px] bg-white p-[23px]">
      <n-data-table
        :loading="dbTableListLoading"
        :bordered="true"
        :bottom-bordered="true"
        :single-line="false"
        :data="dbTableList"
        :columns="dbTableColumns"
        :max-height="tableContentY"
      >
        <template #empty>
          <div :style="{ height: tableContentY + 'px' }" class="flex items-center justify-center">
            <div class="flex flex-col items-center justify-center">
              <div
                class="mb-5 h-[68px] w-[68px]"
                :class="isSearchEmptyList ? 'bg-px-search_empty_list-png' : 'bg-px-empty_list-png'"
              />
              <p class="text-gray-font-color select-none">{{ emptyTableDataText }}</p>
            </div>
          </div>
        </template>
      </n-data-table>
    </div>

    <!-- <footer v-show="isLoadingPagination" class="flex justify-end">
      <CustomPagination
        :paging-info="paginationData"
        @update-page-no="handlePageNoChange"
        @update-page-size="handlePageSizeChange"
      />
    </footer> -->
  </div>
</template>
