<template>
  <div>
    <div class="menu-title">
      知识抽取
      <el-tag
          class="tag-item"
          @click="handleTagClick(item)"
          v-for="item in tags"
          :key="item.label"
          :type="item.type"
          :effect="activeTag === item.label ? 'dark' : 'plain'">
        {{ item.name }}
      </el-tag>
      <el-image
          class="img-item"
          :src="coverImg"
          :preview-src-list="srcList">
      </el-image>
    </div>
    <div class="menu-content">
      <div class="graph-box">
        <graph ref="graph"></graph>
      </div>
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="title-label">实体(F1值：99.2%)</div>
          <el-table :data="nodeRecord.list" border style="width: 100%">
            <el-table-column prop="id" label="ID"></el-table-column>
            <el-table-column prop="label" label="标签" :formatter="labelFormatter"></el-table-column>
            <el-table-column prop="number" label="编号"></el-table-column>
            <el-table-column prop="properties.name" label="名称"></el-table-column>
            <el-table-column prop="flag" label="是否准确" width="80">
              <template slot-scope="scope">
                <label style="color: #00dc6b">√</label>
                <!--                <label style="color: #e02323" v-if="!scope.row.flag">×</label>-->
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
              background
              :page-size="5"
              layout="prev, pager, next"
              @current-change="handleEntityCurrentChange"
              :current-page="nodeQo.pageNo"
              :total="nodeRecord.total">
          </el-pagination>
        </el-col>
        <el-col :span="12">
          <div class="title-label">三元组(F1值：98.3%)</div>
          <el-table :data="relationRecord.list" border style="width: 100%">
            <el-table-column prop="properties.sourceNumber" label="起始节点编号"></el-table-column>
            <el-table-column prop="properties.targetNumber" label="终止节点编号"></el-table-column>
            <el-table-column prop="properties.name" label="名称"></el-table-column>
            <el-table-column prop="name" label="是否准确" width="80">
              <template slot-scope="scope">
                <label style="color: #00dc6b">√</label>
                <!--                <label style="color: #e02323" v-if="!scope.row.flag">×</label>-->
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
              background
              layout="prev, pager, next"
              :page-size="5"
              @current-change="handleTripletCurrentChange"
              :current-page="relationQo.pageNo"
              :total="relationRecord.total">
          </el-pagination>
        </el-col>
      </el-row>

    </div>
  </div>
</template>

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

import coverImg from "@/assets/image/icon/tupian.png";
import aImg from "@/assets/image/614/2a.jpg";
import bImg from "@/assets/image/614/2b.jpg";
import cImg from "@/assets/image/614/2c.jpg";
import dImg from "@/assets/image/614/2d.jpg";
import fImg from "@/assets/image/614/2f.jpg";

var _this;
export default {
  components: {
    'graph': graph,
  },
  name: "infoExtract",
  data() {
    return {
      nodeQo: {
        pageNo: 1,
        pageSize: 5
      },
      relationQo: {
        pageNo: 1,
        pageSize: 5
      },
      nodeRecord: {
        list: [],
        total: 0
      },
      relationRecord: {
        list: [],
        total: 0
      },
      tags: [
        {
          name: '数控系统',
          label: 'control'
        }, {
          name: '发动机',
          label: 'engine'
        }, {
          name: '故障信息',
          label: 'fault'
        }
      ],
      activeTag: '',
      legendList: {
        "armyType": {label: '军种', color: 'rgb(76,142,218)'},
        "control": {label: '控制系统', color: 'rgb(236,181,201)'},
        "engine": {label: '发动机', color: 'rgb(241,102,103)'},
        "fault": {label: '故障信息', color: 'rgb(141,204,147)'},
        "faultCase": {label: '故障案例', color: 'rgb(156,33,234)'},
        "oriPlane": {label: '原飞机', color: 'rgb(255,196,84)'},
        "part": {label: '部件', color: 'rgb(86,148,128)'},
        "place": {label: '发生地', color: 'rgb(217,200,174)'},
        "plane": {label: '飞机', color: 'rgb(87,199,227)'}
      },
      coverImg: coverImg,
      srcList: [
        aImg, bImg, cImg, dImg, fImg
      ]
    }
  },
  mounted() {
    _this = this;
    _this.queryGraphData();
    _this.queryNodePage();
    _this.queryRelationPage();
  },
  methods: {
    handleTagClick(item) {
      if (item.label !== _this.activeTag) {
        _this.activeTag = item.label;
      } else {
        _this.activeTag = '';
      }
      _this.queryGraphData();
    },
    queryGraphData() {
      let formData = new FormData();
      formData.append("label", _this.activeTag);
      request({
        url: '/neo4j/query_data/70',
        method: 'post',
        data: formData
      }).then(res => {
        res.data.nodes.forEach(node => {
          node._label = node.label;
          node.label = node.properties.name;
          node.id = node.id.toString();
        });
        res.data.relations.forEach(edge => {
          delete edge.id;
          edge.source = edge.source.toString();
          edge.target = edge.target.toString();
          edge.label = edge.properties ? edge.properties.name : '';
          if (edge.source === edge.target) {
            edge.type = 'loop';
          } else {
            delete edge.type;
          }
        });
        _this.$refs['graph'].initGraph({
          nodes: res.data.nodes,
          edges: res.data.relations
        }, true);
      });
    },
    labelFormatter(row) {
      if (_this.legendList[row.label]) {
        return _this.legendList[row.label].label;
      } else {
        return '-'
      }
    },
    queryNodePage() {
      request({
        url: '/neo4j/query_node_page',
        method: 'post',
        data: _this.nodeQo
      }).then(res => {
        _this.nodeRecord.list = res.data.nodes;
        _this.nodeRecord.total = res.data.total;
      });
    },
    queryRelationPage() {
      request({
        url: '/neo4j/query_relation_page',
        method: 'post',
        data: _this.relationQo
      }).then(res => {
        _this.relationRecord.list = res.data.relations;
        _this.relationRecord.total = res.data.total;
      });
    },
    handleEntityCurrentChange(val) {
      _this.nodeQo.pageNo = val;
      _this.queryNodePage();
    },
    handleTripletCurrentChange(val) {
      _this.relationQo.pageNo = val;
      _this.queryRelationPage();
    },
  }
}
</script>

<style lang="scss">
.img-item {
  width: 95px;
  height: 25px;
  cursor: pointer;
  position: absolute;
  right: 30px;
  top: 80px;
}

.tag-item {
  margin-right: 5px;
  cursor: pointer;
}

.menu-content {
  overflow-x: hidden;

  .title-label {
    margin: 20px 0;
    font-size: 18px;
    line-height: 25px;
    text-align: center;
  }

  .el-pagination {
    text-align: center;
    margin-top: 25px;
  }
}

.graph-box {
  border: 1px solid #dcdddf;
  width: 100%;
  height: 500px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 5px;
}


</style>
