<!-- src/views/knowledge/detail/components/words/ExtractPreview.vue -->
<template>
  <div class="extract-preview">
    <r-dialog
      title="题词结果预览"
      :visible.sync="visible"
      width="700px"
      :close-on-click-modal="false"
    >
      <div class="preview-content">
        <template v-if="extractResults && extractResults.length > 0">
          <r-table
            :columns="columns"
            :data="extractResults"
            :deletion="false"
          ></r-table>
        </template>
        <el-empty
          v-else-if="!extractResults || extractResults.length === 0"
          description="暂无题词结果"
        ></el-empty>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editTable" size="medium">{{
          isEdit ? '保存' : '编辑'
        }}</el-button>
        <el-button
          class="line-button"
          type="primary"
          @click="handleConfirm"
          size="medium"
          >直接上传至知识库</el-button
        >
      </span>
    </r-dialog>
  </div>
</template>

<script>
import { extractUpdate, saveContentToDocument } from '@/api/generatedApi'

export default {
  name: 'ExtractPreview',
  data() {
    return {
      isEdit: false
    }
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    extractResults: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    columns: vm => {
      return [
        {
          prop: 'attribute',
          label: '属性',
          width: 90
        },
        {
          prop: 'attributeContent',
          label: '题词内容',
          render: (h, p) => {
            return h('el-input', {
              props: {
                value: p.row.attributeContent,
                size: 'medium',
                disabled: !vm.isEdit
              },
              on: {
                input: value => {
                  p.row.attributeContent = value
                }
              }
            })
          }
        }
      ]
    }
  },
  methods: {
    editTable() {
      if (!this.isEdit) {
        this.isEdit = true
      } else {
        let params = {
          documentId: this.$route.query.documentId,
          resultDTOList: this.extractResults.map(item => ({
            id: item.id,
            attribute: item.attribute,
            attributeContent: item.attributeContent
          }))
        }
        extractUpdate(params).then(res => {
          if (res) {
            this.$message.success('保存成功')
            // 使用 push 的方式返回，防止出现页面异常跳转的问题
            // this.$router.go(-1)
            // this.$router.replace({
            //   path: '/knowledge/detail',
            //   query: { ...this.$route.query }
            // })
          }
        })
      }
    },
    handleClose() {
      this.$emit('update:visible', false)
    },
    handleConfirm() {
      this.$emit('confirm', this.extractResults)
      this.handleClose()
    }
  }
}
</script>

<style lang="scss" scoped>
.extract-preview {
  .preview-content {
    min-height: 300px;
    padding: 10px;
  }
}
</style>
