<template>
  <!-- 进度预警 -->
  <div class="fullHeight">
    <div class="searchBox whiteBlock">
      <el-form
        :inline="true"
        size="medium"
        :model="queryInfo"
        class="demo-form-inline"
      >
        <el-form-item :label="'分布分项工程'" prop="workerName">
          <el-input
            v-model="queryInfo.taskName"
            :placeholder="$t('message.personnelPosition.please_enter')"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="报警时间">
          <el-date-picker
            v-model="daterange"
            @change="changeDate"
            type="daterange"
            :range-separator="$t('message.energyManage.to')"
            :start-placeholder="$t('message.energyManage.start')"
            :end-placeholder="$t('message.energyManage.end')"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain @click="getWarningListData">查询</el-button>
          <el-button type="warning" plain @click="refresh">刷新</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table_wrap whiteBlock">
      <vue-scroll>
        <el-table class="tables" :data="tableList">
          <el-table-column
            type="index"
            :label="$t('message.projectManage.serialNumber')"
            align="center"
            width="50"
          >
          </el-table-column>
          <el-table-column
            prop="taskName"
            align="center"
            label="任务名称"
          ></el-table-column>
          <el-table-column
            prop="alarmDetails"
            width="500"
            align="center"
            label="报警详情"
          ></el-table-column>
          <el-table-column
            prop="createDate"
            align="center"
            label="报警时间"
          ></el-table-column>
        </el-table>
      </vue-scroll>
    </div>
    <el-pagination
      class="pagerBox"
      style="position: absolute; top: 85%; left: 40%"
      @size-change="SizeChange"
      @current-change="CurrentChange"
      :current-page="pagInfo.pageNo"
      :page-sizes="$store.state.PAGESIZRS"
      :page-size="pagInfo.pageSize"
      layout="total, sizes, prev, pager, next"
      :total="Number(pagInfo.total)"
      background
    ></el-pagination>
  </div>
</template>
<script>
import {
  getTaskProgressAlarmPageApi
} from "@/assets/js/api/progressManagement";
export default {
  mounted() { },
  data() {
    return {
      projectSn: '',
      tableList: [],
      deviceIdArr: [],
      queryInfo: {
        taskName: '',
        startTime: '',
        endTime: '',
      },
      pagInfo: {
        pageNo: 1, //页数
        pageSize: 10, //条数
        total: 0 //总条数
      },
      List: [],
      daterange: []
    }
  },
  created() {
    this.projectSn = this.$store.state.projectSn
    this.getWarningListData()
  },
  methods: {
    //获取列表数据
    getWarningListData() {
      let data = {
        projectSn: this.projectSn,
        pageNo: this.pagInfo.pageNo,
        pageSize: this.pagInfo.pageSize,
        taskName: this.queryInfo.taskName,
        createDate_begin: this.queryInfo.startTime,
        createDate_end: this.queryInfo.endTime,
      }
      getTaskProgressAlarmPageApi(data).then((res) => {
        console.log('返回的值', res)
        if (res.code == 200) {
          this.tableList = res.result.records
          this.pagInfo.total = res.result.total
        }
      })
    },
    changeDate() {
      if (this.daterange) {
        this.queryInfo.startTime = this.daterange[0]
        this.queryInfo.endTime = this.daterange[1]
      } else {
        this.queryInfo.startTime = ''
        this.queryInfo.endTime = ''
      }
    },
    //刷新按钮
    refresh() {
      this.queryInfo = {}
      this.daterange = []
      this.pagInfo.pageNo = 1 //页数
      this.pagInfo.pageSize = 10 //条数
      this.getWarningListData()
    },

    SizeChange(val) {
      this.pagInfo.pageSize = val
      this.getWarningListData()
    },
    CurrentChange(val) {
      this.pagInfo.pageNo = val
      this.getWarningListData()
    }
  }
}
</script>
<style lang="less" scoped>
.searchBox > div {
  margin-right: 15px;
}
</style>
