<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-form ref="form" :model="newForm" label-width="80px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="知识库">
              <el-input v-model="newForm.datasetName" placeholder="" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="知识文件名称">
              <el-input v-model="newForm.fileName" 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.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-row>
          <el-col :span="24" v-if="newForm.documentStatus === -1">
            <el-form-item label="失败原因">
              <el-input v-model="newForm.errMessage" placeholder=""></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="知识内容">
              <div class="is-always-shadow" 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-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="原文内容" />
            <iframe
              id="iframe"
              :src="`${iframeSrc}/pdfjs-dist/web/viewer.html?file=${encodeURIComponent(getPdfUrl({ documentId: newForm.id }))}`"
              class="miner-u el-card is-always-shadow ml20"
              style="width: 98%; height: 800px;"
            ></iframe>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
