<script setup lang="ts">
import { useTable } from '@/hooks/web/useTable'
import { FormSchema } from '@/types/form'
import { ref } from 'vue'
import { DocsApi } from '@/api/new-ai/docs'
import { ElMessage, ElMessageBox, ElTag } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
import { Refresh, Delete, Edit } from '@element-plus/icons-vue'
import EditDoc from './edit-doc.vue'
const editDocRef = ref()
const route = useRoute()
const tableRef = ref()
const columns = [
  {
    label: '文档名称',
    field: 'name',
    width: 200
  },
  {
    label: '文档链接',
    field: 'url',
    width: 200
  },
  {
    label: '文档来源',
    field: 'type',
    width: 200,
    formatter(row) {
      return h(
        ElTag,
        {
          size: 'small',
          type: row.type == 'UPLOAD' ? 'success' : 'info',
        },
        {
          default: () => (row.type == 'UPLOAD' ? '上传' : '录入'),
        }
      );
    },
  },
  {
    label: '切片数量',
    field: 'sliceNum',
    width: 200
  },
  {
    label: '切片状态',
    field: 'status',
    width: 200,
    formatter(row) {
      return h(
        ElTag,
        {
          size: 'small',
          type: row.sliceStatus == true ? 'success' : 'info',
        },
        {
          default: () => (row.sliceStatus == true ? '已训练' : '未训练'),
        }
      );
    },
  },
  {
    label: '文件大小',
    field: 'size',
    formatter(rowData) {
      return (Number(rowData.size) / 1000000).toFixed(2) + ' MB';
    }
  },
  {
    label: '操作',
    field: 'action',
    width: 200
  }
]

const { tableObject, register, tableMethods } = useTable({
  getListApi: DocsApi.getDocsPage,
  delListApi: DocsApi.deleteDocs,
  defaultParams: {
    knowledgeId: route.params.id
  }
})
const pagination = computed(() => {
  return {
    total: tableObject.total,
    pageSize: tableObject.pageSize,
    currentPage: tableObject.currentPage
  }
})
const schema = ref<FormSchema[]>([
  {
    label: '文档名称',
    field: 'name',
    component: 'Input',
    componentProps: {
      style: {
        width: '150px'
      },
      placeholder: '请输入文档名称'
    }
  }
])

// 重新向量化
const handleReEmbed = async (row) => {
  try {
    await ElMessageBox.confirm('确认要重新向量化该文档吗？', '提示', {
      type: 'warning'
    })
    await DocsApi.reEmbedDocs(row.id)
    ElMessage.success('重新向量化成功')
    tableMethods.getList()
  } catch (error) {
    console.error('Failed to re-embed:', error)
  }
}
const openEdit = (row) => {
  editDocRef.value.show(route.params.id, row.id) // docId可选，用于编辑模式
}
onMounted(() => {
  tableMethods.getList()
})
</script>

<template>
  <div>
    <Search :schema="schema" @search="tableMethods.getList()" />
    <Table
      class="mt-20px"
      ref="tableRef"
      border
      :data="tableObject.tableList"
      :columns="columns"
      :schema="schema"
      :label-width="100"
      :pagination="pagination"
      :search-table-height="true"
      @register="register"
    >
      <template #action="{ row }">
        <el-button text type="primary" :icon="Refresh" @click="handleReEmbed(row)" />
        <el-button text type="primary" :icon="Edit" @click="openEdit(row)" />
        <el-button text :icon="Delete" type="danger" @click="tableMethods.delList(row.id, false)" />
      </template>
    </Table>
    <edit-doc ref="editDocRef" @reload="tableMethods.getList()" />
  </div>
</template>

<style scoped></style>
