
<script lang="ts" setup>
import {Table} from '@/components/Table';
import {Delete, Edit, Plus} from '@element-plus/icons-vue';
import editCom from './edit.vue';
import {computed, h, nextTick, reactive, ref} from 'vue';
import {getColumns} from './composables/columns.ts';
import {LLMProviders} from './composables/consts.ts';
// import { del, list as getModels } from '@/api/aigc/model';
import {ElMessage, ElMessageBox} from 'element-plus';
import {FormSchema} from "@/types/form";
// import { ModelTypeEnum } from '@/api/models';
import {getModels, ProviderEnum} from './composables/provider.ts';

const formData = ref({
  provider: ProviderEnum.OPENAI
});
const message = ElMessage;
const dialog = ElMessageBox;
const actionRef = ref();
const editRef = ref();
const tableData = ref([
  {
    name: '1111'
  },
  {
    name: '1111'
  },
  {
    name: '1111'
  },
  {
    name: '1111'
  },
  {
    name: '1111'
  },
  {
    name: '1111'
  },
  {
    name: '1111'
  },
  {
    name: '1111'
  }, {
    name: '1111'
  },
  {
    name: '1111'
  }
])
// const actionColumn = reactive({
//   width: 100,
//   title: '操作',
//   key: 'action',
//   fixed: 'right',
//   align: 'center',
//   render(record: any) {
//     return h(TableAction as any, {
//       style: 'text',
//       actions: [
//         {
//           type: 'info',
//           icon: Edit,
//           onClick: handleEdit.bind(null, record),
//         },
//         {
//           type: 'error',
//           icon: Delete,
//           onClick: handleDel.bind(null, record),
//         },
//       ],
//     });
//   },
// });

const columns = computed(() => {
  nextTick();
  return getColumns(formData.value.provider);
});
// const loadDataTable = async (params: any) => {
//   if (formData.value.provider === '') {
//     formData.value.provider = LLMProviders[0].model;
//   }
//   return await getModels({ ...params, provider: formData.value.provider, type: ModelTypeEnum.CHAT });
// };

async function addModel() {
  console.log(formData.value.provider);
  editRef.value.show({provider: formData.value.provider});
}

function handleEdit(record: any) {
  editRef.value.show(record);
}

function reloadTable() {
  actionRef.value.reload();
}

function handleDel(record: any) {
  dialog.warning({
    title: '警告',
    message: `你确定删除 [${record.name}] 模型吗？删除之后不可再用该模型对话`,
    confirmButtonText: '确定',
    cancelButtonText: '不确定',
    type: 'warning',
  }).then(async () => {
    await del(record.id);
    reloadTable();
    message.success('模型删除成功');
  }).catch(() => {
    // 取消删除
  });
}
</script>

<template>
<!--  <content-wrap>-->
<!--    <el-button v-for="(item,index) in LLMProviders" :key="index" @click="formData.provider = item.model">{{ item.name }}</el-button>-->
<!--  </content-wrap>-->
  <ContentWrap>
   <div class="flex children">
     <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="对于完全适配OpenAI接口格式的模型都可在OpenAI中配置（只需要定义BaseUrl）"
         type="warning"
         show-icon
       />
       <el-button :icon="Plus" class="my-10px" type="primary" @click="addModel">新增模型</el-button>
       <Table class="table-wrapper" height="100%" border :columns="columns" :data="tableData.concat(tableData)" :pagination="false"/>
       <editCom ref="editRef" @reload="reloadTable"/>
     </div>
   </div>
  </ContentWrap>
</template>

<style lang="scss" scoped>
.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>
