<template>
  <div class="container">
    <div class="frist">
      <div class="input">
        {{ name }}： {{ currentVls }} MPa
      </div>
      <div class="input">
        报警阀值：{{ configInfo.thresholdVol }} MPa
      </div>
      <el-button class="btnBorder" @click="showConfig">设置</el-button>
    </div>
    <div class="content">
      <div>
        <el-button type="primary" size="mini" round @click="sirenList">报警列表</el-button>
      </div>
      <div>
        <el-button v-if="istable1" type="primary" size="mini" round style="width:100px" @click="clearData">一键消警
        </el-button>
      </div>
      <div>
        <el-button type="primary" size="mini" round @click="historyData">历史数据</el-button>
      </div>
    </div>
    <div class="last">
      <slot>

      </slot>
      <div
        style="margin: 10px 0;display: flex; justify-content: flex-end;"
      >
        <el-pagination
          ref="listpage"
          background
          layout="prev, pager, next"
          :pager-count="5"
          :page-size="20"
          :total="total"
          :hide-on-single-page="true"
          @next-click="nextClick"
          @prev-click="prevClick"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DataTableAtmo',
  props: ['name', 'istable1', 'configInfo', 'currentVls','total'],
  data() {
    return {}
  },
  methods: {
    clearData() {
      this.$emit('clearData')
    },
    sirenList() {

      this.$emit('sirenList')
      this.$refs.listpage.handleCurrentChange(1)
    },
    historyData() {
      this.$refs.listpage.handleCurrentChange(1)
      this.$emit('historyData')
    },
    showConfig() {
      this.$emit('changeShow', this.configInfo)
    },
    handleSizeChange(val) {
      console.log(``)
    },
    handleCurrentChange(val) {
      if (this.istable1 === true) {
        this.$emit('handleCurrentAtmo', val)
      } else {
        this.$emit('handleCurrentHistoryAtmo', val)
      }
    },
    prevClick(val) {
      if (this.istable1 === true) {
        this.$emit('prevClickAtmo', val)
      } else {
        this.$emit('prevClickHistoryAtmo', val)
      }
    },
    nextClick(val) {
      if (this.istable1 === true) {
        this.$emit('nextClickAtmo', val)
      } else {
        this.$emit('nextClickHistoryAtmo', val)
      }
    }
  }
}
</script>

<style lang="scss" scoped>

.container {
  width: 100%;

}

.frist {
  display: flex;
  justify-content: space-around;
  align-items: center

}

.content {
  margin: 10px 0;
  display: flex;
  justify-content: space-around;
}

.content > div {
  flex: 1;
}

.btnBorder {
  border: 1px solid #999;
  padding: 2px;
  box-sizing: border-box;
  cursor: pointer;
}
</style>