<template>
  <div>
    <div class="menu-title">
      低资源场景知识抽取
    </div>
    <div class="menu-content">
      <div style="margin: 0px 0 20px 0;overflow: hidden">
        <el-upload
            style="float: left;margin-right: 10px"
            class="upload-demo"
            action="#"
            multiple
            :auto-upload="false"
            :limit="3"
            :show-file-list="false"
            :on-change="handleFileChange"
            :file-list="fileList">
          <el-button type="primary" title='上传“低资源”场景测试数据'>上传数据</el-button>
        </el-upload>
      </div>
      <div class="menu-table">
        <el-table :data="resultCmd.items" style="width: 60%" height="350">
          <el-table-column prop="text" align="center" label="文本"></el-table-column>
          <el-table-column prop="spo[0]" align="center" label="头实体"></el-table-column>
          <el-table-column prop="spo[1]" align="center" label="关系"></el-table-column>
          <el-table-column prop="spo[2]" align="center" label="尾实体"></el-table-column>
        </el-table>
        <div id="echart"></div>
      </div>
      <div style="margin: 20px 0 20px 0">
        <el-button type="primary" title='开始“低资源”场景知识抽取' @click="validateData">开始验证</el-button>
      </div>
      <div>
        <el-table :data="resultCmd1.items" style="width: 100%" height="350">
          <el-table-column prop="text" align="center" label="文本"></el-table-column>
          <el-table-column prop="spo[0]" align="center" label="头实体"></el-table-column>
          <el-table-column prop="spo[1]" align="center" label="关系"></el-table-column>
          <el-table-column prop="spo[2]" align="center" label="尾实体"></el-table-column>
          <el-table-column align="center" label="预测结果">
            <template slot-scope="scope">
              <label
                  :style="scope.row.ycspoflag?'':'color:red'">({{ scope.row.ycspo[0] }},{{ scope.row.ycspo[1] }},{{ scope.row.ycspo[2] }})</label>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="result" v-if="resultCmd1.zql ">“低资源”场景知识抽取结果： 准确率{{
          resultCmd1.zql
        }}，正确条数{{ resultCmd1.trueTotal }}，总条数{{ resultCmd1.total }}
      </div>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request';

var _this;
export default {
  name: "company",
  data() {
    return {
      fileList: [],
      resultCmd: {},
      resultCmd1: {}
    }
  },
  mounted() {
    _this = this;
    _this.queryData();
  },
  methods: {
    handleFileChange(file) {
      _this.fileList = [file];
      _this.uploadFile(file.raw);
    },
    queryData() {
      request({
        url: '/indicator/indicator1_1',
        method: 'get',
        data: {}
      }).then(res => {
        _this.resultCmd = res.data;
        _this.initEchart();
        _this.validateData();
      });
    },
    uploadFile(fileItem) {
      let formData = new FormData();
      formData.append("file", fileItem);
      request({
        url: '/indicator/indicator1',
        method: 'put',
        data: formData
      }).then(res => {
        _this.resultCmd = res.data;
        _this.resultCmd1 = {};
        _this.initEchart();
      });
    },
    validateData() {
      _this.resultCmd1 = _this.resultCmd
      _this.resultCmd1.total = _this.resultCmd1.items.length;
      _this.resultCmd1.trueTotal = 0
      _this.resultCmd1.items.forEach(item => {
        if (item.ycspoflag) {
          _this.resultCmd1.trueTotal++;
        }
      })
    },
    initEchart() {
      var xAxis = [];
      var data = []
      for (var key in _this.resultCmd.relations) {
        xAxis.push(key);
        data.push(_this.resultCmd.relations[key])
      }

      var chart = this.$echarts.init(document.getElementById("echart"));
      var option = {
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: xAxis,
          axisLabel: {interval: 0, rotate: 30}
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: data,
            type: 'bar'
          }
        ]
      };
      chart.setOption(option);
    }
  }
}
</script>

<style scoped lang="scss">
.result {
  text-align: center;
  margin-top: 25px;
  font-size: 16px;
  color: #5c5c5c;
}

#echart {
  width: 40%;
  height: 350px;
  margin-left: 30px;
}

.menu-table {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.menu-table th div, .menu-table td div {
  text-align: center;
}
</style>
