<script setup lang="ts">
import {Plus, Delete, Edit} from "@element-plus/icons-vue";
import usePage from './composables/index'
import EditCom from "@/views/ai/model/embedding/edit.vue";
import {LLMProviders} from "@/views/ai/model/embedding/composables/consts";
import {Table} from "@/components/Table";

const { baseColumns: columns, tableData, formData, editRef, open, loadData, loading,handleEdit, handleDel} = usePage()

const handleReload = () => {
  loadData()
}
</script>

<template>
  <ContentWrap>
   <div class="children flex">
     <el-scrollbar class="h-full w-300px pl-10px pr-20px">
       <div
         v-for="(item,index) in LLMProviders" :key="index"
         :class="{active: formData.provider === item.model}" class="menu"
         @click="formData.provider = item.model">
         <span>{{ item.name }}</span>
       </div>
     </el-scrollbar>
     <div class="h-full flex-1 px-20px">
       <el-alert
         class="w-full mb-10px min-alert"
         title="注意：为了实现向量数据库的动态切换，这里Embedding供应商统一选择支持1024纬度的模型"
         type="info"
         show-icon
       />
       <el-button class="my-10px" type="primary" :icon="Plus" @click="open">新增向量模型</el-button>
       <Table class="table-wrapper" height="100%" border :columns="columns" :data="tableData" :pagination="false" :loading="loading">
        <template #action="{row}">
            <el-button :icon="Edit" text @click="handleEdit(row)"/>
            <el-button :icon="Delete" text type="danger" @click="handleDel(row)"/>
          </template>
       </Table>
     </div>
   </div>
    <EditCom ref="editRef" @reload="handleReload" />
  </ContentWrap>
</template>

<style scoped lang="scss">
.children {
  height: calc(100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - (var(--app-content-padding) * 3)) !important;
  box-sizing: border-box;

  & > div:nth-child(2) {
    width: calc(100% - 300px);
  }
}

.table-wrapper {
  height: calc(100% - 100px);
}

.menu {
  transition: all .15s;
  cursor: pointer;
  padding: 12px 10px;
  border-radius: 5px;
  margin-bottom: 20px;

  &.active {
    color: #ffffff;
    background-color: var(--el-color-primary);
  }

  &:hover {
    &:not(&.active) {
      background-color: var(--el-color-info-light-7);
    }
  }
}
</style>
