<template>
  <div>
    <div class="menu-title">
      知识图谱关联
    </div>
    <div class="menu-content" style="display: inline-block">
      <el-row :gutter="5">
        <el-col :span="12">
          <div>
            <label>请选择知识图谱：</label>
            <el-select v-model="activeSpaceName" placeholder="选择图谱">
              <el-option :label="item.name" :value="item.name" v-for="item in spaceList"></el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="12">
          <el-descriptions class="margin-top desc2" :column="2" border>
            <el-descriptions-item>
              <template slot="label">实体数量：</template>
              <label>{{ activeSpace.nodes }}</label>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">关系数量：</template>
              <label>{{ activeSpace.relations }}</label>
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>
      <el-upload
          style="float: right;margin: 15px 0;"
          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>
      <el-table :data="items" border class="text-table" height="300">
        <el-table-column type="index" width="50" label="序号"></el-table-column>
        <el-table-column prop="text" label="文本"></el-table-column>
        <el-table-column prop="el1Str" label="实体" width="200"></el-table-column>
      </el-table>
      <el-button type="primary" style="float:right;margin: 15px 0;" @click="startPredict">知识图谱关联</el-button>

      <el-table :data="tableData" border class="text-table" height="300" @row-click="handleTableDataRowClick">
        <el-table-column type="index" width="50" label="序号"></el-table-column>
        <el-table-column prop="text" label="文本"></el-table-column>
        <el-table-column prop="el1Str" label="实体" width="200"></el-table-column>
        <el-table-column prop="el2Str" label="链接结果" width="200"></el-table-column>
      </el-table>
      <div class="result-label">准确率：{{ rate }}</div>

      <el-descriptions title="" direction="vertical" :column="2" border id="menuContent">
        <el-descriptions-item label="实体链接结果" :span="2">
          <div class="result-el2-box">
            <el-tag v-for="tag in tags" style="margin-right: 5px;">{{ tag }}</el-tag>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="模式关联结果" :span="1" labelClassName="handle-des">
          <div class="graph-box" id="graph1">
            <graph ref="graph"></graph>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="信息汇聚结果" :span="1" labelClassName="handle-des2">
          <div class="graph-box" id="graph2">
            <graph ref="graph2"></graph>
          </div>
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>

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

var menuContentWidth;
var _this;
export default {
  components: {
    'graph': graph,
  },
  name: "graphRelation",
  data() {
    return {
      spaceList: [],
      activeSpace: '',
      activeSpaceName: '',
      items: [],
      tableData: [],
      tags: [],
      rateLabel: '',
      rate: '0%'
    }
  },
  mounted() {
    _this = this;
    _this.queryPrepareData();
    menuContentWidth = document.getElementById("menuContent").offsetWidth;
  },
  methods: {
    handleTableDataRowClick(row) {
      _this.tags = row.el2;
      _this.initGraphData(_this.resolveData(row.model1));
      _this.initGraphData2(_this.resolveData(row.model2));
    },
    queryPrepareData() {
      request({
        url: '/indicator/indicator7_1',
        method: 'get',
        data: {}
      }).then(res => {
        if (res.data.length > 0) {
          _this.activeSpace = res.data[0]
          _this.activeSpaceName = res.data[0].name;
        }
        _this.spaceList = res.data;
      });
    },
    handleFileChange(item) {
      this.$refs.upload.clearFiles();
      _this.uploadFile(item.raw);
    },
    uploadFile(fileItem) {
      let formData = new FormData();
      formData.append("file", fileItem);
      request({
        url: '/indicator/indicator7',
        method: 'put',
        data: formData
      }).then(res => {
        res.data.items.forEach(item => {
          item.el1Str = item.el1.toString();
          item.el2Str = item.el2.toString();
        });
        _this.items = res.data.items;
        _this.rateLabel = res.data.zql;
      });
    },
    startPredict() {
      if (_this.items.length == 0) {
        _this.$message.warning("请先上传待关联文本数据集");
        return false;
      }
      _this.$message.info("知识图谱关联开始");
      setTimeout(() => {
        _this.tableData = _this.items;
        _this.rate = _this.rateLabel;
        _this.$message.success("知识图谱关联成功");
      }, 1560);
    },
    resolveData({nodes, relations}) {
      let cmd = {
        nodes: [],
        edges: []
      };
      nodes.forEach(node => {
        cmd.nodes.push({
          id: node.vid,
          label: node.properties.name
        });
      });
      relations.forEach(edge => {
        cmd.edges.push({
          label: edge.edgeName,
          source: edge.srcId,
          target: edge.dstId,
        });
      });
      return cmd;
    },
    initGraphData(cmd) {
      _this.$nextTick(() => {
        document.getElementById("graph1").style.width = menuContentWidth / 2 - 20 + "px";
        _this.$refs['graph'].initGraph(cmd, true, null, true);
      });

    },
    initGraphData2(cmd) {
      _this.$nextTick(() => {
        document.getElementById("graph2").style.width = menuContentWidth / 2 - 20 + "px";
        _this.$refs['graph2'].initGraph(cmd, true, null, true);
      });
    }
  }
}
</script>

<style scoped lang="scss">

.result-label {
  padding:  15px 0;
  text-align: center;
}

.bottom-title {
  padding-top: 25px;
  text-align: center;
  font-weight: bold;
  padding-bottom: 10px;
}

.tool-box {
  margin-bottom: 20px;
  overflow: hidden;
}

.upload-btn {
  display: inline-block;
  margin-top: 150px;
}

.text-table {
  margin-top: 20px;

  .el-table th.is-leaf {
    border-top: 0;
  }

  .el-table__header {
    th {
      background-color: #fafafa;
    }

  }
}

.text-box {
  border: 1px solid #dcdddf;
  width: calc(100% - 40px);
  height: 350px;
  overflow-y: auto;
  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%;
  }
}


.graph-box {
  height: 400px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  position: relative;
  margin: 0 auto;
}

</style>
