<template>
  <div class="inner-wrap">
    <nav-bar title="指令管理"></nav-bar>
    <div class="wrap2" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="0" infinite-scroll-immediate-check="false">
      <div class="wrap-filter-button">
        <div class="wrap-filter clearfix">
          <div class="fl filter_item">
            <div class="filter_input">
              <label class="filter-label">报警设备</label>
              <div class="iliblock">
                <input type="text" class="input" v-model="val1">
              </div>
            </div>
          </div>
          <div class="fl filter_item">
            <div class="filter_input">
              <label class="filter-label">报警编码</label>
              <div class="iliblock">
                <input type="text" class="input" v-model="val2">
              </div>
            </div>
          </div>
          <div class="fl filter_item">
            <div class="filter_input">
              <label class="filter-label">报警信息</label>
              <div class="iliblock">
                <input type="text" class="input" v-model="val3">
              </div>
            </div>
          </div>
        </div>
        <div class="wrap-button clearfix">
          <button class="button--primary" @click="toSearch()">查询</button>
        </div>
      </div>
      <section class="grid-wraper mgt15">
        <table class="filter-table">
          <tr>
            <th>报警设备</th>
            <th>报警编码</th>
            <th>报警信息</th>
            <th>报警时间</th>
          </tr>
          <tr v-for="(e,i) in dataList" :key="i">
            <td>{{e.device_code}}</td>
            <td>{{e.error_code}}</td>
            <td>{{e.error_info}}</td>
            <td>{{e.error_time}}</td>
          </tr>
        </table>
      </section>
      <div class="loading-tips">{{desc}}</div>
    </div>
  </div>
</template>

<script>
import {queryDeviceErrorInfo} from '@config/getData2.js'
import NavBar from '@components/NavBar.vue'
export default {
  name: 'AlarmRecord',
  components: {
    NavBar
  },
  data () {
    return {
      dataList: [],
      val1: '',
      val2: '',
      val3: '',
      page: 1,
      size: '20',
      busy: false,
      desc: ''
    }
  },
  methods: {
    async _queryDeviceErrorInfo () {
      let res = await queryDeviceErrorInfo(this.val1, this.val2, this.val3, this.page + '', this.size)
      if (res.code === '1') {
        this.dataList = []
        this.dataList = [...res.result]
        if (res.result.length < 20) {
          this.busy = true
          this.desc = '已加载全部数据'
        }
      } else {
        this.Dialog(res.desc)
        this.desc = res.desc
      }
    },
    async loadMore () {
      this.busy = true
      this.page++
      let res = await queryDeviceErrorInfo(this.val1, this.val2, this.val3, this.page + '', this.size)
      if (res.code === '1') {
        this.dataList = [...this.dataList, ...res.result]
        if (res.result.length < 20) {
          this.busy = true
          this.desc = '已加载全部数据'
        } else {
          this.busy = false
        }
      } else {
        this.Dialog(res.desc)
        this.desc = res.desc
      }
    },
    toSearch () {
      this.page = 1
      this.busy = false
      this.desc = ''
      this._queryDeviceErrorInfo()
    }
  }
}
</script>
<style lang="stylus" scoped>
.wrap2
  height calc(100% - .4rem)
  overflow-y auto
.wrap-filter-button
  padding 0.05rem 0.2rem
  margin 0
.wrap-button
  margin 0.01rem auto
.filter-table
  margin 0.08rem 0
.filter_item
  margin 0.08rem 0 0 0
</style>
