<template>
  <div>
    <div class="content-container">
      <el-table
        ref="cbillSelectTable"
        v-loading="listLoading"
        row-key="id"
        :data="list"
        border
        style="width: 100%"
        height="calc(100vh - 476px)"
      >
        <div slot="empty">
          <span>没有数据</span>
        </div>

        <el-table-column label="检测指标" prop="earlyWarningConfigurationBillName" :show-overflow-tooltip="true" align="center" />
        <el-table-column label="报警时间" width="140" :show-overflow-tooltip="true" align="center">
          <template slot-scope="{ row }">
            {{ row.warningTime | datetime }}
          </template>
        </el-table-column>
        <el-table-column label="预警值" prop="warningValue" width="150" align="center" />
        <el-table-column label="标准值" prop="standardValue" width="150" align="center" />
        <el-table-column label="报警等级" prop="warningLevelName" width="80" align="center" />
      </el-table>
      <pagination
        class="el-pagination"
        :total="total"
        :skip-count.sync="listQuery.skipCount"
        :max-result-count.sync="listQuery.maxResultCount"
        @pagination="getList"
      />

    </div>
  </div>
</template>

<script>
import * as interfaceApi from '@/api/device-warning.js'

import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination

export default {
  name: 'WarningBillTableMng',
  directives: { waves },
  components: { Pagination },
  props: {
    warningId: { type: String, default: null }
  },
  data() {
    return {
      list: [],
      total: 0,
      listLoading: false,
      listQuery: {
        deviceWarningId: undefined,
        skipCount: 0,
        maxResultCount: 10
      }
    }
  },
  computed: {
  },
  watch: {
    warningId: {
      deep: true,
      immediate: true,
      handler(val) {
        this.getList()
      }
    }
  },
  mounted() {
    this.getList()
  },
  created() {
  },
  methods: {
    // 清空下拉
    delValue(parameter) {
      this.listQuery[parameter] = undefined
    },
    // 获取数据列表
    getList() {
      var that = this
      if (!that.warningId) {
        that.list = []
        return
      }
      that.listQuery.deviceWarningId = that.warningId
      that.listLoading = true
      interfaceApi
        .getDetails(that.listQuery)
        .then(res => {
          that.list = res.items
          that.total = res.totalCount
        })
        .finally(() => {
          that.listLoading = false
        })
    },
    // 查询
    handleFilter() {
      this.listQuery.skipCount = 0
      this.getList()
    }
  }
}
</script>

<style scoped>
.content-container >>> .el-table{
  overflow: hidden;
  height: 500px;
}
.content-container >>> .el-table__body-wrapper{
 overflow: auto;
  height: 91%;
}
.el-pagination >>> .el-input{
width: 50px;
}
</style>
