<template>
  <div>
    <div class="menu-title">
      链接预测
      <el-image
          class="img-item"
          :src="coverImg"
          :preview-src-list="srcList">
      </el-image>
    </div>
    <div class="menu-content">
      <div class="recommend-content">
        <div class="search-input-box">
          <el-input placeholder="请输入头实体内容" v-model="startKeyword" @change="handleStartKeywordChange"
                    class="search-input" style="width: 160px;"></el-input>
          <el-select v-model="relationType" placeholder="请选择" style="width: 140px;">
            <el-option label="故障飞机" value="plane"></el-option>
            <el-option label="故障发动机" value="engine"></el-option>
            <el-option label="故障所在地" value="place"></el-option>
            <el-option label="故障控制系统" value="control"></el-option>
          </el-select>
          <el-input placeholder="请输入尾实体内容" v-model="endKeyword" @change="handleEndKeywordChange"
                    class="search-input" style="width: 160px;"></el-input>
          <el-button type="primary" style="margin-left: 30px" @click="queryData">预 测</el-button>
        </div>
      </div>
      <div class="result-table-box">
        <el-table :data="list" border style="width: 100%">
          <el-table-column type="index" label="序号" width="80"></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>
      </div>
    </div>

  </div>
</template>

<script>
import request from '@/utils/request614';
import coverImg from "@/assets/image/icon/tupian.png";
import aImg from "@/assets/image/614/3a.jpg";
import bImg from "@/assets/image/614/3b.jpg";
import cImg from "@/assets/image/614/3c.jpg";
import dImg from "@/assets/image/614/3d.jpg";
import eImg from "@/assets/image/614/3e.jpg";
import fImg from "@/assets/image/614/3f.jpg";
import gImg from "@/assets/image/614/3g.jpg";
import hImg from "@/assets/image/614/3h.jpg";
import iImg from "@/assets/image/614/3i.jpg";
import jImg from "@/assets/image/614/3j.jpg";
import kImg from "@/assets/image/614/3k.jpg";
import lImg from "@/assets/image/614/3l.jpg";
import mImg from "@/assets/image/614/3m.jpg";
import nImg from "@/assets/image/614/3n.jpg";
import oImg from "@/assets/image/614/3o.jpg";
import pImg from "@/assets/image/614/3p.jpg";
import qImg from "@/assets/image/614/3q.jpg";

var _this;
export default {
  name: "linkPrediction",
  data() {
    return {
      startKeyword: "",
      endKeyword: "",
      relationType: 'plane',
      list: [],
      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, eImg, fImg, gImg, hImg, iImg, jImg, kImg, lImg, mImg, nImg, oImg, pImg, qImg
      ]
    }
  },
  mounted() {
    _this = this;
  },
  methods: {
    labelFormatter(row) {
      return _this.legendList[row.label].label;
    },
    handleStartKeywordChange() {
      _this.endKeyword = "";
    },
    handleEndKeywordChange() {
      _this.startKeyword = "";
    },
    queryData() {
      if (_this.startKeyword.length === 0 && _this.endKeyword.length === 0) {
        _this.$message.warning("请输入头或尾实体内容再进行预测");
        return false;
      }

      let formData = new FormData();
      formData.append("keyword", _this.startKeyword.length > _this.endKeyword.length ? _this.startKeyword : _this.endKeyword);
      formData.append("relationType", _this.relationType);
      if (_this.startKeyword.length > 0) {
        request({
          url: '/fault/query_link_node',
          method: 'post',
          data: formData
        }).then(res => {
          _this.list = res.data;
          _this.$message.success("预测成功");
        });
      } else {
        request({
          url: '/fault/query_source_fault_node',
          method: 'post',
          data: formData
        }).then(res => {
          _this.list = res.data;
          _this.$message.success("预测成功");
        });
      }
    }
  }
}
</script>

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

.recommend-content {
  margin: 0 auto;

  .search-input-box {
    width: 55%;
    display: flex;
    text-align: left;
    margin-bottom: 30px;

    .search-input input {
      border-top-left-radius: 0;
    }

  }

}


</style>
