<template>
  <div class="big-alarm-table-list-wrap">
    <div class="title-t">{{title}}</div>
    <div class="query-right-div">
      <el-checkbox-group v-model="queryCheckbox">
        <el-checkbox label="warning">包含预警</el-checkbox>
        <el-checkbox label="off">只显示离线报警</el-checkbox>
      </el-checkbox-group>
    </div>
    <el-table :data="list" class="alarm-table" height="212" :highlight-pageNum-row="true">
      <el-table-column prop="projectName" label="项目" align="center" width="250">
       <template slot-scope="scope">
         <div>
          <i class="iconfont iconbaojing" v-if="scope.row.processStatus === 'UNPROCESS'" style="color: #FF2F60;"></i>
          <i class="iconfont iconbaojing" v-if="scope.row.processStatus === 'PROCESSED'" style="color: #25F094;"></i>
          <i class="iconfont iconbaojing" v-if="scope.row.processStatus === 'IGNORE'" style="color: #25F094;"></i>
           <span style="margin-left: 10px;" v-text="scope.row.projectName"></span>
         </div>
        </template>
      </el-table-column>
      <el-table-column prop="projectAddress" label="地址" align="left"></el-table-column>
      <el-table-column prop="deviceName" label="线路" align="center" width="150"></el-table-column>
      <el-table-column
        prop="alarmDivide"
        label="报警划分"
        align="center"
        width="150"
        :formatter="alarmTypeFormatter"
      ></el-table-column>

      <el-table-column
        prop="typeName"
        label="报警类型"
        align="center"
        width="150"
      ></el-table-column>
      <el-table-column prop="alarmTime" label="报警时间" align="center" width="160"></el-table-column>
      <!-- <el-table-column prop="t6" label="耗时" align="center" width="150"></el-table-column> -->
      <el-table-column prop="processStatus" label="状态" align="center" width="150">
        <template slot-scope="scope">
          <span v-if="scope.row.processStatus === 'UNPROCESS'" :style="'color: #FF2F60;'">未处理</span>
          <span v-if="scope.row.processStatus === 'PROCESSED'" :style="'color: #25F094;'">已处理</span>
          <span v-if="scope.row.processStatus === 'IGNORE'" :style="'color: #c0c4cc;'">忽略</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { appAlarmRecordList } from "@/api/app";
export default {
  name: "alarmTableList",
  props: ["projectId"],
  data() {
    return {
      title: "实时报警列表",
      queryCheckbox: [],
      list: []
    };
  },
  created() {
    this.getAlarmRecrdList();
  },
  watch: {
    projectId(val, oldval) {
      this.getAlarmRecrdList();
    },
    queryCheckbox(val,oldVal) {
      this.getAlarmRecrdList();
    }
  },
  methods: {
    alarmTypeFormatter(row) {
      if (row.alarmDivide === "ALARM") {
        return "报警";
      } else if (row.alarmDivide === "WARNING") {
        return "预警";
      }
    },
    getAlarmRecrdList() {
      appAlarmRecordList({
        alarmDivide:
          this.queryCheckbox.indexOf("warning") < 0 ? "ALARM" : undefined,
        deviceState:
          this.queryCheckbox.indexOf("off") >= 0 ? "OFFLINE" : undefined,
        projectId: this.projectId || undefined,
        pageNum: 1,
        pageSize: 5
      }).then(res => {
        this.list = res.rows;
      });
    }
  }
};
</script>
<style lang="scss">
.big-alarm-table-list-wrap {
  width: 100%;
  height: calc(100%);
  display: flex;
  flex-wrap: wrap;
  .title-t {
    font-size: 16px;
    letter-spacing: 1px;
    height: 60px;
    width: 400px;
    background-size: cover;
    display: flex;
    justify-content: left;
    padding-left: 45px;
    align-items: center;
    padding-bottom: 10px;
    background-image: url("../../../../assets/images/big/b.png");
  }
  .query-right-div {
    width: calc(100% - 400px);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 60px;
    .el-checkbox__label {
      color: #fff;
    }
  }
  .alarm-table {
    width: calc(100% - 20px);
    margin-left: 20px;
    .el-table__header-wrapper th,
    .el-table .el-table__fixed-header-wrapper th {
      background-color: #0124a9;
      background-color: #002cd27d;
      color: #fff;
      height: 50px;
      border: 0 !important;
      font-size: 15px;
      letter-spacing: 2px;
    }
    .el-table__empty-block {
      background: #0124a600;
    }
    tr {
      background: #0124a600;
      color: #fff;
    }
    .el-table__body-wrapper {
      background: #0124a600;
    }
    .el-table__body tr:hover > td {
      background-color: #0124a600 !important;
    }

    .el-table__body tr.current-row > td {
      background-color: #0124a9 !important;
    }
    .el-table__body-wrapper::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }
    /*滚动条滑块*/
    .el-table__body-wrapper::-webkit-scrollbar-thumb {
      background-color: #114f9d;
    }
  }
  .el-table {
    background-color: #ffffff00;
  }
}
</style>
