<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="queryByKeyword">检 索</el-button>
      </div>
      <div class="title-label">Top5</div>
      <el-tabs v-model="activeTab">
        <el-tab-pane label="推荐案例" name="first">
          <el-table :data="list" style="width: 100%">
            <el-table-column type="index" width="50"></el-table-column>
            <el-table-column prop="number" label="案例编号"></el-table-column>
            <el-table-column prop="name" label="案例名称"></el-table-column>
            <el-table-column prop="keyContent" label="关键词"></el-table-column>
            <el-table-column prop="name" label="操作" width="120">
              <template slot-scope="scope">
                <el-button @click.native.prevent="showDetail(scope.row, 'faultCase')" type="text" size="small">
                  查看说明
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="推荐维修" name="second">
          <el-table :data="repairList" style="width: 100%">
            <el-table-column type="index" width="50"></el-table-column>
            <el-table-column prop="title" label="标题"></el-table-column>
            <el-table-column prop="reason" label="原因">
              <template slot-scope="scope">
                <label>{{ scope.row.reason.substring(0, 30) + (scope.row.reason.length > 30 ? '...' : '') }}</label>
              </template>
            </el-table-column>
            <el-table-column prop="influence" label="影响">
              <template slot-scope="scope">
                <label>{{
                    scope.row.influence.substring(0, 30) + (scope.row.influence.length > 30 ? '...' : '')
                  }}</label>
              </template>
            </el-table-column>
            <el-table-column prop="program" label="程序">
              <template slot-scope="scope">
                <label>{{ scope.row.program.substring(0, 30) + (scope.row.program.length > 30 ? '...' : '') }}</label>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="操作" width="120">
              <template slot-scope="scope">
                <el-button @click.native.prevent="showDetail(scope.row, 'repair')" type="text" size="small">
                  查看说明
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-dialog
        title="查看说明"
        :visible.sync="detailVisible"
        width="50%">
      <el-tabs>
        <el-tab-pane label="故障描述">
          {{ cmd.description }}
        </el-tab-pane>
        <el-tab-pane label="排故过程">
          {{ cmd.checkFaultProcess }}
        </el-tab-pane>
        <el-tab-pane label="故障分析">
          {{ cmd.faultAnalysis }}
        </el-tab-pane>
        <el-tab-pane label="故障总结">
          {{ cmd.faultSummary }}
        </el-tab-pane>
        <el-tab-pane label="经验教训">
          {{ cmd.experience }}
        </el-tab-pane>
      </el-tabs>
      <span slot="footer" class="dialog-footer">
        <el-button @click="detailVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
    <el-dialog
        title="查看说明"
        :visible.sync="repairDetailVisible"
        width="50%">
      <el-tabs>
        <el-tab-pane label="标题">
          {{ cmd.title }}
        </el-tab-pane>
        <el-tab-pane label="原因">
          {{ cmd.reason }}
        </el-tab-pane>
        <el-tab-pane label="影响">
          {{ cmd.influence }}
        </el-tab-pane>
        <el-tab-pane label="程序">
          {{ cmd.program }}
        </el-tab-pane>
      </el-tabs>
      <span slot="footer" class="dialog-footer">
        <el-button @click="repairDetailVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

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

import coverImg from "@/assets/image/icon/tupian.png";
import aImg from "@/assets/image/614/5a.jpg";
import bImg from "@/assets/image/614/5b.jpg";
import cImg from "@/assets/image/614/5c.jpg";
import dImg from "@/assets/image/614/5d.jpg";
import eImg from "@/assets/image/614/5e.jpg";
import fImg from "@/assets/image/614/5f.jpg";
import gImg from "@/assets/image/614/5g.jpg";
import hImg from "@/assets/image/614/5h.jpg";


var _this;
export default {
  name: "auxiliaryMaintenance",
  data() {
    return {
      keyword: '',
      list: [],
      repairList: [],
      cmd: {},
      rateNum: "-",
      activeTab: 'first',
      detailVisible: false,
      repairDetailVisible: false,
      coverImg: coverImg,
      srcList: [
        aImg, bImg, cImg, dImg, eImg, fImg, gImg, hImg
      ]
    }
  },
  mounted() {
    _this = this;
  },
  methods: {
    queryByKeyword() {
      if (_this.keyword.length === 0) {
        _this.$message.warning("请输入内容再进行检索");
        return false;
      }

      let sum = 0;
      for (let charStr in _this.keyword) {
        sum += charStr.charCodeAt(0);
      }
      _this.rateNum = "9" + sum.toString().substring(0, 1) + "." + sum.toString().substring(1);
      _this.queryFaultCaseList();
      _this.queryRepairList();
    },
    queryFaultCaseList() {
      let formData = new FormData();
      formData.append("keyword", _this.keyword);
      request({
        url: '/fault_case/query_like_keyword',
        method: 'post',
        data: formData
      }).then(res => {
        let list = res.data;
        let resList = [];
        // 优化排序
        for (let i = list.length - 1; i >= 0; i--) {
          let row = list[i];
          if (row.keyContent && row.keyContent.indexOf(_this.keyword) >= 0 && row.description && row.description.indexOf(_this.keyword) >= 0) {
            resList.unshift(row);
          } else {
            resList.push(row);
          }
        }
        _this.list = resList;
        _this.$message.success("检索成功");
      });
    },
    queryRepairList() {
      let formData = new FormData();
      formData.append("keyword", _this.keyword);
      request({
        url: '/repair/query_like_keyword',
        method: 'post',
        data: formData
      }).then(res => {
        let list = res.data;
        let resList = [];
        // 优化排序
        for (let i = list.length - 1; i >= 0; i--) {
          let row = list[i];
          if (row.title && row.title.indexOf(_this.keyword) >= 0 && row.reason && row.reason.indexOf(_this.keyword) >= 0) {
            resList.unshift(row);
          } else {
            resList.push(row);
          }
        }
        _this.repairList = resList;
      });
    },
    showDetail(row, type) {
      _this.cmd = row;
      if (type === 'repair') {
        _this.repairDetailVisible = true;
      } else if (type === 'faultCase') {
        _this.detailVisible = 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;
  }

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


</style>
