<template>
  <div>
    <div class="menu-title">
      航发控制装备维修知识补全
    </div>
    <div class="menu-content">
      <el-row :gutter="40" style="border-bottom: 1px solid #c1c2c4;padding-bottom: 40px">
        <el-col :span="6">
          <div>
            <label>请选择模式：</label>
            <el-select v-model="qo.select" placeholder="选择模式">
              <el-option label="评估模式" value="1"></el-option>
              <el-option label="应用模式" value="2"></el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="6">
          <div>
            <label>请选择知识图谱：</label>
            <el-select v-model="qo.graph" placeholder="选择知识图谱">
              <el-option label="图谱1" value="1"></el-option>
              <el-option label="图谱2" value="2"></el-option>
            </el-select>
          </div>
          <div class="file-graph-content" v-if="qo.graph">

          </div>
        </el-col>
        <el-col :span="6" v-if="qo.select == '1'">
          <div>
            <label>请选择待补全三元组文件：</label>
            <el-upload
                ref="upload" 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>
          <div v-if="file">
            <el-table :data="ralationData" style="width: 100%;margin-top: 20px;" height="150">
              <el-table-column prop="source" label="头实体"></el-table-column>
              <el-table-column prop="relation" label="关系"></el-table-column>
              <el-table-column prop="target" label="尾实体"></el-table-column>
            </el-table>
          </div>
        </el-col>
        <el-col :span="6">
          <el-button type="primary">开始链接预测</el-button>
        </el-col>
      </el-row>
      <div class="path-bottom-box">
        <div class="path-left-box">
          <div style="height: calc(100% - 50px);overflow-y: auto;margin-right: 20px">
            <el-table :data="tableData" style="width: 100%;margin-top: 20px;">
              <el-table-column prop="len" label="待测试三元组"></el-table-column>
              <el-table-column prop="hits@1" label="预测答案"></el-table-column>
              <el-table-column prop="hits@5" label="真实答案"></el-table-column>
              <el-table-column prop="hits@10" label="真实答案排名"></el-table-column>
            </el-table>
          </div>
          <div class="page-box">
            <el-pagination background
                           @current-change="handleCurrentChange"
                           :current-page="qo.pageNo"
                           :page-size="qo.pageSize"
                           layout="total, prev, pager, next"
                           :total="result.total">
            </el-pagination>
          </div>
        </div>
        <div class="path-right-box">
          <div id="echart"></div>
          <div style="width: calc(100% - 70px);margin: 30px">
            <el-table :data="tableData" style="width: 100%;">
              <el-table-column prop="len" label="推理路径长度"></el-table-column>
              <el-table-column prop="hits@1" label="hits@1"></el-table-column>
              <el-table-column prop="hits@5" label="hits@5"></el-table-column>
              <el-table-column prop="hits@10" label="hits@10"></el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

var _this;
export default {
  name: "graphShow",
  data() {
    return {
      qo: {
        select: "",
        graph: "",
        pageNo: 1,
        pageSize: 10
      },
      file: "",
      result: {
        total: 100
      },
      tableData: [
        {len: "1-hop", "hits@1": "hits@1", "hits@5": "hits@5", "hits@10": "hits@10"},
        {len: "2-hop", "hits@1": "hits@1", "hits@5": "hits@5", "hits@10": "hits@10"},
        {len: "3-hop", "hits@1": "hits@1", "hits@5": "hits@5", "hits@10": "hits@10"},
        {len: "4-hop", "hits@1": "hits@1", "hits@5": "hits@5", "hits@10": "hits@10"}
      ],
      ralationData: [
        {source: "头实体", relation: "关系", target: "尾实体"},
        {source: "头实体", relation: "关系", target: "尾实体"},
        {source: "头实体", relation: "关系", target: "尾实体"},
        {source: "头实体", relation: "关系", target: "尾实体"},
        {source: "头实体", relation: "关系", target: "尾实体"}
      ]
    }
  },
  mounted() {
    _this = this;
    _this.initRchart();
  },
  methods: {
    handleFileChange(item) {
      this.$refs.upload.clearFiles();
      let formData = new FormData();
      formData.append("file", item.raw);
      _this.file = item.raw.name;
      // request({
      //     url: '/sys-file/create',
      //     method: 'put',
      //     data: formData
      // }).then(res => {
      //     _this.$message.success("上传成功");
      //     _this.queryData();
      // });
    },
    handleCurrentChange(val) {
      _this.qo.pageNo = val;
    },
    initRchart() {
      var chart = this.$echarts.init(document.getElementById("echart"));
      var option = {
        title: {
          text: '链接预测Hits@1、Hits@5、Hits@10以及其他占比',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: 'bottom'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              {value: 1048, name: 'Search Engine'},
              {value: 735, name: 'Direct'},
              {value: 580, name: 'Email'},
              {value: 484, name: 'Union Ads'},
              {value: 300, name: 'Video Ads'}
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      chart.setOption(option);
    }
  }
}
</script>

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

.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 10%;
    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: 400px;
  }
}
</style>
