<!--直接上传到知识库之前的页面  预览页面-->
<template>
  <div class="render-container">
    <div slot="header" class="clearfix">
      <h3>上传至知识库</h3>
    </div>

    <div class="flex align-items-s justify-content-b mt20">
      <div
        class="settings"
        style="width: 49.5%;,max-height: calc(100vh - 110px);overflow-y: auto;overflow-x: hidden"
      >
        <div class="setting-item mb10">
          <div class="title">分段设置</div>
          <div class="body">
            <div class="body-title flex">
              <svg-icon
                icon-class="setting-gear"
                class-name="el-card mr10 is-always-shadow"
                style="width: 30px;height: 30px;padding: 5px"
              ></svg-icon>
              <div>
                <div>通用</div>
                <p class="theme-primary-desc-text mt10">
                  通用文本分块模式，检索和召回的块是相同的
                </p>
              </div>
            </div>
            <div class="body-content">
              <el-form inline label-position="top" :model="form">
                <el-form-item label="分段标识符" prop="separator">
                  <el-input size="mini" v-model="form.separator"></el-input>
                </el-form-item>
                <el-form-item label="分段最大长度(tokens)" prop="maxTokens">
                  <el-input-number
                    controls-position="right"
                    style="width: 100%"
                    size="mini"
                    :max="4000"
                    :min="50"
                    placeholder="≥50 或 ≤4000"
                    v-model="form.maxTokens"
                  ></el-input-number>
                </el-form-item>
                <el-form-item label="分段重叠长度(tokens)" prop="chunkOverlap">
                  <el-input-number
                    style="width: 100%"
                    controls-position="right"
                    size="mini"
                    v-model="form.chunkOverlap"
                  ></el-input-number>
                </el-form-item>
              </el-form>

              <!--          文本预处理规则-->
              <div>
                <el-divider content-position="left" style="margin: 0"
                  ><h5>文本预处理规则</h5></el-divider
                >
                <el-checkbox
                  style="width: 100%"
                  class="mv10"
                  :value="1"
                  v-model="form.removeExtraSpaces"
                  label="替换掉连续的空格、换行符和制表符"
                >
                </el-checkbox>
                <el-checkbox
                  style="width: 100%"
                  v-model="form.removeUrlsEmails"
                  :value="1"
                  label="删除所有 URL 和电子邮件地址"
                ></el-checkbox>
                <el-divider></el-divider>
              </div>
              <!--使用Q&A语言-->
              <div>
                <!--                <el-checkbox-->
                <!--                  disabled-->
                <!--                  style="width: 100%"-->
                <!--                  label="删除所有 URL 和电子邮件地址"-->
                <!--                >-->
                <!--                  使用 Q&A 分段，语言-->
                <!--                  <el-select size="mini" disabled></el-select>-->
                <!--                </el-checkbox>-->
              </div>
              <!--              预览与重置-->
              <div class="mt10">
                <el-button
                  class="line-button"
                  size="medium"
                  @click="review_logs"
                  >预览</el-button
                >
                <el-button size="medium" @click="resetForm">重置</el-button>
              </div>
            </div>
          </div>
        </div>

        <div class="buttons text-right">
          <el-button class="line-button" size="medium" @click="saveUs"
            >保存并处理</el-button
          >
        </div>
      </div>
      <div
        style="width: 49.5%;height: calc(100vh - 110px)"
        class="el-card review"
      >
        <div class="title">
          {{ documentDetail.knowledgeName }}

          <span class="block" v-if="viewsDetail.total_segments">
            预估块{{ viewsDetail.total_segments }}
          </span>
        </div>
        <div
          class="review-body"
          style="height: calc(100% - 40px);overflow-y:auto"
        >
          <div v-for="(item, index) in viewsDetail.preview" class="review-item">
            <div class="item-title mb10 flex ">
              <span>
                <svg-icon icon-class="chart"></svg-icon>
                Chunk-{{ index + 1 }}
              </span>
              <span class="ml20">{{ item.content.length }}字符</span>
            </div>
            <div
              style="padding: 0"
              class="item-body mb10 view-body"
              v-html="item.content.replace(/<sc/g, '< sc ')"
            ></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getDatasetById, datasetDocumentEx } from '@/api/generatedApi'

import {
  preprocessEmbedding,
  splitEmbedding,
  extractEmbedding,
  directEmbedding,
  segmentEstimate,
  preprocessSegmentEstimate,
  splitSegmentEstimate,
  extractSegmentEstimate
} from '@/api/generatedApi/embedding'

// preprocessEmbedding   预览页面
// embedding  题词拆分

export default {
  name: 'reviewKnowledge',
  data() {
    return {
      reset: {
        mode: 'custom',
        removeExtraSpaces: true,
        removeUrlsEmails: false,
        separator: '###',
        maxTokens: 1000,
        chunkOverlap: 50
      },

      form: {
        mode: 'custom',
        removeExtraSpaces: true,
        removeUrlsEmails: false,
        separator: '###',
        maxTokens: 1000,
        chunkOverlap: 50
      },
      datasetDetail: {},
      documentDetail: {},
      viewsDetail: {}
    }
  },
  props: {},
  watch: {},
  components: {},
  filters: {},
  methods: {
    resetForm() {
      this.form = JSON.parse(JSON.stringify(this.reset))
    },

    review_logs() {
      let { documentId, active } = this.$route.query
      let api = segmentEstimate
      switch (active) {
        case '0':
          api = segmentEstimate
          break
        case '1':
          api = preprocessSegmentEstimate
          break
        case '2':
          api = splitSegmentEstimate
          break
        case '3':
          api = extractSegmentEstimate
          break
      }
      console.log(api)
      api({
        documentId,
        segmentConfig: {
          ...this.form,
          removeExtraSpaces: this.form.removeExtraSpaces ? 1 : 0,
          removeUrlsEmails: this.form.removeUrlsEmails ? 1 : 0
        }
      }).then(res => {
        this.viewsDetail = res.content.content
      })
    },

    // 获取文档详情
    getDocumentDetail() {
      let { documentId } = this.$route.query
      datasetDocumentEx({ documentId }).then(res => {
        if (res) {
          this.documentDetail = res.content.content
        }
      })
    },

    // 获取知识库详情
    getDatasetDetail() {
      getDatasetById({ id: this.$route.query.datasetId }).then(res => {
        if (res) {
          this.datasetDetail = res.content.content
        }
      })
    },

    // 保存 处理
    saveUs() {
      let { documentId, active } = this.$route.query
      let api = directEmbedding
      switch (active) {
        case '0':
          api = directEmbedding
          break
        case '1':
          api = preprocessEmbedding
          break
        case '2':
          api = splitEmbedding
          break
        case '3':
          api = extractEmbedding
          break
      }

      api({
        documentId,
        segmentConfig: {
          ...this.form,
          removeExtraSpaces: this.form.removeExtraSpaces ? 1 : 0,
          removeUrlsEmails: this.form.removeUrlsEmails ? 1 : 0
        }
      }).then(res => {
        if (res) {
          this.$router.push({
            path: '/knowledge/detail',
            query: {
              datasetId: this.$route.query.datasetId
            }
          })
        }
      })
    }
  },
  created() {
    this.getDatasetDetail()
    this.getDocumentDetail()
  },
  mounted() {},
  computed: {}
}
</script>
<style scoped lang="scss">
@import '@/assets/sass/renderSass/theme.scss';

.el-divider--horizontal {
  margin: 8px 0;
}
.render-container {
  & .settings {
    & .setting-item {
      & .title {
        font-weight: 600;
        font-size: 14px;
      }
      & .body {
        border: 1px solid #ebeef5;
        margin-top: 5px;
        border-radius: 8px;
        & .body-title {
          background: #f0f4fa;
          padding: 10px;

          & div {
            font-weight: 600;
            font-size: 13px;
          }
          & p {
            font-size: 12px;
            font-weight: unset;
          }
        }
        & .body-content {
          padding: 10px;
        }
      }
    }
  }

  & .review {
    & .title {
      height: 40px;
      line-height: 40px;
      border-bottom: 1px solid #ebeef5;
      font-weight: 600;
      font-size: 15px;
      padding: 0 10px;
      color: $--color-primary-light;
      & .block {
        font-size: 11px;
        padding: 2px 8px;
        border: 1px solid #ebeef5;
        border-radius: 5px;
        background: #ebeef5;
        color: #676f83;
      }
    }
    & .review-body {
      & .review-item {
        padding: 10px;
        & .item-title {
          font-size: 12px;
          color: #676f83;
        }
        & .item-body {
          font-size: 14px;
          font-weight: 400;
          line-height: 20px;
        }
        &:hover {
          background: #f0f4fa;
        }
      }
    }
  }
}
</style>
