<script lang="ts" setup>
import SvgIcon from '@/components/SvgIcon/index.vue'
import KnowledgeList from './KnowledgeList.vue'
import ModelSelect from '@/views/common/ModelSelect.vue'
import { ref } from 'vue'
import { useAppStore } from '@/views/ai/app/store'
import { ArrowRight, ArrowDown } from '@element-plus/icons-vue'
const emit = defineEmits(['update'])
const appStore = useAppStore()
const knowledgeRef = ref()

async function onSaveModel(val) {
  appStore.modelId = val.id
  emit('update')
}

function onShowKbPane() {
  knowledgeRef.value.show()
}

function onRemove(item) {
  appStore.removeKnowledge(item)
}
</script>

<template>
  <div class="p-2 py-4 flex flex-col gap-3">
    <el-collapse :model-value="['0', '1']">
      <el-collapse-item name="0" title="基础配置">
        <div class="flex items-center">
          <div class="w-24">对话模型：</div>
          <ModelSelect :id="appStore.modelId" class="w-full" @update="onSaveModel" />
        </div>
      </el-collapse-item>

      <el-collapse-item name="1" title="知识库">
        <template #icon="{ isActive }">
          <div class="flex-1 text-right">
            <el-button text @click.stop="onShowKbPane" class="flot-right">
              <SvgIcon class="text-lg" icon="ic:round-plus" />
            </el-button>
            <el-icon class="el-collapse-item__arrow " :class="{ 'is-active': isActive }">
              <ArrowRight />
            </el-icon>
          </div>
        </template>
        <div v-if="appStore.knowledges">
          <div class="knowledge-list">
            <div
              v-for="item in appStore.knowledges"
              :key="item.id"
              class="knowledge-item w-full bg-white overflow-hidden rounded-lg hover:bg-gray-100 p-3 mb-2"
            >
              <div class="flex items-center justify-between">
                <div class="flex gap-1 items-center">
                  <SvgIcon class="text-3xl" icon="flat-color-icons:document" />
                  <div>{{ item.name }}</div>
                </div>
                <el-button text @click="onRemove(item)">
                  <SvgIcon icon="gg:remove" />
                </el-button>
              </div>
            </div>
          </div>
          <div v-if="appStore.knowledges.length == 0" class="text-gray-400 text-md">
            将文档、URL、三方数据源上传为文本知识库后，用户发送消息时，Bot
            能够引用文本知识中的内容回答用户问题。
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>

    <KnowledgeList ref="knowledgeRef" />
  </div>
</template>

<style lang="scss" scoped>
.el-collapse-item__header {
  font-weight: 600 !important;
  color: #060709cc;
}

.knowledge-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.knowledge-item {
  transition: all 0.2s ease;
  border: 1px solid #eee;

  &:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  }
}
</style>
