<template>
  <div class="view-KnowledgeProcessing">
    <div class="common-box">
      <div class="common-box-button">
        <el-button type="primary" @click="onSubmit">确认</el-button>
      </div>
    </div>
    <div class="container">
      <p>“任务名称”知识入库</p>
    </div>
    <div class="tow-content">
      <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)" :show-header="false" style="width: 60%">
        <el-table-column prop="sentence" label="原句">
          <template slot-scope="scope">
            <div v-html="findSentence(scope.row)"></div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

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

  data() {
    // 这里存放数据
    return {
      isNext: true,
      tableData2: tableData2
    }
  },
  mounted() {},
  methods: {
    fetchTableData() {},
    onSubmit() {
      this.$confirm('"任务名称"已入库', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$emit('onSubmit', '新建任务')
        })
        .catch(() => {})
    },
    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
    }
  }
}
</script>

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