<!-- src/views/knowledge/detail/components/words/ExtractPreview.vue -->
<template>
  <div class="extract-preview">
    <el-dialog title="题词结果预览" :visible.sync="visible" width="700px" :close-on-click-modal="false">
      <div class="preview-content">
        <template v-if="extractResults && extractResults.length > 0">
          <el-table :data="extractResults" border style="width: 100%">
            <el-table-column prop="attribute" label="属性" align="center" width="180"></el-table-column>
            <el-table-column prop="attributeContent" label="题词内容" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.attributeContent"></el-input>
              </template>
            </el-table-column>
          </el-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="handleConfirm">完成</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'ExtractPreview',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    extractResults: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    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>
