<script setup lang="ts">
import {Plus, Edit, Delete} from "@element-plus/icons-vue";
import {Table} from "@/components/Table";
import {Search} from "@/components/Search";
import useEmbedStore from './composables'
import EditCom from './edit.vue'
import { onMounted, ref } from 'vue'

const { shema, columns, register, open, handleSearch,methods, tableObject, pagination, handleDel, editRef } = useEmbedStore()


onMounted(() => {
  methods?.getList()
})
</script>

<template>
  <content-wrap>
    <Search :schema="shema" @search="handleSearch" @reset="handleSearch"/>
  </content-wrap>
  <ContentWrap v-loading="tableObject.loading">
    <el-alert
      class="w-full mb-10px min-alert"
      title="注意：请慎重修改模型的向量纬度参数（Dimension），此参数需要和向量库匹配（错误修改可能将影响已有的向量数据）"
      type="info"
      show-icon
    />
    <el-button class="my-10px" type="primary" :icon="Plus" @click="open()">新增向量数据库</el-button>
    <Table height="calc(100% - 400px)" border :data="tableObject.tableList" :columns="columns" :pagination="pagination" @register="register">
      <template #action="{ row }">
          <el-button type="primary" text :icon="Edit" @click="open(row)" />
          <el-button type="danger" text :icon="Delete" @click="handleDel(row.id)" />
      </template>
    </Table>
    <EditCom ref="editRef" @reload="methods?.getList" />
  </ContentWrap>
</template>

<style scoped lang="scss">

</style>
