<template>
  <div>
    <div class="menu-title">
      知识图谱推理
    </div>
    <div class="menu-content">
      <el-row :gutter="5" style="padding-bottom: 20px">
        <el-col :span="7">
          <div>
            <label>请选择知识图谱：</label>
            <el-select v-model="qo.select" placeholder="选择图谱">
              <el-option label="装备知识图谱" value="1"></el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="4">
          <div>
            <label>请选择文件：</label>
            <el-upload
                ref="upload1" style="display: inline-block"
                :auto-upload="false"
                action="#"
                :on-change="handleFileChange"
                :limit="2"
                :show-file-list="false">
              <el-button type="primary">上传文件</el-button>
            </el-upload>
          </div>
        </el-col>
        <el-col :span="13">
          <el-button :type="items.length > 0 ?'primary':'info'" style="float:right;" @click="startReason">开始推理</el-button>
        </el-col>
      </el-row>
      <el-row :gutter="5">
        <el-col :span="12">
          <el-table :data="items" style="width: 100%" height="495" border>
            <el-table-column type="index" label="行号" width="70"></el-table-column>
            <el-table-column prop="qu" label="问题"></el-table-column>
            <el-table-column prop="an" label="正确答案"></el-table-column>
          </el-table>
        </el-col>
        <el-col :span="12">
          <div class="path-right-box">
            <div id="echart"></div>
            <div style="width: calc(100% - 30px);margin: 30px">
              <el-table :data="tableData" style="width: 100%;">
                <el-table-column prop="tl_len" label="推理路径长度"></el-table-column>
                <el-table-column prop="hits1" label="hits@1"></el-table-column>
                <el-table-column prop="hits2" label="hits@5"></el-table-column>
                <el-table-column prop="hits3" label="hits@10"></el-table-column>
              </el-table>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-descriptions class="margin-top" :column="1" border v-show="predictFlag">
        <el-descriptions-item label="问题">
          <el-select v-model="activeQuestionIndex" style="width: 100%" @change="handleQuestionSelect">
            <el-option v-for="(item,index) in items" :key="index" :value="index" :label="item.qu"></el-option>
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="正确答案">
          <label v-for="answer in predictAnswers" :key="answer">{{ answer }}</label>
        </el-descriptions-item>
        <el-descriptions-item label="正确答案排序">
          {{ sort }}
        </el-descriptions-item>
        <el-descriptions-item label="正确答案推理路径" :span="2">
          <div class="graph-box">
            <graph ref="graph"></graph>
          </div>
        </el-descriptions-item>

      </el-descriptions>
    </div>
  </div>
</template>

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

var _this;
var chart = null;
export default {
  components: {
    'graph': graph,
  },
  name: "graphPath",
  data() {
    return {
      qo: {
        select: "1",
        pageNo: 1,
        pageSize: 1
      },
      questions: [],
      answers: [],
      resultList: [],
      items: [],
      tableData: [],
      predictAnswers: [],
      activeQuestionIndex: null,
      predictFlag: false,
      sort: ''
    }
  },
  mounted() {
    _this = this;
  },
  methods: {
    handleFileChange(file) {
      this.$refs.upload1.clearFiles();
      _this.predictFlag = false;
      _this.predictAnswers = [];
      _this.sort = '';
      _this.items = [];
      _this.queryData(file.raw);
    },
    startReason() {
        if(_this.items.length <= 0){
            _this.$message.error("显示数据存在问题导致推理失败");
            return false;
        }
      _this.$message.info("开始推理");
      setTimeout(() => {
        _this.tableData = _this.resultList;
        _this.initRchart();
        _this.predictFlag = true;
        _this.$message.success("推理成功");
      }, 1520);
    },
    handleQuestionSelect(row) {
      _this.predictAnswers = [_this.items[_this.activeQuestionIndex].an];
      _this.sort = _this.items[_this.activeQuestionIndex].sort;
      _this.initGraph();
    },
    initGraph() {
      _this.$nextTick(() => {
        let cmd = {
          nodes: [],
          edges: []
        };
        _this.items[_this.activeQuestionIndex].model.nodes.forEach(node => {
          cmd.nodes.push({
            id: node.vid,
            label: node.properties.name,
          });
        });
        _this.items[_this.activeQuestionIndex].model.relations.forEach(edge => {
          cmd.edges.push({
            source: edge.srcId,
            target: edge.dstId,
            label: edge.edgeName
          });
        });

        _this.$refs['graph'].initGraph(cmd, true, null, true);
      });
    },
    queryData(fileItem) {
      let formData = new FormData();
      formData.append("file", fileItem);
      request({
        url: '/indicator/indicator8',
        method: 'put',
        data: formData
      }).then(res => {
        let _questions = [];
        let _answers = [];
        if(res.data && res.data.items){
            res.data.items.forEach(item => {
                _questions.push({
                    text: item.qu
                });
                _answers.push({
                    text: item.an
                });
            });
        }

        _this.questions = _questions;
        _this.answers = _answers;
        _this.items = res.data && res.data.items ? res.data.items : [];
        _this.resultList = res.data && res.data.tj_result ? res.data.tj_result : [];
      });
    },
    initRchart() {
      if (chart == null) {
        chart = this.$echarts.init(document.getElementById("echart"));
      }
      let hits1 = [], hits2 = [], hits3 = [];
      _this.resultList.forEach(item => {
        hits1.push(item.hits1);
        hits2.push(item.hits2);
        hits3.push(item.hits3);
      });
      console.log(hits1, hits2, hits3);
      var option = {
        legend: {},
        xAxis: {
          type: 'category',
          data: ['一跳', '二跳']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: 'hits@1',
            data: hits1,
            type: 'bar'
          }, {
            name: 'hits@5',
            type: 'bar',
            data: hits2,
          }, {
            name: 'hits@10',
            type: 'bar',
            data: hits3,
          },
        ]
      };
      chart.setOption(option);
    }
  }
}
</script>

<style scoped lang="scss">
.file-content {
  border: 1px solid #dcdddf;
  border-radius: 3px;
  overflow-y: auto;
  margin-top: 20px;
  padding: 10px;
  line-height: 25px;
  font-size: 14px;
  color: #333333;
  width: calc(100% - 20px);
  height: 80px;
}

.path-bottom-box {
  height: calc(100% - 95px);
  width: 100%;
  display: flex;
}

.path-left-box {
  width: 50%;
  border-right: 1px solid #c1c2c4;

  .question-item {
    margin: 15px 25px;
    line-height: 30px;
    font-size: 15px;
    color: #333333;

    .question-item-div {
      display: flex;
      padding: 8px 0;

      .question-item-title {
        width: 80px;
        text-align: right;
      }

      .question-item-answer {
        flex: 1;
        color: #666666;
      }
    }
  }
}

.path-right-box {
  flex: 1;
  margin: 30px 0;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;

  #echart {
    height: 350px;
  }
}

.graph-box {
  flex: 1;
  height: 500px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  position: relative;
}

</style>
