<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'
import RenderFile from '@/components/RenderFile/Index.vue'
import MetadataOperator from '@/views/knowledge/detail/components/metaData/MetadataOperator.vue'

export default {
  name: 'index',
  components: { MetadataOperator, QAModel, TextModel, RenderFile },
  data() {
    return {
      iframeSrc: window.location.origin,
      newForm: {},
      descriptions: null
    }
  },
  props: {
    fullscreen: {
      type: Boolean,
      default: false
    },
    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: {
    toSplit() {
      this.$router.push({
        path: '/knowledge/detail/create',
        query: {
          documentId: this.form.id,
          datasetId: this.form.datasetId,
          activeLevel: 1
        }
      })
    },

    getPdfUrl,
    _getTaskDetail() {
      queryTask({ id: this.form.id }).then(res => {
        const { content } = res.content
        this.newForm = content
      })
    },
    _getSplitResultPreview() {
      datasetQuerySegments({ documentId: this.form.id }).then(res => {
        this.descriptions = res.content.content
        // this.form.knowledgeContent = content
      })
    },
    openMetaDrawer() {
      this.$emit('openMetaDrawer')
    }
  },
  filters: {
    filterSegmentedMode(val, simpleDesc = false) {
      switch (val) {
        case 0:
          return '通用'
        case 1:
          return 'Q&A'
        default:
          return ''
      }
    }
  },
  created() {
    this._getTaskDetail()
    this._getSplitResultPreview()
  }
}
</script>

<template>
  <div
    class=" upload-info-container"
    :class="!fullscreen ? 'render-container' : ''"
  >
    <div class="form-container">
      <el-descriptions class="" :column="4">
        <el-descriptions-item label="知识库">
          {{ newForm.datasetName }}
        </el-descriptions-item>
        <el-descriptions-item label="文件名称">
          {{ newForm.fileName }}
        </el-descriptions-item>
        <el-descriptions-item label="上传用户">
          {{ newForm.userName }}
        </el-descriptions-item>
        <el-descriptions-item label="上传时间">
          {{ newForm.createdDate }}
        </el-descriptions-item>

        <el-descriptions-item label="任务号">
          {{ newForm.id }}
        </el-descriptions-item>
        <el-descriptions-item label="分段模式">
          {{ newForm.segmentedMode | filterSegmentedMode }}
        </el-descriptions-item>
        <el-descriptions-item label="高级模式">
          {{ useMineru }}
        </el-descriptions-item>
        <el-descriptions-item label="任务状态">
          {{ documentStatus }}
        </el-descriptions-item>
        <el-descriptions-item
          label="失败原因"
          v-if="newForm.documentStatus === -1"
        >
          {{ newForm.errMessage }}
        </el-descriptions-item>
      </el-descriptions>
    </div>

    <div class="card-body">
      <el-row :gutter="20">
        <!-- 左侧：表单内容和知识内容 -->
        <el-col :span="12">
          <!-- 知识内容 -->
          <div class="content-card el-card mt20">
            <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>
            <div v-else class="p20 flex align-items-c">
              <div class="mr10 fs14">暂无知识内容</div>
              <el-button
                class="line-button render-button"
                @click="toSplit"
                disabled
              >
                去拆分</el-button
              >
            </div>
          </div>
        </el-col>

        <!-- 右侧：原文内容 -->
        <el-col :span="12">
          <div class="content-card el-card full-height mt20">
            <!--            <metadata-operator-->
            <!--              @openMetaDrawer="openMetaDrawer"-->
            <!--            ></metadata-operator>-->
            <render-file :id="newForm.id" />
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.form-container {
  background: #fff;
  padding: 15px;
  border-radius: 8px;
  border: 1px solid #ebeef5;
}

.content-card {
  margin-bottom: 20px;
  border-radius: 8px;
  overflow: hidden;

  .knowledge-content {
    height: calc(100vh - 240px);
    overflow-y: auto;
    //&::-webkit-scrollbar {
    //  width: 4px;
    //}
  }
}

.full-height {
  height: calc(100vh - 240px);
  padding-bottom: 20px;
}

.mt20 {
  margin-top: 20px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}

.clearfix:after {
  clear: both;
}
</style>
