<template>
  <div class="alarmHistory">
    <bread-crumb :bread-crumb-list="breadCrumbList"></bread-crumb>  
    <!-- 表格 -->  
     <div class="tableCon" ref="tableDataRef2"> 
      <div class="searchCon">     
        <search-form
          :show-select="search"
          @submit="searchRule"
          @submit1="handleTimeBtnClick"
          @submit2="searchHandler"
          @deleteHandler="deleteHandler">
        </search-form>
      </div>
      <table-form
        v-loading.body="isLoadingTableData" 
        :colData="colData" 
        :data="tableData"    
        :row-key="rowKey" 
        :max-height="height" 
        :submiting="submiting" 
        :isShowOper="isShowOper" 
        border 
        :stripe="true"
        :sortable="sortable" 
        :row-class-name="tableRowClassName">  
        <el-table-column 
          v-for="item in colData" 
          :key="item.prop" 
          :prop="item.prop" 
          :label="item.label" 
          :width="item.width" 
          :align="item.align" 
          :sortable="false">
        </el-table-column>
      </table-form>
      <!-- 分页 -->
      <el-row type="flex" justify="end" class="tableBottom">
        <el-pagination 
          @size-change="handleSizeChange" 
          @current-change="handleCurrentChange" 
          :current-page="currentPage" 
          :page-sizes="pageSizes" 
          :page-size="pageSize" 
          layout="total, sizes, prev, pager, next, jumper" 
          :total="total">
        </el-pagination>
      </el-row>
     </div>
    </div>
</template>
<script>
import BreadCrumb from '@/components/BreadCrumb.vue'
import TableForm from '@/components/Table.vue'
import SearchForm from './otherComponent/SearchForm.vue'

import Api from '@/api/index.js'

export default {
  name: 'AlarmHistory',
  components: {
    BreadCrumb,
    TableForm,
    SearchForm
  },
  data () {
    return {
      search: false,
      rulename: '',
      getRuleid: '',
      createtime: '',
      createtimeto: '',
      dialogLoading: false,
      breadCrumbList: [], // 面包屑
      /* -- 表格数据 -- */
      isQuery: false,
      colData: [], // 表格信息
      tableData: [],
      rowKey: 'id',
      userguid: '',
      submiting: false,
      sortable: true,
      isShowOper: false,
      selectionData: [], // 已勾选数据列表
      /* --- 分页 -- */
      reserveSelection: true,
      currentPage: 1,
      pageSize: 15,
      pageSizes: [15, 30, 50, 100],
      total: null,
      height: '330',
      isLoadingTableData: false,
      checkAll: true,
      roleId: '',
      index: null // 当前行
    }
  },
  computed: {  
    setRuleId() {
      return this.$store.state.setRuleId
    },
    gisopUserInfo() {    
      return this.$store.state.gisopUserInfo
    }
  },
  created() {
    this.ruleid = this.$route.params.ruleid
    this.selectHistoryByPageList(this.currentPage, this.pageSize, this.ruleid)
  },
  mounted() {
    this.init()
  },
  destroyed() {
    window.addEventListener('resize', this.handleFn)
  },
  watch: {
    gisopUserInfo (val) {
      if (val.userguid === undefined) {
        return false
      } else {
        this.loginduserguid = val.userguid.trim()
      }
    }
  },
  methods: {
    tableRowClassName (row, index) {
      if (index === this.index) {
        return 'info-row'
      }
      return ''
    },
    init() {
      this.breadCrumbList = [
      { title: '服务器监控' },
      { title: '报警历史' }
      ]
      this.colData = [
        { prop: 'hostname', label: '实例名称', width: '300', sortable: false, align: 'center' },
        { prop: 'alarmtime', label: '发生时间', width: '300', sortable: false, align: 'center' },
        { prop: 'lasttime', label: '持续时间', width: '200', sortable: false, align: 'center' },
        { prop: 'rulename', label: '规则名称', width: '200', sortable: false, align: 'center' },
        { prop: 'notifytypeString', label: '通知方式', width: '200', sortable: false, align: 'center' },
        { prop: 'statusString', label: '状态', width: '200', sortable: false, align: 'center' },
        { prop: 'notifyobject', label: '通知对象', sortable: false, align: 'center' }
      ]
      this.loginduserguid = this.gisopUserInfo.userguid
      if (this.loginduserguid === undefined) {
        return false
      } else {
        this.loginduserguid = this.loginduserguid.trim()
      }
      // 钩子
      this.$nextTick(() => {     
        this.handleFn()     
      })

      window.addEventListener('resize', this.handleFn)
    },
    // resize的函数
    handleFn () {      
      this.height = this.$refs.tableDataRef2.clientHeight - 133
    },
    // 分页操作
    handleSizeChange(val) {
      this.pageSize = val
      if (this.tableData !== null) {
        this.selectHistoryByPageList(this.currentPage, this.pageSize, this.ruleid, this.rulename, '', '', this.flag)
      }
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      if (this.tableData !== null) {
        this.selectHistoryByPageList(this.currentPage, this.pageSize, this.ruleid, this.rulename, '', '', this.flag)
      }
    },
    // 点击查询
    searchHandler (data) { 
      this.createtime = data[0]
      this.createtimeto = data[1]
      this.selectHistoryByPageList(this.currentPage, this.pageSize, this.ruleid, '', this.createtime, this.createtimeto, '')
    },
    deleteHandler () {    
      this.selectHistoryByPageList()
    },
    searchRule(data) {    
      this.rulename = data
      this.selectHistoryByPageList(this.currentPage, this.pageSize, '', this.rulename, '', '', '', '')    
    },
    serchEnterHandle () {  
      if (this.rulename !== '' || this.rulename !== undefined || this.rulename !== null) {
        this.searchRule()   
      }
    },
    handleTimeBtnClick (data) { 
      this.flag = data
      this.selectHistoryByPageList(this.currentPage, this.pageSize, this.ruleid, this.rulename, '', '', this.flag)
    },
    selectHistoryByPageList (currentPage, pageSize, ruleid, rulename, createtime, createtimeto, flag) {     
      this.currentPage = currentPage
      this.pageSize = pageSize
      this.ruleid = ruleid
      this.rulename = rulename
      this.createtime = createtime
      this.createtimeto = createtimeto
      this.flag = flag
      Api.selectHistoryByPage(this.currentPage, this.pageSize, this.ruleid, this.rulename, this.createtime, this.createtimeto, this.flag)
      .then(data => {
      this.isLoadingTableData = false
      let datas = data.data
      this.tableData = []
      this.total = null
      if (data.status === 0) {
        if (datas.total > 0) {
          this.tableData = datas.data  
          this.total = datas.total      
        } else {           
          this.$message({
            type: 'success',
            message: '您最近没有报警历史！'
          })
        }
      } else {
        this.$message({
          type: 'error',
          message: '获取数据失败！'
        })
      }
      })    
      }
    }
}

</script>
<style lang="scss">
.alarmHistory {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;

  .tableCon {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .tableBottom {
    padding-top: 10px;
    height: 51px;
  }
}

</style>
