<script setup lang="ts">

import {Delete, Plus, Edit } from "@element-plus/icons-vue";
import usePage from './composables/index'
import {LLMProviders} from "@/views/ai/model/image/composables/consts";
import EditCom from './edit.vue'
import {Table} from "@/components/Table";

const {columns, tableData, formData, editRef, open, loadData, handleEdit, handleDel, loading} = 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 p-20px">
        <el-alert
          class="w-full mb-10px min-alert"
          show-icon
          title="鉴于很多模型的文生图效果很差甚至没有，这里只建议使用OpenAI的DALL-E模型"
          type="info"
        />
        <el-button :icon="Plus" class="my-10px" type="primary" @click="open">新增图像模型
        </el-button>
        <Table
          :columns="columns" :data="tableData" :loading="loading" border
          class="table-wrapper" height="100%">
          <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 {
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 6px;
  cursor: pointer;

  &:hover {
    background: var(--el-fill-color-light);
  }

  &.active {
    background: var(--el-color-primary-light-9);
    color: var(--el-color-primary);
  }
}
</style>
