<template>
  <div class="container">
    <div class="frist">
      <div class="input">
        {{ name }}： {{ currentVls }} {{unit}}
      </div>
      <div class="input">
        报警阀值：{{ thresholdVol }} {{ unit }}
      </div>
      <el-button type="primary" size="small" @click="showConfig">
        设置
      </el-button>
    </div>
    <div class="content">
      <el-tabs v-model="currentTab" @tab-click="handleClick">
        <el-tab-pane label="报警列表" name="alarm">
          <el-button type="primary" size="small" @click="clearAlarm">
            一键消警
          </el-button>
          <use-table
            :columns="alarmTableColumns"
            :data="alarmList"
          />
          <div style="margin: 10px 0;display: flex; justify-content: flex-end;">
            <el-pagination
              ref="listpage1"
              background
              layout="prev, pager, next"
              :current-page="alarmQuery.offset"
              :page-size="alarmQuery.pageSize"
              :total="totalAlarm"
              hide-on-single-page
              @size-change="val=>{handleSizeChange('alarm', val)}"
              @current-change="val=>{handleCurrentChange('alarm', val)}"
            />
          </div>
        </el-tab-pane>
        <el-tab-pane label="历史数据" name="history">
          <use-table
            :columns="dataTableColumns"
            :data="dataList"
          />
          <div style="margin: 10px 0;display: flex; justify-content: flex-end;">
            <el-pagination
              ref="listpage2"
              background
              layout="prev, pager, next"
              :current-page="dataQuery.offset"
              :page-size="dataQuery.pageSize"
              :total="totalData"
              hide-on-single-page
              @size-change="val=>{handleSizeChange('data', val)}"
              @current-change="val=>{handleCurrentChange('data', val)}"
            />
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <show-config
      ref="configDialog"
      :config-info="configInfo"
      :device-type="deviceType"
      @close="closeConfig"
    />
  </div>
</template>

<script>
import { batchCancelled, gitNewVls, listPage, warnList } from '@/api/models'
import UseTable from '../../components/homeComp/useTable.vue'
import showConfig from '../../components/homeComp/showConfig.vue'
export default {
  name: 'DataTable',
  components:{ UseTable, showConfig },
  props: {
    deviceType: {
      type: String,
      required: true
    },
    devcode: {
      type: String,
      default:''
    },
    unit: {
      type: String,
      default:'ppm'
    },
    name: {
      type: String,
      default: ''
    }, // 名称
    currentVls: {
      type: String,
      default: ''
    }, // 数值
    configInfo: {
      type: Object,
      default: () => {
        return {
          thresholdVol: '20%',
          collectInterval: 10,
          uploadCycle: '7',
          retryNum: '5',
          IP: '192.0.0.1',
          port: '8081',
          current: 30,
          id: '23'
        }
      }
    }
  },
  data() {
    return {
      thresholdVol:0, // 报警阈值
      alarmQuery: {
        deviceType: '',
        devcode: '',
        currentIndex: 1,
        pageSize: 20
      },
      dataQuery: {
        deviceType: '',
        devcode: '',
        currentIndex: 1,
        pageSize: 20
      },
      alarmTableColumns: [
        { value: 'id', text: '编号', width: '80' },
        { value: 'devcode', text: '设备编号' },
        { value: 'alarmTime', text: '时间', width: 180 }
      ],
      dataTableColumns: [
        { value: 'devcode', text: '设备编号' },
        { value: 'dataValue', text: '历史数值' },
        { value: 'uptime', text: '时间', width: 180 }
      ],
      alarmList: [],
      dataList: [],
      currentTab: 'alarm', // 当前tab
      totalAlarm: 0, // 数据总数
      totalData: 0 // 数据总数
    }
  },
  mounted() {
    this.fetchAlarm()
    this.fetchVls()
  },
  methods: {
    handleClick(tab) {
      if (tab.name === 'alarm') {
        this.fetchAlarm()
      } else {
        this.fetchData()
      }
    },
    fetchVls(){
      gitNewVls(this.deviceType).then(res => {
        if (res.code === 200) {
          this.thresholdVol = res.data
        }
      })
    },
    // 报警列表
    fetchAlarm() {
      this.alarmQuery.deviceType = this.deviceType
      this.alarmQuery.devcode = this.devcode
      warnList(this.alarmQuery).then(res => {
        this.alarmList = res.data.rows
        this.totalAlarm = res.data.total
      })
    },
    fetchData() {
      this.dataQuery.deviceType = this.deviceType
      this.dataQuery.devcode = this.devcode
      listPage(this.dataQuery).then(res => {
        this.totalData = res.data.total
        this.dataList = res.data.rows
      })
    },
    clearAlarm() {
      // 消警操作
      batchCancelled({ deviceType: this.deviceType }).then(res => {
        if (res.code === 200) {
          this.fetchAlarm()
        }
      })
      // this.tableDataCH4 = [];
    },
    showConfig() {
      this.$emit('changeShow', this.configInfo)
      this.$refs.configDialog.initDialog()
    },
    closeConfig(){
      this.fetchVls()
    },
    // 改变页容量
    handleSizeChange(type, val) {
      if (type === 'alarm') {
        this.alarmQuery.pageSize = val
        this.fetchAlarm()
      } else {
        this.dataQuery.pageSize = val
        this.fetchData()
      }
    },
    // 改变当前页
    handleCurrentChange(type, val) {
      if (type === 'alarm') {
        this.alarmQuery.currentIndex = val
        this.fetchAlarm()
      } else {
        this.dataQuery.currentIndex = val
        this.fetchData()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;

}
.frist {
  display: flex;
  justify-content: space-between;
  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>