<script>
import { datasetQuerySegments, getPdfUrl, queryTask } from '@/api/generatedApi'
import TextModel from '@/views/knowledge/detail/components/documentDetail/TextModel.vue'
import QAModel from '@/views/knowledge/detail/components/documentDetail/QAModel.vue'

export default {
  name: 'index',
  components: { QAModel, TextModel },
  data() {
    return {
      iframeSrc: window.location.origin,
      newForm: {},
      descriptions: null
    }
  },
  props: {
    knowledgeContent: {
      type: Array,
      default: () => []
    },
    form: {
      type: Object,
      default: () => ({
        docTypeName: '',
        fileName: '',
        createdUser: '',
        createdDate: '',
        taskCode: '',
        splitMode: '',
        processStatus: 1,
        failReason: '',
        knowledgeContent: '',
        originalContent: '',
        documentStatus: '',
        id: ''
      })
    }
  },
  computed: {
    documentStatus() {
      if (this.form.documentStatus === 0 || this.form.documentStatus === '上传中') {
        return '上传中'
      } else if (this.form.documentStatus === 1 || this.form.documentStatus === '成功') {
        return '成功'
      } else if (this.form.documentStatus === -1 || this.form.documentStatus === '失败') {
        return '失败'
      }
      return this.form.documentStatus
    },
    useMineru() {
      if (this.form.splitMode === 1) {
        return '是'
      } else {
        return '否'
      }
    }
  },
  methods: {
    getPdfUrl,
    _getTaskDetail() {
      queryTask({ id: this.form.id }).then(res => {
        const { content } = res.content
        this.newForm = content
      })
    },
    _getSplitResultPreview() {
      console.log(this.form)

      datasetQuerySegments({ documentId: this.form.id }).then(res => {
        const descriptions = res.content.content
        console.log(`datasetQuerySegments`, res)
        this.descriptions = descriptions
        // this.form.knowledgeContent = content
      })
    }
  },
  created() {
    this._getTaskDetail()
    this._getSplitResultPreview()
  }
}
</script>

<template>
  <div class="container upload-info-container">
    <div class="card-body">
      <el-row :gutter="20">
        <!-- 左侧：表单内容和知识内容 -->
        <el-col :span="12">
          <!-- 表单内容 -->
          <el-card class="content-card">
            <div slot="header" class="clearfix">
              <span>基本信息</span>
            </div>
            <el-form ref="form" :model="newForm" label-width="120px">
              <el-form-item label="知识库">
                <el-input v-model="newForm.datasetName" placeholder="" disabled></el-input>
              </el-form-item>

              <el-form-item label="知识文件名称">
                <el-input v-model="newForm.fileName" placeholder="" disabled></el-input>
              </el-form-item>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="上传用户">
                    <el-input v-model="newForm.userName" placeholder="" disabled></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="上传时间">
                    <el-input v-model="newForm.createdDate" placeholder="" disabled></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="任务号">
                    <el-input v-model="newForm.id" placeholder="" disabled></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="分段模式">
                    <el-input v-model="newForm.segmentedMode" placeholder="null" disabled></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="高级模式">
                    <el-input v-model="useMineru" placeholder="" disabled></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="任务状态">
                    <el-input v-model="documentStatus" placeholder="" disabled></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-form-item label="失败原因" v-if="newForm.documentStatus === -1">
                <el-input v-model="newForm.errMessage" placeholder=""></el-input>
              </el-form-item>
            </el-form>
          </el-card>

          <!-- 知识内容 -->
          <el-card class="content-card mt20">
            <div slot="header" class="clearfix">
              <span>知识内容</span>
            </div>
            <div class="knowledge-content" v-if="descriptions">
              <text-model v-if="descriptions.doc_form === 'text_model'" :descriptions="descriptions" />
              <q-a-model v-else-if="descriptions.doc_form === 'qa_model'" :descriptions="descriptions" />
            </div>
            <span v-else>暂无知识内容</span>
          </el-card>
        </el-col>

        <!-- 右侧：原文内容 -->
        <el-col :span="12">
          <el-card class="content-card full-height">
            <div slot="header" class="clearfix">
              <span>原文内容</span>
            </div>
            <iframe
              id="iframe"
              :src="`${iframeSrc}/pdfjs-dist/web/viewer.html?file=${encodeURIComponent(getPdfUrl({ documentId: newForm.id }))}`"
              class="miner-u"
              style="width: 100%; height: 800px;"
            ></iframe>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.content-card {
  margin-bottom: 20px;

  .knowledge-content {
    min-height: 300px;
  }
}

.full-height {
  height: calc(100% - 20px);
}

.mt20 {
  margin-top: 20px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}
</style>
