<template>
<div>
  <!--导航栏 -->
  <div class="hxjx_root">
    <div class="text-nowrap hxjx_navigator_info">
      <!--导航块 -->
      故障信息
    </div>
    <!--产品信息-->
    <div>
      <table class="table  table-hover table-bordered table-striped table-condensed text-nowrap">

        <thead class="hxjx_table_th">
        <tr>
          <th class="hxjx_table_th_width">序号</th>
          <th class="hxjx_table_th_width">报警名称</th>
          <th class="hxjx_table_th_width">报警信息</th>
          <th class="hxjx_table_th_width">记录时间</th>
        </tr>
        </thead>

        <tbody>
        <tr v-for="(item,index) in dataList">
          <td class="hxjx_table_btnColumn">{{index + 1 + (pageNum - 1) * pageSize}}</td>
          <td style="word-break:break-all;white-space:normal;">{{item.faultName}}</td>
          <td style="word-break:break-all;white-space:normal;">{{item.faultMessage}}</td>
          <td class="hxjx_table_btnColumn">{{item.createTime}}</td>
        </tr>
        </tbody>

      </table>
    </div>
    <!-- 页码布局块 -->
    <div>
      <table class="table">
        <tr>
          <td class="hxjx_table_btnColumn" style="padding-left: 0;">
            <div class="hxjx_btn_margin_right5 hxjx_footer_pagefont" style="padding-left: 0;">
                            <span class="hxjx-sum">

                                    {{((pageNum - 1) * pageSize)+1}}-{{((pageNum - 1) * pageSize)+dataList.length}}条（共{{total}}条记录）

                            </span>
            </div>
          </td>
          <td class="hxjx_footer_main" style="padding-right: 0;">
            <div class="btn-group btn-group-sm hxjx-buttongroup">
              <button class="hxjx-jump btn btn-outline-primary hxjx_btn_margin_right5" @click="getPageData(1)">首页</button>

              <button class="hxjx-jump btn btn-outline-primary hxjx_btn_margin_right5" @click="getPageData(--pageNum)">上一页</button>

              <button class="hxjx-jump btn btn-outline-primary hxjx_btn_margin_right5" @click="getPageData(++pageNum)">下一页</button>

              <button class="hxjx-jump btn btn-outline-primary hxjx_btn_margin_right5" @click="getPageData(pageTotal)">末页</button>

              <input type=text v-model.number="pageNum" @input="handleInputPage">

              <span class="hxjx_btn_margin_right5 hxjx_footer_pagefont" >页</span>
              <button class="hxjx-button-jump btn btn-outline-primary" @click="getPageData(pageNum)">跳转</button>
            </div>
          </td>
        </tr>
      </table>
    </div>
  </div>


  <div id="hxjx_popup" class="hxjx_popup" v-if="showFault">
    <!-- 表头-->
    <div class="hxjx_popup_header_danger">
      <span style="float:left">故障</span>
      <!-- <span id="hxjx_popup_header_close" style="float:right"><i class='fa fa-times' style="font-size: 20px;cursor: pointer;"></i></span> -->
    </div>
    <!-- body-->
    <div class="hxjx_popup_body_danger">
      <div style="width:100%;height:227px;">
        <table class="table table-borderless hxjx_table_text_left">
          <tbody>
          <tr>
            <td class="hxjx_table_label_format hxjx_table_label" style="padding:0.25rem;">时间:</td>
            <td class="hxjx_table_label_format hxjx_table_text" style="padding:0.25rem;">{{messageData.createTime}}
            </td>
            <td class="hxjx_table_label_format hxjx_table_text_rule"
                style="padding:0.25rem;vertical-align: middle;"></td>
          </tr>
          <tr>
            <td class="hxjx_table_label_format hxjx_table_label" style="padding:0.25rem;">故障名称:</td>
            <td class="hxjx_table_label_format hxjx_table_text" style="padding:0.25rem;">{{messageData.faultName}}</td>
            <td class="hxjx_table_label_format hxjx_table_text_rule"
                style="padding:0.25rem;vertical-align: middle;"></td>
          </tr>
          <tr>
            <td class="hxjx_table_label_format hxjx_table_label" style="padding:0.25rem;">故障信息:</td>
            <td class="hxjx_table_label_format hxjx_table_text" style="padding:0.25rem;">{{messageData.faultMessage}}</td>
            <td class="hxjx_table_label_format hxjx_table_text_rule"
                style="padding:0.25rem;vertical-align: middle;"></td>
          </tr>
          </tbody>
        </table>
      </div>
      <!-- 按钮操作 -->
      <table class="table">
        <tr>
          <td style="padding: 20px 0 0 0;text-align: right; border-top:0px solid #dc3545">
            <div class="btn-group btn-group-sm">
              <a href="#" class="hxjx-button-ensure btn btn-danger btn-sm custom hxjx_foot_btn_custom"
                 style="margin-right: 0;" @click="ensure">确定</a>
            </div>
          </td>
        </tr>
      </table>
    </div>
  </div>
</div>
</template>

<script>
import { messageUpdate } from '@/api/system/resource'
import { listFault } from '@/api/system/fault'
import { getFaultMessage, newIP } from '@/api/system/common'

export default {
  name: 'index',
  data() {
    return {
      MessageParams:{
        state:0
      },
      showFault: false,
      pageNum:1,
      pageSize:5,
      pageTotal:4,
      total:0,
      inputPage:"",
      dataList: [],
      messageData:{}

    };
  },
  methods: {

    ensure() {
      let data = {
        state:1
      }
      messageUpdate(data).then(res=>{
        this.showFault = false
      })
    },


    getPageData(pageNum){

      this.pageNum = pageNum<=1?1:pageNum
      pageNum = this.pageNum
      this.pageNum = pageNum>this.pageTotal?this.pageTotal:pageNum
      if (this.total===0){
        this.pageNum=1;
        this.pageSize=5;
        return
      }
      this.getDataList()

    },

    handleInputPage(){

      this.pageNum = this.pageNum<=0?1:this.pageNum
      this.pageNum = this.pageNum >this.pageTotal?this.pageTotal:this.pageNum
    },

    getDataList(){
      let params = {
        pageNum:this.pageNum,
        pageSize:this.pageSize
      }
      listFault(params).then(res=>{

        this.dataList = res.rows
        this.total = Math.trunc(res.total)

        this.pageTotal = Math.trunc(res.total/this.pageSize)
        if (res.total%this.pageSize!=0) this.pageTotal++
      })
    },
    getFault(){
      getFaultMessage().then(res=>{
        if (res.data!==0){
          this.showFault = true
          get("/work/message/data",this.MessageParams).then(res=>{
            this.messageData = res.data;
          })
        }
      })
    }
  },
  mounted() {


    clearInterval(this.intervalTime)
    this.getDataList()  // 接口方法

    this.intervalTime = setInterval(() => {
      this.getFault();
      this.getDataList();  // 接口方法

    }, 3000);

  },
  created() {
    newIP();
    this.getFault()
    this.getDataList()
  },
}
</script>

<style scoped>
.hxjx_root {
  padding: 20px;
  display: table;
  width: 100%;
  font-size: 0.875rem;
}

.hxjx_navigator_info {
  height: 40px;
  border-radius: 5px;
  position: relative;
  font-size: 1rem;
  font-weight: 700;
}

.hxjx_table_label_format {
  word-break: keep-all;
  white-space: nowrap;
}

.hxjx_table_text_rule {
  color: red;
}

.hxjx_table_text {
  width: 300px !important;
  text-align: left;
  padding: 6px;
}

.hxjx_table_label {
  padding: 0px !important;
  vertical-align: middle !important;
  width: 100px;
}

.hxjx_table_text_left {
  text-align: left;
}

.hxjx_btn_margin_right5 {
  margin-right: 5px;
}

.hxjx_footer_main {
  background-color: white;
  border: solid 1px transparent !important;
}

.hxjx_table_btnColumn {
  word-break: keep-all !important;
  white-space: nowrap !important;
}

.hxjx_foot_btn_custom {
  width: 90px !important;
  margin-right: 5px;
}

/* 后添加的样式 */
.hxjx_footer_main {
  text-align: right !important;
}

.hxjx_table_btnColumn {
  border-top: 0 !important;
}

.hxjx_table_btn {
  width: 50px !important;
  margin: 2px;
}

.hxix_table_border {
  border: 1px solid #CCC;
}

.table td, .table th {
  padding: 0.5rem;
}

.hxjx_table_th {
  background-color: rgb(91, 155, 213);
  color: #fff;
}

.hxjx_footer_text {
  width: 40px;
  border: #007bff 1px solid
}

.hxjx_footer_pagefont {
  font-size: 14px;
  font-weight: 400;
  color: #007bff;
  padding: 5px
}

.hxjx-store-data {
  display: none
}

input{
  border: none;
  background: #f0f7ff;
  width: 50px;
  align-self: center;
  text-align: center;
}

input[type=text]:focus {
  border-width: 1px;
  outline:1px;
}



.hxjx_table_label_format {
  word-break: keep-all;
  white-space: nowrap;
}

.hxjx_table_text_rule {
  color: red;
}

.hxjx_table_text {
  width: 300px !important;
  text-align: left;
  padding: 6px;
}

.hxjx_table_label {
  padding: 0px !important;
  vertical-align: middle !important;
  width: 100px;
}

.hxjx_table_text_left {
  text-align: left;
}



.hxjx_foot_btn_custom {
  width: 90px !important;
  margin-right: 5px;
}

.table td, .table th {
  padding:0.5rem ;
}

.hxjx_popup {
  position:fixed;
  left:400px;
  top:200px;
  width:640px;
  height:360px;
  font-size: 14px;
}

.hxjx_popup_header_danger {
  width:100%;
  height:40px;
  padding: 9px;
  background-color: #dc3545;
  color: #fff;
}

.hxjx_popup_body_danger {
  width:100%;
  height:320px;
  padding:20px;
  background-color: #fff;
  border: 1px solid #dc3545;
}
</style>
