<template>
  <el-dialog title="报警列表" :visible.sync="dialogFormVisible" append-to-body>
    <div class="setting-content">
      <search-area size="small" @search="search">
        <search-item>
          <el-date-picker
            size="small"
            v-model="timeRange"
            clearable
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"/>
        </search-item>
      </search-area>
      <normal-table :data="list" :total="total" :columns="columns" :query="listQuery" :list-loading="listLoading" @change="changePage">
        <template slot="columns"/>
      </normal-table>
    </div>
  </el-dialog>
</template>

<script>
  import { getAlarmList } from '@/api/alarm'
export default {
  name: 'Alarm',
  components: {},
  data() {
    return {
      list:[],
      dialogFormVisible: false, // 对话框是否显示
      dialogStatus: '', // 对话框类型：create,update
      listQuery: {
        startDate: '',
        endDate: '',
        offset: 1,
        limit: 10,
        sort: '',
        order: ''
      }, // 筛选条件
      columns: [
        {
          text: '报警类型',
          value: 'alarmContent',
          align: 'center'
        },
        {
          text: '报警数值',
          value: 'alarmValue',
          width: 180,
          align: 'center'
        },
        {
          text: '报警时间',
          value: 'alarmTime',
          width: 180,
          align: 'center'
        }
      ], // 显示列
      timeRange:[],
      list: [], // 列表数据
      total: 0, // 数据总数
      listLoading: true, // 加载动画
      fullscreenLoading: false, // 全屏加载动画
      dialogFormVisible: false // 是否显示编辑框
    }
  },
  watch:{
    timeRange(val){
      if (this.timeRange && this.timeRange.length > 0) {
        this.listQuery.startDate = this.timeRange[0]
        this.listQuery.endDate = this.timeRange[1]
      } else {
        this.listQuery.startDate = ''
        this.listQuery.endDate = ''
      }
    }
  },
  computed: {

  },
  mounted: function() {
  },
  methods: {

    // 初始化对话框
    initDialog: function() {
      this.dialogFormVisible = true
      this.search()
    },
    search(isNowPage = true) {
      this.listLoading = true
      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
        this.listQuery.offset = 1
      }
      getAlarmList(this.listQuery).then(response => {
        this.list = response.data.rows
        this.total = parseInt(response.data.total)
        this.listLoading = false
      })
    },
    indexMethod(index) {
      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
    },
    cancel: function() {
      this.dialogFormVisible = false
      this.$emit('watchChild')
    },
    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
    changePage(val) {
      if (val && val.size) {
        this.listQuery.limit = val.size
      }
      if (val && val.page) {
        this.listQuery.offset = val.page
      }
      this.search()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
  .el-tabs__item:hover {
    color: #303133 !important;
    cursor: pointer;
  }
  .el-tabs__item.is-active {
    color: #303133 !important;
  }
  .el-tabs__item {
    font-size: 16px !important;
  }
    .el-dialog__body{
    padding-top: 10px !important;
  }
  .el-dialog{
    width:700px;
  }
  .setting-content{
    height: 450px;
  }
</style>