<template>
  <div>
    <div class="menu-title">
      知识检索和问答
    </div>
    <div class="menu-content" style="display: inline-block;display: flex">
      <div style="width:30%;min-width:500px;">
        <div>
          <el-form :inline="true" :model="qo" class="demo-form-inline">
            <el-form-item label="">
              <el-select v-model="value" style="width: 300px" placeholder="选择图谱名">
                <el-option
                    v-for="item in options"
                    :key="item.name"
                    :label="item.name"
                    :value="item.name">
                </el-option>
              </el-select>
            </el-form-item>
<!--            <el-form-item>-->
<!--              <el-button type="primary" style="margin-left: 14px">选择图谱</el-button>-->
<!--            </el-form-item>-->
          </el-form>
        </div>
        <div >
          <el-input v-model="fileName" readonly style="width: 300px" disabled></el-input>
          <el-upload
              ref="upload"
              class="upload-btn"
              :auto-upload="false"
              action="#"
              :on-change="handleFileChange"
              :limit="2"
              :show-file-list="false">
            <el-button type="primary">导入测试文件</el-button>
          </el-upload>
        </div>
        <div>
          <el-button type="primary" style="margin-left: 150px;margin-top: 100px" @click="queryData()">开始测试</el-button>
        </div>

        <br><br>
        <!--<el-input v-model="resultStr" readonly style="width: 80%" disabled></el-input>-->
          <div v-if="resultStr">{{resultStr}}</div>
        <!--                <div class="right-box" style="padding-left: 5%;width: 45%">-->
        <!--                    <el-input v-model="keyword" placeholder="检索或问答内容" style="width: 300px"></el-input>-->
        <!--                    <el-button type="primary" style="margin-left: 20px">开始检索</el-button>-->
        <!--                </div>-->
      </div>
      <div style="width:70%;height: calc(100% - 80px)">
        <div class="left-box" style="width: 100%">

          <div style="width: 96%;">
            <el-table :data="questions" style="width: 100%;" @row-click="handleTableRowClick">
              <el-table-column prop="qu" label="问题"></el-table-column>
              <el-table-column prop="hxan" label="知识检索或问答结果（Top-5）">
                <template slot-scope="scope">
<!--                  {{scope.row.hxan}}-->
                  <p v-for="items in scope.row.hxan" :style=" items == scope.row.an ? 'color: red' : ''">{{items}}</p>
                </template>
              </el-table-column>
              <el-table-column prop="an" label="正确答案"></el-table-column>
              <el-table-column prop="loc" label="正确答案位置序号"></el-table-column>
            </el-table>
            <div class="page-box">
              <el-pagination background
                             @current-change="handleCurrentChange"
                             :current-page="qo.pageNo"
                             :page-size="qo.pageSize"
                             layout="total, prev, pager, next"
                             :total="questionsAll.length">
              </el-pagination>
            </div>
          </div>
        </div>
<!--        <div class="right-box">-->
<!--          <div style="width: 90%;margin-left: 10%">-->
<!--            <el-table :data="answerData" style="width: 100%;">-->
<!--              <el-table-column prop="result" label="检索结果">-->
<!--                <template slot-scope="scope">-->
<!--                  <label :style=" scope.row.result == activeRow.qa.Answer ? 'color: red' : ''">{{ scope.row.result }}</label>-->
<!--                </template>-->
<!--              </el-table-column>-->
<!--            </el-table>-->
<!--          </div>-->
<!--        </div>-->
      </div>
    </div>
  </div>
</template>

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

var _this;
export default {
  name: "graphQuestion",
  data() {
    return {
      options: [
          {name: "装备知识图谱"},
      ],
      value: '',
      keyword: "",
      fileName: "",
      resultStr: "",
      qo: {
        pageNo: 1,
        pageSize: 10
      },
      file:"",
      questionsAll: [],
      questions: [],
      answerData: [],
      activeRow: {
        qa: {

        }
      }
    }
  },
  mounted() {
    _this = this;

  },
  methods: {
    handleFileChange(file) {
      this.$refs.upload.clearFiles();
      _this.fileName = file.raw.name;
      _this.file = file.raw;
    },
    handleCurrentChange(val) {
      _this.qo.pageNo = val;
      _this.questions = _this.questionsAll.slice((_this.qo.pageNo - 1) * 10, _this.qo.pageNo * 10);
    },
    handleTableRowClick(row, column, event) {
      let _answerData = [];
      row.entity.forEach(item => {
        _answerData.push({
          result: item
        });
      });
      _this.activeRow = row;
      _this.answerData = _answerData;
    },
    queryData() {
      let formData = new FormData();
      formData.append("file", _this.file);
      request({
        url: '/indicator/indicator9/dn_graph_one',
        method: 'put',
        data: formData
      }).then(res => {
          var trueTotal = 0;
        res.data.items.map(data1 => {
          data1.hxan = JSON.parse(data1.hxan);
          if(data1.hxan.indexOf(data1.an) != -1){
              trueTotal ++;
          }
        })

        _this.resultStr = "知识检索或问答结果 Top-5 准确率：" + res.data.zql.toFixed(2) + "%，正确条数："+trueTotal+"，总条数："+res.data.items.length;
        _this.questionsAll = res.data.items;
        _this.handleCurrentChange(1);
      });
    },
  }
}
</script>

<style scoped lang="scss">
.upload-btn {
  display: inline-block;
  margin-left: 20px;
}

.text-box {
  border: 1px solid #dcdddf;
  width: calc(100% - 40px);
  height: 550px;
  overflow-y: auto;
  margin-top: 40px;
  padding: 20px;
  line-height: 25px;
  font-size: 14px;
  color: #333333;
  border-radius: 3px;
}

.text-title {
  width: calc(100% - 40px);
  padding: 20px;
  text-align: center;
}

.left-box {
  width: 50%;
  float: left;

  .text-box-item {
    width: calc(90% - 1px);
    padding-right: 10%;
    border-right: 1px solid #c1c2c4;
  }
}

.right-box {
  width: 50%;
  float: right;

  .text-box-item {
    width: 90%;
    padding-left: 10%;
  }
}
</style>
