<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="search-input-box">
        <el-input
            class="search-input"
            placeholder="请输入内容"
            v-model="keyword">
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
        <el-button type="primary" style="margin-left: 30px" @click="queryFaultGraph">检 索</el-button>
      </div>
      <div class="graph-box">
        <graph ref="graph"></graph>
      </div>
    </div>
    <el-drawer
        title="基础信息"
        :visible.sync="drawerVisible"
        direction="rtl">
      <div class="drawer-content">
        <el-descriptions :column="1" v-show="activeLabel === 'fault'">
          <el-descriptions-item label="故障名称">{{ nodeItem.name }}</el-descriptions-item>
          <el-descriptions-item label="环境特点">{{ nodeItem.enviChar }}</el-descriptions-item>
          <el-descriptions-item label="故障件编号">{{ nodeItem.partNumber }}</el-descriptions-item>
          <el-descriptions-item label="故障件型号">{{ nodeItem.partModel }}</el-descriptions-item>
          <el-descriptions-item label="故障件名称">{{ nodeItem.partName }}</el-descriptions-item>
          <el-descriptions-item label="发生时间">{{ nodeItem.happenTime }}</el-descriptions-item>
          <el-descriptions-item label="故障场所">{{ nodeItem.faultPlace }}</el-descriptions-item>
          <el-descriptions-item label="处理时间">{{ nodeItem.handleTime }}</el-descriptions-item>
          <el-descriptions-item label="处理方式">{{ nodeItem.handleStyle }}</el-descriptions-item>
          <el-descriptions-item label="处理措施">{{ nodeItem.faultHandleMeasures }}</el-descriptions-item>
          <el-descriptions-item label="故障原因">{{ nodeItem.faultReason }}</el-descriptions-item>
          <el-descriptions-item label="故障现象">{{ nodeItem.faultPhenomenon }}</el-descriptions-item>
          <el-descriptions-item label="排故进度">{{ nodeItem.checkFaultProgress }}</el-descriptions-item>
        </el-descriptions>
        <el-descriptions :column="1" v-show="activeLabel === 'engine'">
          <el-descriptions-item label="编号">{{ nodeItem.number }}</el-descriptions-item>
          <el-descriptions-item label="名称">{{ nodeItem.name }}</el-descriptions-item>
          <el-descriptions-item label="安装时间">{{ nodeItem.installTime }}</el-descriptions-item>
          <el-descriptions-item label="安装位置">{{ nodeItem.position }}</el-descriptions-item>
          <el-descriptions-item label="总工时间">{{ nodeItem.workTime }}</el-descriptions-item>
          <el-descriptions-item label="总空中工作时间">{{ nodeItem.airWorkTime }}</el-descriptions-item>
          <el-descriptions-item label="型号">{{ nodeItem.model }}</el-descriptions-item>
        </el-descriptions>
        <el-descriptions :column="1" v-show="activeLabel === 'control'">
          <el-descriptions-item label="编号">{{ nodeItem.number }}</el-descriptions-item>
          <el-descriptions-item label="名称">{{ nodeItem.name }}</el-descriptions-item>
          <el-descriptions-item label="型号">{{ nodeItem.model }}</el-descriptions-item>
          <el-descriptions-item label="最新交付日期">{{ nodeItem.lastDeliverTime }}</el-descriptions-item>
          <el-descriptions-item label="发动机">{{ nodeItem.engine }}</el-descriptions-item>
          <el-descriptions-item label="状态">{{ nodeItem.status }}</el-descriptions-item>
          <el-descriptions-item label="工作总寿命">{{ nodeItem.workLife }}</el-descriptions-item>

          <el-descriptions-item label="总工作时间">{{ nodeItem.workTime }}</el-descriptions-item>
          <el-descriptions-item label="工作时间翻修期">{{ nodeItem.renovate }}</el-descriptions-item>
          <el-descriptions-item label="翻修期累积时间">{{ nodeItem.renovateTime }}</el-descriptions-item>
          <el-descriptions-item label="日历翻修期">{{ nodeItem.renovateCalendar }}</el-descriptions-item>
          <el-descriptions-item label="下次翻修日期">{{ nodeItem.nextRenovate }}</el-descriptions-item>
        </el-descriptions>
        <el-descriptions :column="1" v-show="activeLabel === 'part'">
          <el-descriptions-item label="编号">{{ nodeItem.number }}</el-descriptions-item>
          <el-descriptions-item label="名称">{{ nodeItem.name }}</el-descriptions-item>
          <el-descriptions-item label="型号">{{ nodeItem.model }}</el-descriptions-item>
          <el-descriptions-item label="编号码">{{ nodeItem.numberCode }}</el-descriptions-item>
          <el-descriptions-item label="出厂日期">{{ nodeItem.dateStr }}</el-descriptions-item>
        </el-descriptions>
        <el-descriptions :column="1" v-show="activeLabel === 'other'">
          <el-descriptions-item label="编号">{{ nodeItem.number }}</el-descriptions-item>
          <el-descriptions-item label="名称">{{ nodeItem.name }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </el-drawer>
  </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/4a.jpg";
import bImg from "@/assets/image/614/4b.jpg";
import cImg from "@/assets/image/614/4c.jpg";
import dImg from "@/assets/image/614/4d.jpg";
import eImg from "@/assets/image/614/4e.jpg";
import fImg from "@/assets/image/614/4f.jpg";
import gImg from "@/assets/image/614/4g.jpg";
import hImg from "@/assets/image/614/4h.jpg";
import jImg from "@/assets/image/614/4j.jpg";


var _this;
export default {
  components: {
    'graph': graph,
  },
  name: "infoConverge",
  data() {
    return {
      keyword: '',
      nodeItem: {},
      drawerVisible: false,
      activeLabel: '',
      coverImg: coverImg,
      srcList: [
        aImg, bImg, cImg, dImg, eImg, fImg, gImg, hImg, jImg
      ]
    }
  },
  mounted() {
    _this = this;
  },
  methods: {
    queryFaultGraph() {
      if (_this.keyword.length === 0) {
        _this.$message.warning("请输入内容再进行检索");
        return false;
      }
      let formData = new FormData();
      formData.append("keyword", _this.keyword);
      request({
        url: '/fault/query_for_neo4j',
        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.label = edge.properties ? edge.properties.name : '';
          edge.source = edge.source.toString();
          edge.target = edge.target.toString();
          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, _this.clickNode);
        _this.$message.success("检索成功");
      });
    },
    clickNode(param) {
      _this.activeLabel = param._label;
      if (param._label === "fault") {
        request({
          url: '/fault/query_unique',
          method: 'post',
          data: {
            EQS_number: param.number
          }
        }).then(res => {
          _this.nodeItem = res.data;
          _this.drawerVisible = true;
        });
      } else if (param._label === "engine") {
        request({
          url: '/engine/query_unique',
          method: 'post',
          data: {
            EQS_number: param.number
          }
        }).then(res => {
          _this.nodeItem = res.data;
          _this.drawerVisible = true;
        });
      } else if (param._label === "control") {
        request({
          url: '/control/query_unique',
          method: 'post',
          data: {
            EQS_number: param.number
          }
        }).then(res => {
          _this.nodeItem = res.data;
          _this.drawerVisible = true;
        });
      }  else if (param._label === "part") {
        request({
          url: '/part/query_unique',
          method: 'post',
          data: {
            EQS_number: param.number
          }
        }).then(res => {
          _this.nodeItem = res.data;
          _this.drawerVisible = true;
        });
      } else {
        _this.activeLabel = 'other';
        _this.nodeItem = {
          number: param.number,
          name: param.label
        };
        _this.drawerVisible = true;
      }
    }
  }
}
</script>

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

  .search-input-box {
    display: flex;
    width: 40%;
    margin-bottom: 1.5625vw;
  }

}

.drawer-content {
  padding: 0 20px;
  font-size: 18px;
}

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


</style>
