<template>
  <div class="search-table-box aidex-table" v-loading="textLoading" element-loading-text="数据处理中">
    <div class="right-doc" v-if="webUrl!=null">
      <div class="right-doc-top">
        <div class="right-dov-top-icon">
          <img v-if="documentInfo.icon_url" :src="documentInfo.icon_url" alt="图标" class="icon-image"/>
          <i v-else class="el-icon-tickets" style="color: #ffc107;"></i>
        </div>
        <div>
          {{ documentInfo.name == null ? '----' : documentInfo.name }}
        </div>
<!--        <div class="right-doc-top-button-edit" >
          <el-button icon="el-icon-edit" type="text"/>
        </div>-->
        <div class="right-doc-top-button-del">
          <el-button type="primary" size="small" @click="handleDownloadOLd" >
            <i class="el-icon-download"/>
            下载源文件
          </el-button>
<!--          <el-button type="primary" size="small" @click="delDocument" >
            <i class="el-icon-delete"/>
            删除
          </el-button>-->
        </div>
      </div>
      <div class="right-doc-bottom">
        <div class="right-doc-bottom-info">
          <div class="text-info">
            <document-previewer :preview-url="webUrl" :web-url="webUrl" />
          </div>
        </div>
      </div>
    </div>
    <div class="right-doc" v-else>
      <el-empty :image-size="50" class="no-data"/>
    </div>
  </div>
</template>

<script>
import {listKnowledgeDocText} from "@/api/business/aimodel/knowledgeDocument"
import DocumentPreviewer  from "@/views/business/aimodel/viewer/DocumentPreviewer.vue";

export default {
  name: "xlsxDoc",
  components: { DocumentPreviewer },
  data() {
    return {
      // 遮罩层
      textLoading: true,
      knowledgeDocList: [],
      documentInfo: {},
      webUrl: ""//下载地址
    };
  },
  methods: {
    selectedDatasetDoc(datasetId) {
      this.getKnowledgeDocTextList(datasetId);
    },
    /** 查询知识库列表 */
    getKnowledgeDocTextList(datasetId) {
      listKnowledgeDocText({"dataset_id": datasetId}).then(response => {
        this.knowledgeDocList = response.data;
        if (this.knowledgeDocList.length > 0) {
          this.webUrl = this.knowledgeDocList[0].web_url;
          this.documentInfo = this.knowledgeDocList[0];
        }
        this.textLoading = false;
      });
    },
    handleDownloadOLd() {
      window.open(this.webUrl, '_blank')
    }

  }
};
</script>

<style scoped>

.right-doc {
  height: calc(100vh - 105px);
  background-color: #FFFFFF;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border: 1px solid #52649a21;
  display: flex;
  flex-direction: column; /* 设置垂直排列 */

  .right-doc-top {
    height: 60px;
    border-bottom: 1px solid #52649a21;
    display: flex;
    align-items: center;
    padding: 10px 10px;
    color: #0f1528d1;
    font-size: 14px;

    .right-dov-top-icon {
      width: 20px;
    }

    .right-doc-top-button-edit {
      margin-left: 10px;
    }

    .right-doc-top-button-del {
      margin-left: auto; /* 使删除按钮右对齐 */
    }
  }

  .right-doc-bottom {
    flex: 1;

    .right-doc-bottom-info {
      height: calc(100vh - 165px);
      padding: 16px;

      .text-info {
        height: 100%;
        background-color: #5a6ca70a;
        border: 1px solid #52649a21;
        border-radius: 8px;
        color: #0f1528d1;
        font-size: 14px;
        line-height: 20px;
        margin-bottom: 8px;
        padding: 8px;
        position: relative;
        word-break: break-word;
      }
    }
  }
}

</style>
