<template>
  <div class="app-container search-table-box aidex-table" v-loading="loading" element-loading-text="数据处理中">
    <el-row :gutter="0">
      <!-- 知识库 -->
      <el-col :span="5" style="min-width: 250px">
        <!-- 左侧分类列表 -->
        <div class="knowledge-sidebar">
          <div
            v-for="(item, index) in knowledgeList"
            :key="item.id"
            :class="['knowledge-item', { active: selectedDatasetID === item.dataset_id }]"
            @click="handleKnowledgeSelect(item.dataset_id,item.format_type)"
          >
            <!-- 图标区域 -->
            <div class="knowledge-icon">
              <img v-if="item.icon_url" :src="item.icon_url" alt="图标" class="icon-image"/>
              <i v-else class="el-icon-folder" style="color: #ffc107;"></i>
            </div>
            <!-- 标题区域 -->
            <div class="knowledge-title">
              <div>
                <span class="iten-name">{{ item.name }}</span>
              </div>
              <div class="iten-name-bottom">
                <div>
                  <dict-tag :options="dict.type.datasets_format_type" :value="item.format_type"/>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>

      <!--知识库文件-->
      <el-col :span="19">
        <div class="knowledge-doc">
          <text-doc v-if="openType===0" ref="textDoc"/>
          <xlsx-doc v-if="openType===1" ref="xlsxDoc"/>
          <images-doc v-if="openType===2" ref="imagesDoc"/>
          <div v-else class="no-data">
            <el-empty :image-size="50"/>
          </div>
        </div>
      </el-col>

    </el-row>

  </div>
</template>

<script>
import {listKnowledge} from "@/api/business/aimodel/knowledgeDocument"
import TextDoc from "@/views/business/aimodel/knowledgeDocument/textDoc.vue";
import ImagesDoc from "@/views/business/aimodel/knowledgeDocument/imagesDoc.vue";
import XlsxDoc from "@/views/business/aimodel/knowledgeDocument/xlsxDoc.vue";

export default {
  name: "knowledgeDocument",
  components: {
    TextDoc,
    ImagesDoc,
    XlsxDoc
  },
  dicts: ['datasets_format_type'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 知识库列表
      knowledgeList: [],
      selectedDatasetID: null,// 初始未选中
      openType: null
    };
  },
  created() {
    this.getKnowledgeList();
  },
  methods: {
    /** 查询知识库列表 */
    getKnowledgeList() {
      listKnowledge().then(response => {
        this.knowledgeList = response.data;
        // 自动选中第一个分类
        if (this.knowledgeList.length > 0) {
          this.selectedDatasetID = this.knowledgeList[0].dataset_id;
          this.openType = this.knowledgeList[0].format_type;
        }
        this.handleKnowledgeSelect(this.selectedDatasetID, this.openType);
        this.loading = false;
      });
    },
    /*点击菜单*/
    handleKnowledgeSelect(id, openType) {
      this.selectedDatasetID = id;
      this.openType = openType;
      if (openType === 0) {
        this.openRightListText(this.selectedDatasetID)
      }else if (openType === 1){
        this.openRightListXlsx(this.selectedDatasetID)
      }else if (openType === 2){
        this.openRightListImages(this.selectedDatasetID)
      }
    },

    /*查看知识库文件列表-文本类型*/
    openRightListText(datasetId) {
      this.$nextTick(() => {
        this.$refs.textDoc.selectedDatasetDoc(datasetId);
      });
    },

    /*查看知识库文件列表-表格类型*/
    openRightListXlsx(datasetId) {
      this.$nextTick(() => {
        this.$refs.xlsxDoc.selectedDatasetDoc(datasetId);
      });
    },

    /*查看知识库文件列表-图片类型*/
    openRightListImages(datasetId) {
      this.$nextTick(() => {
        this.$refs.imagesDoc.selectedDatasetDoc(datasetId);
      });
    },

  }
};
</script>

<style scoped>

.knowledge-sidebar {
  padding: 15px 0px 15px 15px;
  height: calc(100vh - 75px);
  background-color: #FFFFFF;
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
  overflow: auto;
  border-right: 2px solid #72b3f5;

  .knowledge-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    margin-bottom: 10px;
    border-bottom-left-radius: 15px;
    border-top-left-radius: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .knowledge-item:hover {
    background: #e9ecef;
  }

  .knowledge-item.active {
    background: #72b3f5;
    color: white;
  }

  .knowledge-icon {
    width: 30px;
    height: 30px;
    margin-right: 10px;
  }

  .icon-image {
    width: 35px;
    height: 35px;
    object-fit: cover;
    border-radius: 4px;
  }

  .knowledge-title {
    font-size: 14px;
    line-height: 1.5;
  }
}

.knowledge-doc {
  background-color: #FFFFFF;
  padding: 15px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  height: calc(100vh - 75px);

  .no-data {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }
}

.iten-name-bottom {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;

  .item-row-div-three-tag {
    font-size: 10px;
    height: 18px;
    line-height: 18px;
  }
}

</style>
