
<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, watch, onMounted} from 'vue';
import {getColumns} from './composables/columns';
import {LLMProviders, ModelTypeEnum} from './composables/consts';
import {ModelApi} from '@/api/new-ai/model';
import {ElMessage, ElMessageBox} from 'element-plus';
import {getModels, ProviderEnum} from './composables/provider';

const formData = ref({
  provider: ProviderEnum.OPENAI
});
const message = ElMessage;
const dialog = ElMessageBox;
const actionRef = ref();
const editRef = ref();
const tableData = ref([]);
const loading = ref(false);
// 获取模型列表
const loadData = async () => {
  loading.value = true;
  try {
    const res = await ModelApi.getModelList({
      provider: formData.value.provider,
      type: ModelTypeEnum.CHAT
    }).finally(() => {
      loading.value = false;
    });
    console.log(res)
    tableData.value = res;
  } catch (error) {
    console.error('Failed to load models:', error);
    message.error('获取模型列表失败');
  }
};

// 监听 provider 变化重新加载数据
watch(() => formData.value.provider, () => {
  loadData();
});

// 初始加载
onMounted(() => {
  loadData();
});

const columns = computed(() => {
  nextTick();
  return getColumns(formData.value.provider);
});

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

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

async function reloadTable() {
  await loadData();
}

async function handleDel(record: any) {
  dialog.confirm('确定要删除该模型吗？', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    try {
      await ModelApi.deleteModel(record.id);
      await reloadTable();
      message.success('模型删除成功');
    } catch (error) {
      console.error('Failed to delete model:', error);
      message.error('删除模型失败');
    }
  }).catch(() => {
  });
}
</script>

<template>
  <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" v-loading="loading">
        <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" :pagination="false" >
          <template #action="{row}">
            <el-button text :icon="Edit" @click="handleEdit(row)"/>
            <el-button text :icon="Delete" type="danger" @click="handleDel(row)"/>
          </template> 
        </Table>
        <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>
