<template>
  <div class="view-KnowledgeProcessing">
    <div class="common-box">
      <div class="common-box-button">
        <el-button type="primary" @click="onNext" v-if="isNext">下一步</el-button>
        <el-button type="primary" @click="onSubmit" v-if="!isNext">确认</el-button>
      </div>
    </div>
    <div class="container">
      <p>“任务名称”知识加工</p>
      <p style="font-size: 14px">{{ isNext ? '1.原文分句' : '2.实体及关系识别' }}</p>
    </div>
    <div class="first-content" v-if="isNext">
      <div class="view-KnowledgeProcessing-content">
        <div class="left-content">
          <div class="view-dataType-title-btn">
            <span>原文</span>
            <el-button type="primary">下载</el-button>
          </div>
          <el-input type="textarea" :rows="20" placeholder="请输入内容" v-model="textarea"></el-input>
        </div>
        <div class="right-content">
          <div class="view-dataType-title-btn">
            <span>分句</span>
            <el-button type="primary">下载</el-button>
            <el-button type="primary">导入</el-button>
          </div>
          <el-table ref="elTablet" :data="tableData1" border stripe :header-cell-style="{ color: '#515a6e', background: '#f5f5f5' }" height="calc(100vh - 460px)" :show-header="false">
            <el-table-column prop="sentence" label="分句">
              <template slot-scope="scope">
                <el-input v-model="scope.row.sentence" class="input-select"> </el-input>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="150">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="update(scope.row)">修改</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div class="tow-content" v-if="!isNext">
      <div class="tag-content">
        <el-tag class="tag-darks" effect="dark" color="rgba(194, 128, 255, 1)">主体</el-tag>
        <el-tag class="tag-darks" effect="dark" color="rgb(230, 162, 60)">客体</el-tag>
        <el-tag class="tag-darks" effect="dark" color="#bd003f">关系</el-tag>
      </div>
      <el-table ref="elTablet" :data="tableData2" border stripe :header-cell-style="{ color: '#515a6e', background: '#f5f5f5' }" height="calc(100vh - 460px)">
        <el-table-column prop="sentence" label="原句">
          <template slot-scope="scope">
            <div v-html="findSentence(scope.row)"></div>
            <!-- <el-tag class="tag-darks" effect="dark" color="rgba(194, 128, 255, 1)">{{ scope.row.subject }}</el-tag>
            <el-tag class="tag-darks" effect="dark" color="rgb(230, 162, 60)">{{ scope.row.object }}</el-tag>
            <el-tag class="tag-darks" effect="dark" color="#bd003f" :hit="false">{{ scope.row.relation }}</el-tag> -->
          </template>
        </el-table-column>
        <el-table-column prop="subject" label="主体" width="350">
          <template slot-scope="scope">
            <el-input v-model="scope.row.subject" class="input-select" @blur="changeValue(scope.row)"> </el-input>
          </template>
        </el-table-column>
        <el-table-column prop="object" label="客体" width="350">
          <template slot-scope="scope">
            <el-input v-model="scope.row.object" class="input-select" @blur="changeValue(scope.row)"> </el-input>
          </template>
        </el-table-column>
        <el-table-column prop="relation" label="关系" width="350">
          <template slot-scope="scope">
            <el-input v-model="scope.row.relation" class="input-select" @blur="changeValue(scope.row)"> </el-input>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { tableData1, tableData2 } from '../index'
export default {
  name: 'KnowledgeProcessing',

  data() {
    // 这里存放数据
    return {
      isNext: true,
      tableData1: tableData1,
      tableData2: tableData2,
      textarea:
        '这是一段文本段落pdfexcel原文原文原文，内容来源于期刊专栏记录等，内容为标准术语故障案例术语知识百科。这是一段文本段落pdfexcel原文原文原文，内容来源于期刊专栏记录等，内容为标准术语故障案例术语知识百科。这是一段文本段落pdfexcel原文原文原文，内容来源于期刊专栏记录等，内容为标准术语故障案例术语知识百科。这是一段文本段落pdfexcel原文原文原文，内容来源于期刊专栏记录等，内容为标准术语故障案例术语知识百科。这是一段文本段落pdfexcel原文原文原文，内容来源于期刊专栏记录等，内容为标准术语故障案例术语知识百科。这是一段文本段落pdfexcel原文原文原文，内容来源于期刊专栏记录等，内容为标准术语故障案例术语知识百科。这是一段文本段落pdfexcel原文原文原文，内容来源于期刊专栏记录等，内容为标准术语故障案例术语知识百科。这是一段文本段落pdfexcel原文原文原文，内容来源于期刊专栏记录等，内容为标准术语故障案例术语知识百科。这是一段文本段落pdfexcel原文原文原文，内容来源于期刊专栏记录等，内容为标准术语故障案例术语知识百科。这是一段文本段落pdfexcel原文原文原文，内容来源于期刊专栏记录等，内容为标准术语故障案例术语知识百科。这是一段文本段落pdfexcel原文原文原文，内容来源于期刊专栏记录等，内容为标准术语故障案例术语知识百科。这是一段文本段落pdfexcel原文原文原文，内容来源于期刊专栏记录等，内容为标准术语故障案例术语知识百科。这是一段文本段落pdfexcel原文原文原文，内容来源于期刊专栏记录等，内容为标准术语故障案例术语知识百科。这是一段文本段落pdfexcel原文原文原文，内容来源于期刊专栏记录等，内容为标准术语故障案例术语知识百科。这是一段文本段落pdfexcel原文原文原文，内容来源于期刊专栏记录等，内容为标准术语故障案例术语知识百科。这是一段文本段落pdfexcel原文原文原文，内容来源于期刊专栏记录等，内容为标准术语故障案例术语知识百科。这是一段文本段落pdfexcel原文原文原文，内容来源于期刊专栏记录等，内容为标准术语故障案例术语知识百科。这是一段文本段落pdfexcel原文原文原文，内容来源于期刊专栏记录等，内容为标准术语故障案例术语知识百科。这是一段文本段落pdfexcel原文原文原文，内容来源于期刊专栏记录等，内容为标准术语故障案例术语知识百科。这是一段文本段落pdfexcel原文原文原文，内容来源于期刊专栏记录等，内容为标准术语故障案例术语知识百科。这是一段文本段落pdfexcel原文原文原文，内容来源于期刊专栏记录等，内容为标准术语故障案例术语知识百科。这是一段文本段落pdfexcel原文原文原文，内容来源于期刊专栏记录等，内容为标准术语故障案例术语知识百科。这是一段文本段落pdfexcel原文原文原文，内容来源于期刊专栏记录等，内容为标准术语故障案例术语知识百科。这是一段文本段落pdfexcel原文原文原文，内容来源于期刊专栏记录等，内容为标准术语故障案例术语知识百科。这是一段文本段落pdfexcel原文原文原文，内容来源于期刊专栏记录等，内容为标准术语故障案例术语知识百科。这是一段文本段落pdfexcel原文原文原文，内容来源于期刊专栏记录等，内容为标准术语故障案例术语知识百科。这是一段文本段落pdfexcel原文原文原文，内容来源于期刊专栏记录等，内容为标准术语故障案例术语知识百科。这是一段文本段落pdfexcel原文原文原文，内容来源于期刊专栏记录等，内容为标准术语故障案例术语知识百科。'
    }
  },
  mounted() {},
  methods: {
    fetchTableData() {},
    onSubmit() {
      this.$emit('onSubmit', '知识入库')
    },
    update() {},
    onNext() {
      this.isNext = false
    },
    findSentence(row) {
      let strs = row.sentence
        .replace(row.subject, `<span class="tag-darks" style="background-color: rgba(194, 128, 255, 1);height: 32px;padding: 0px 10px;display: inline-block;line-height: 32px;">${row.subject}</span>`)
        .replace(row.object, `<span class="tag-darks" style="background-color: rgb(230, 162, 60);height: 32px;padding: 0px 10px;display: inline-block;line-height: 32px;">${row.object}</span>`)
        .replace(row.relation, `<span class="tag-darks"  style="background-color: #bd003f;height: 32px;padding: 0px 10px;display: inline-block;line-height: 32px;">${row.relation}</span>`)
      return strs
    },
    changeValue(row) {
      row.sentence = row.subject + row.relation + row.object
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../index.scss';
</style>
