<template lang='pug'>
  div.infopage(:style="'height:'+hh+'px'")
    el-form(:inline='true', :model='dataForm'  size='mini' label-width="100px" label-position='left' :modal-append-to-body='false'  label-suffix='：' )
      el-row(:span='24' style="color:#fff")
        el-col(:md='8' :sm="12")
          el-form-item(label="设备名称" )
              el-input.inputWidth(v-model='dataForm.equName' clearable )
        el-col(:md='8' :sm="12")
          el-form-item(label="报警状态")
            el-select.inputWidth(style='width:200px;' v-model='dataForm.state' clearable)
              el-option(v-for="(e, i) in stateArr" :key="i" :label="e.label" :value="e.value")
        el-col(:md='8' :sm="12")
          el-form-item(label="报警防区" )
            el-input.inputWidth(v-model='dataForm.area' clearable )
      el-row(:span='24')
        el-col(:md='8' :sm="12")
          el-form-item(label="报警时间")
            el-date-picker.inputWidth( style='width:210px;'  v-model='dataForm.warningTimeArr' range-separator="至" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" value-format="timestamp")
        el-col( :md='1' :sm="12" style='float:right;')
          el-button(icon='el-icon-search',style='float:right;' @click='initDataList') 查 询
      el-row(:span='24')
        el-button(type='primary',style='float:left;' @click='dealBatch') 批量处理
        el-button(type='danger',style='float:left;margin-left：10px' @click='deleteBatch') 删除
    el-row(:span='24')
      el-table(:data="tableData" style="width: 100%;margin-top:20px" v-loading='dataListLoading' :height="hh-180" :header-cell-style="{background:'rgb(8, 109, 177)',color:'#fff'}"
      :cell-style="{background:'rgb(2, 79, 131)',color:'#fff'}" @selection-change="handleSelectionChange")
        el-table-column(type='selection', header-align='center', align='center', width='50')
        el-table-column(prop='equName',header-align='center',align='center',label='设备名称')
        el-table-column(prop='warningTime',header-align='center',align='center',label='报警时间')
        el-table-column(prop='area',header-align='center',align='center',label='报警防区')
        el-table-column(prop='remark',header-align='center',align='center',label='报警内容')
        el-table-column(prop='isvalid',header-align='center',align='center',label='报警有效性')
          template(slot-scope='scope')
            font(v-if='scope.row.isvalid === 0') 有效报警
            font(v-if='scope.row.isvalid === 1') 无效报警
        el-table-column(prop='state',header-align='center',align='center',label='报警状态')
          template(slot-scope='scope')
            font(v-if='scope.row.state === 0') 未处理
            font(v-if='scope.row.state === 1') 已处理
        el-table-column(prop='operateManName',header-align='center',align='center',label='处置人')
        el-table-column(prop='operateTime',header-align='center',align='center',label='处置时间')
        el-table-column(header-align='center',align='center',label='系统操作')
          template(slot-scope="scope")
            el-button(type="text" @click="queryHandle(scope.row.id)") 详情查看

    el-pagination(@size-change='sizeChangeHandle', @current-change='currentChangeHandle', :current-page='pageIndex', :page-sizes='[10, 20, 50, 100]', :page-size='pageSize', :total='totalPage', layout='total, sizes, prev, pager, next, jumper')
</template>

<script>
export default {
  data () {
    return {
      dataForm: {
        equName: '',
        state: null,
        area: '',
        warningTimeArr: '',
        hh: 300
      },
      stateArr: [{ label: '未处理', value: 0 }, { label: '已处理', value: 1 }],
      tableData: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      equViewVisible: false
    }
  },
  watch: {
    totalPage() { //注意这个函数的名字必须和你监听data中的属性的名字一样，这样才能当你data中的属性发生变化时，触发这个函数
      let pages = Math.ceil(this.totalPage / this.pageSize)//新数据总页数
      //总页数小于当前页数则重新加载列表数据
      if (pages < this.pageIndex) {
          this.pageIndex = pages || 1
          this.initDataList()//获取表格数据的方法
      }
    }
  },
  created () {
    this.hh = this.getClientHeight() - 200
    console.log(this.hh, 789789)

    this.initDataList()
  },
  methods: {
   getClientHeight() {
      var clientHeight = 0
      if (document.body.clientHeight && document.documentElement.clientHeight) {
      var clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      } else {
      var clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      }
      return clientHeight
    },
    initDataList () {
      this.dataListLoading = true
      let warningTimeStr = null
      let warningTimeEnd = null
      if (this.dataForm.warningTimeArr && this.dataForm.warningTimeArr.length > 0) {
        warningTimeStr = this.dataForm.warningTimeArr[0]
        warningTimeEnd = this.dataForm.warningTimeArr[1]
      }
      this.$http({
        url: this.$http.adornUrl('/eWarning/list'),
        method: 'POST',
        params: this.$http.adornParams({
          page: this.pageIndex,
          rows: this.pageSize,
          equName: this.dataForm.equName,
          state: this.dataForm.state,
          area: this.dataForm.area,
          remark: this.dataForm.remark,
          warningTimeStr: warningTimeStr,
          warningTimeEnd: warningTimeEnd
        })
      }).then((data) => {
        // console.log('data', data)
        if (data && data.code === 0) {
          this.tableData = data.page.records
          this.totalPage = data.page.total
        } else {
          this.tableData = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      })
    },
    // 每页数
    sizeChangeHandle (val) {
      this.pageSize = val
      this.pageIndex = 1
      this.initDataList()
    },
    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val
      this.initDataList()
    },
    // 多选
    handleSelectionChange (val) {
      this.dataListSelections = val
    },
    //查看
    queryHandle (id) {
      this.$router.push({
        path: '/sys/log',
        query: { warningId: id }
      })
    },
    //删除
    deleteBatch () {
      if (this.dataListSelections && this.dataListSelections.length > 0) {
        let arr = []
        let ids = ''
        this.dataListSelections.forEach(e => {
          arr.push(e.id)
        })
        ids = arr.join()
        this.$confirm('确认删除?', '删除', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(async () => {
            this.$showLoading()
            this.$http({
                url: this.$http.adornUrl(`/eWarning/delete`),
                method: 'post',
                params: this.$http.adornParams({ ids: ids })
            }).then((data) => {
                if (data && data.code === 0) {
                    this.$message.success('删除成功！')
                    this.initDataList()
                    this.$showLoading('close')
                }
            })
        }).catch(() => {
            this.$message.info('已取消')
        })
      } else {
        this.$message.error('请选择要删除的数据!')
      }
    },
    //批量处理
    dealBatch () {
      if (this.dataListSelections && this.dataListSelections.length > 0) {
        let arr = []
        let ids = ''
        let flag = false
        this.dataListSelections.forEach(e => {
          if (e.state === 1) {
            flag = true
          } else {
            arr.push(e.id)
          }
        })
        if (flag) {
          return this.$message.error('请选择未处理的数据!')
        }
        if (arr && arr.length > 0) {
          ids = arr.join()
          this.$confirm('是否处理?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
          }).then(async () => {
              this.$showLoading()
              this.$http({
                  url: this.$http.adornUrl(`/eWarning/dealWith`),
                  method: 'post',
                  params: this.$http.adornParams({ ids: ids })
              }).then((data) => {
                  if (data && data.code === 0) {
                      this.$message.success('处理成功！')
                      this.initDataList()
                      this.$showLoading('close')
                  }
              })
          }).catch(() => {
              this.$message.info('已取消')
          })
        }
      } else {
        this.$message.error('请选择要处理的数据!')
      }
    }
  }

}
</script>
<style lang='scss' scoped>
  .infopage{
    margin: 24px;
    padding:24px;
    padding-bottom: 60px;
    background-color: rgba(7, 58, 116, 0.596);
    // overflow: auto;
    .el-button{
      background-color: rgb(2, 79, 131);
      color: #fff;
      border-color: rgb(2, 79, 131);
    }

  }
</style>
<style lang='scss'>
.d2-theme-container-main-body{
  overflow: auto;
}
.d2-theme-container-main-body::-webkit-scrollbar {
  // display: none
}
 .infopage{
   .el-input__inner{
      // background-color: rgba(7, 58, 116, 0.596) !important;
      border-color: rgb(2, 79, 131);
      // border-color: rgb(8, 109, 177);
      color: #fff;
    }
    .el-range-input {
      // background-color: rgba(7, 58, 116, 0.596) !important;
      color: #fff
    }
    .el-table{
      // background-color: rgba(7, 58, 116, 0.596) !important;
    }
    .el-range-separator{
      color: #fff
    }
    .el-form-item__label {
      color: #fff;
    }
 }
  </style>