<template>
  <div>
    <div class="menu-title">
      三元组高速抽取
    </div>
    <div class="menu-content">
      <div style="margin: 0px 0 20px 0">
        <el-upload
            style="float: left;margin-right: 10px"
            class="upload-demo"
            :auto-upload="false"
            :show-file-list="false"
            action="#"
            multiple
            :limit="3"
            :on-change="handleFileChange"
            :file-list="fileList">
          <el-button type="primary" title='上传高速抽取测试数据'>上传数据</el-button>
        </el-upload>
        <el-button type="primary" title='开始三元组的高速抽取' :disabled="!uploadFlag" @click="validateData">开始抽取
        </el-button>
      </div>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-table :data="tableData" style="width: 100%" border class="text-table" id="text-table-id">
            <el-table-column type="index" label="行号" width="60"></el-table-column>
            <el-table-column prop="text" label="文本" width="200">
              <template slot-scope="scope" :title="scope.row.text">{{
                  scope.row.text.substring(0, 120)
                }}{{ scope.row.text.length > 120 ? '...' : '' }}
              </template>
            </el-table-column>
            <el-table-column prop="groupStrCut" label="三元组">
              <template slot-scope="scope">
                <div class="tag-item" v-for="(tag,index) in scope.row.sro_list" :key="index">
                  {{ tag.object }}-{{ tag.relation }}-{{ tag.subject }}
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="12">
          <el-descriptions class="margin-top desc2" :column="2" border>
            <el-descriptions-item>
              <template slot="label">准确率：</template>
              <label>{{ correctRate }}%</label>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">耗时：</template>
              <div>{{ time }}s</div>
            </el-descriptions-item>
          </el-descriptions>
          <div class="graph-box">
            <graph ref="graph"></graph>
          </div>
        </el-col>
      </el-row>
      <div class="label-result" v-show="resultFlag">每千条文本知识抽取耗时{{ qths }}秒</div>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request';
import graph from "@/components/graph/Graph";

var _this;
export default {
  components: {
    'graph': graph,
  },
  name: "algorithmSpeedVerification",
  data() {
    return {
      uploadFlag: false,
      correctRate: 0,
      time: 0,
      fileList: [],
      jsonObj: {},
      tableData: [],
      resultFlag: false,
      everyThousandTime: 0,
      rateAll: [],
      timeAll:[],
      qths:0
    }
  },
  mounted() {
    _this = this;
  },
  methods: {
    validateData() {
      _this.$message.info("开始验证");
      let pageNo = 1, pageSize = 5;
      let _index = 0;
      let _time = 0;
      // let timeSt = setInterval(function () {
      //   _this.time = _time++ / 10;
      // }, 100);
        _this.tableData = [];
      let st = setInterval(function () {
        _this.correctRate = (parseFloat(_this.rateAll[_index]) * 100).toFixed(2);
        _this.time = _this.timeAll[_index];
        _index += 5;
        _this.tableData = _this.tableData.concat(_this.jsonObj.items.slice((pageNo - 1) * pageSize, pageNo * pageSize));
        _this.$nextTick(() => {
          var div = document.getElementById('text-table-id');
          div.scrollTop = div.scrollHeight;
        })

        pageNo++;
        if (_index >= _this.jsonObj.items.length) {
          clearInterval(st);
          // clearInterval(timeSt);
          _this.startInitGraph();
          _this.$message.success("验证完毕");

          _this.resultFlag = true;
          // _this.everyThousandTime = (_this.time / 1.2).toFixed(2);
        }
      }, 40);
    },
    handleFileChange(file) {
      _this.fileList = [file];
      _this.correctRate = 0;
      _this.time = 0;
      _this.resultFlag = false;
      _this.everyThousandTime = 0;
      _this.tableData = [];
      _this.$refs['graph'].initGraph({
        nodes: [],
        edges: []
      }, true, null, true);
      _this.queryData(file.raw);
    },
    queryData(fileItem) {
      let formData = new FormData();
      formData.append("file", fileItem);
      let _msg = _this.$message({
        message: '文件正在上传，请耐心等待',
        type: 'info',
        duration: 0
      });
      request({
        url: '/indicator/indicator10',
        method: 'put',
        data: formData
      }).then(res => {
        _msg.close();
        _this.$message.success("上传成功");
        _this.rateAll = [];
        _this.timeAll = [];
          res.data.items.forEach(item => {
              _this.rateAll.push(item.precision);
              _this.timeAll.push(item.hshi)
          })
          _this.qths = res.data.qths
        /**
         * nodes:[],
         * relations: [],
         * items: []
         */
        res.data.relations = res.data.relations.slice(0, 100);
        _this.jsonObj = res.data;
        _this.uploadFlag = true;
      });
    },
    startInitGraph() {
      let _nodes = [], _edges = [];
      let ids = [];
      _this.jsonObj.relations.forEach(edge => {
        ids.push(edge.srcId);
        ids.push(edge.dstId);
        _edges.push({
          source: edge.srcId,
          target: edge.dstId,
          label: edge.edgeName
        });
      });

      _this.jsonObj.nodes.forEach(node => {
        if (ids.indexOf(node.vid) >= 0) {
          _nodes.push({
            label: node.properties.name,
            id: node.vid
          });
        }
      });
      _this.$refs['graph'].initGraph({
        nodes: _nodes,
        edges: _edges
      }, true, null, true);
    }
  }
}
</script>

<style scoped lang="scss">
.label-result {
  padding: 15px 0;

  font-size: 15px;
  text-align: center;
}
.tag-item {
  word-break: break-all;
  float: left;
  background-color: #ecf5ff;
  border-color: #d9ecff;
  padding: 0 5px;
  line-height: 40px;
  font-size: 14px;
  border-width: 1px;
  border-style: solid;
  border-radius: 5px;
  margin: 0 4px 4px 0;
  max-width: 430px;
  min-width: 50px;
}

.result {
  text-align: center;
  margin-top: 25px;
  font-size: 16px;
  color: #5c5c5c;
}

.text-table {
  height: 600px;
  margin-top: 0;
  overflow-y: auto;
}

.graph-box {
  margin-top: 20px;
  width: 100%;
  height: 530px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  position: relative;
}
</style>
