<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.workerName"
                        :placeholder="$t('message.personnelPosition.please_enter')" clearable></el-input>
        </el-form-item>
        <el-form-item label="时间筛选">
          <el-date-picker
            v-model="queryInfo.daterange"
            type="date"
            placeholder="选择日期" value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item> -->
        <el-form-item>
          <!-- <el-button type="primary" plain @click="query">{{
            $t("message.alarmWarning.query")
          }}</el-button> -->
          <el-button type="warning" plain @click="refresh">{{
            $t('message.alarmWarning.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="alarmType" align="center" label="报警类型">
            <template slot-scope="scope">
              {{
                scope.row.alarmType == 1
                  ? '逾期未开始'
                  : scope.row.alarmType == 2
                  ? '逾期未完成'
                  : '前置任务未完成'
              }}
            </template>
          </el-table-column>
          <el-table-column
            prop="createDate"
            align="center"
            label="创建时间"
          ></el-table-column>
          <el-table-column
            prop="updateDate"
            align="center"
            label="更新时间"
          ></el-table-column>
        </el-table>
      </vue-scroll>
      <el-pagination
        class="pagerBox"
        @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>
  </div>
</template>
<script>
import { getTaskAlarmApi } from '@/assets/js/api/scheduleInfo'

export default {
  mounted() {},
  data() {
    return {
      projectSn: '',
      tableList: [],
      deviceIdArr: [],
      queryInfo: {},
      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
      }
      getTaskAlarmApi(data).then((res) => {
        console.log('返回的值', res)
        if (res.code == 200) {
          this.tableList = res.result.records
          this.pagInfo.total = res.result.total
        }
      })
    },
    //刷新按钮
    refresh() {
      this.queryInfo = {}
      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">
.searchBox > div {
  margin-right: 15px;
}
</style>
