<template>
  <div class="page-content">
    <div class="mb-5"><h2 class="text-xl font-semibold">AI 资产目录</h2><p class="text-g-500 mt-1 text-sm">仅展示你所在部门可使用且已启用的资产</p></div>
    <div class="mb-5 grid grid-cols-2 gap-4 lg:grid-cols-4">
      <ElCard shadow="never"><div class="text-g-500 text-sm">应用</div><div class="mt-2 text-3xl font-semibold">{{catalog.applications.length}}</div></ElCard>
      <ElCard shadow="never"><div class="text-g-500 text-sm">Prompt</div><div class="mt-2 text-3xl font-semibold">{{catalog.prompts.length}}</div></ElCard>
      <ElCard shadow="never"><div class="text-g-500 text-sm">知识库</div><div class="mt-2 text-3xl font-semibold">{{catalog.knowledge.length}}</div></ElCard>
      <ElCard shadow="never"><div class="text-g-500 text-sm">工具</div><div class="mt-2 text-3xl font-semibold">{{catalog.tools.length}}</div></ElCard>
    </div>
    <ElTabs v-loading="loading">
      <ElTabPane label="应用"><div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3"><ElCard v-for="item in catalog.applications" :key="item.id" shadow="hover"><div class="flex justify-between"><b>{{item.name}}</b><ElTag type="success">v{{item.published_version}}</ElTag></div><p class="text-g-500 mt-2 min-h-10 text-sm">{{item.description||'暂无描述'}}</p><code class="text-xs">{{item.code}}</code></ElCard></div><ElEmpty v-if="!catalog.applications.length"/></ElTabPane>
      <ElTabPane label="知识库"><ElTable :data="catalog.knowledge"><ElTableColumn prop="name" label="名称"/><ElTableColumn prop="description" label="描述"/><ElTableColumn prop="document_count" label="文档" width="90"/><ElTableColumn prop="chunk_count" label="分块" width="90"/></ElTable></ElTabPane>
      <ElTabPane label="工具"><ElTable :data="catalog.tools"><ElTableColumn prop="name" label="名称"/><ElTableColumn prop="code" label="编码"/><ElTableColumn prop="description" label="描述"/></ElTable></ElTabPane>
    </ElTabs>
  </div>
</template>
<script setup lang="ts">
import {Catalog,fetchCatalog} from '@/api/portal'
const loading=ref(false);const catalog=reactive<Catalog>({applications:[],knowledge:[],tools:[],prompts:[]})
onMounted(async()=>{loading.value=true;try{Object.assign(catalog,await fetchCatalog())}finally{loading.value=false}})
</script>

