<script setup lang="ts">
import { useTable } from '@/hooks/web/useTable'
import { FormSchema } from '@/types/form'
import { ref } from 'vue'
import { SliceApi } from '@/api/new-ai/slice'
import { ElMessage, ElTag } from 'element-plus'
import { DocsApi } from '@/api/new-ai/docs'
import { Delete } from '@element-plus/icons-vue'

const tableRef = ref()
const docsList = ref([])
const columns = [
  {
    label: '文档名称',
    field: 'name',
    width: 200
  },
  {
    label: '字符数',
    field: 'wordNum',
    width: 200
  },
  {
    label: '切片内容',
    field: 'content',
    width: 200
  },
  {
    label: '切片状态',
    field: 'status',
    width: 200,
    formatter(row) {
      return h(
        ElTag,
        {
          size: 'small',
          type: row.status == true ? 'success' : 'info'
        },
        {
          default: () => (row.status == true ? '已训练' : '未训练')
        }
      )
    }
  },
  {
    label: '切片时间',
    field: 'createTime'
  },
  {
    label: '操作',
    field: 'action',
    width: 200
  }
]
const { tableObject, register, tableMethods } = useTable({
  getListApi: SliceApi.getSlicePage,
  delListApi: SliceApi.deleteSlice,
  defaultParams: {
    knowledgeId: useRoute().params.id
  },
})
const schema = computed(() => {
  return [
    {
      label: '所属文档',
      field: 'docId',
      component: 'Select',
      componentProps: {
        style: {
          width: '150px'
        },
        placeholder: '请选择所属文档',
        options: docsList.value.map((item: any) => {
          return {
            label: item.name,
            value: item.id
          }
        })
      }
    }
  ]
})
const pagination = computed(() => {
  return {
    pageSize: tableObject.pageSize,
    currentPage: tableObject.currentPage,
    total: tableObject.total
  }
})
onMounted(async () => {
  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"
      @register="register"
      :search-table-height="true"
    >
      <template #action="{ row }">
        <el-button text :icon="Delete" type="danger" @click="tableMethods.delList(row.id, false)" />
      </template>
    </Table>
  </div>
</template>

<style scoped lang="scss"></style>
