<template>
  <div class="big-alarm-table-list-wrap">
    <div class="mk-top">{{title}}</div>
    <div class="mk-conter">
      <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 alarm-table-tr"
        height="212"
        :highlight-pageNum-row="true"
      >
        <el-table-column prop="projectName" label="项目" v-if="userLoginType !=='PERSONAL'" align="center" width="350">
          <template slot-scope="scope">
            <div style="display: flex;align-items: center;">
              <div :class="returnStartImg(scope.row.processStatus)">
                <svg-icon
                  icon-class="bigS_alarm"
                  class="big-wraring-svg"
                  v-if="scope.row.processStatus === 'UNPROCESS'"
                  style="color: #FF2F60;"
                />
                <svg-icon
                  icon-class="bigS_jc"
                  class="big-wraring-svg"
                  v-if="scope.row.processStatus === 'PROCESSED'"
                  style="color: #25F094;"
                />
                <svg-icon
                  icon-class="bigS_jj"
                  class="big-wraring-svg"
                  v-if="scope.row.processStatus === 'IGNORE'"
                  style="color: #FF8400;"
                />
                <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: #FF8400;">紧急</span>
              </div>
              <span style="margin-left: 10px;" v-text="scope.row.projectName"></span>
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="deviceName" label="线路" v-else align="center" >
          <template slot-scope="scope">
            <div style="display: flex;align-items: center;">
              <div :class="returnStartImg(scope.row.processStatus)">
                <svg-icon
                  icon-class="bigS_alarm"
                  class="big-wraring-svg"
                  v-if="scope.row.processStatus === 'UNPROCESS'"
                  style="color: #FF2F60;"
                />
                <svg-icon
                  icon-class="bigS_jc"
                  class="big-wraring-svg"
                  v-if="scope.row.processStatus === 'PROCESSED'"
                  style="color: #25F094;"
                />
                <svg-icon
                  icon-class="bigS_jj"
                  class="big-wraring-svg"
                  v-if="scope.row.processStatus === 'IGNORE'"
                  style="color: #FF8400;"
                />
                <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: #FF8400;">紧急</span>
              </div>
              <span style="margin-left: 10px;" v-text="scope.row.deviceName"></span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="projectAddress" label="地址" v-if="userLoginType !=='PERSONAL'" align="left"></el-table-column>
        <el-table-column prop="deviceName" label="线路"  align="center" v-if="userLoginType !=='PERSONAL'" 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=" userLoginType !=='PERSONAL' ? 150 : ''"></el-table-column>
        <el-table-column prop="alarmTime" label="报警时间" align="center"  :width=" userLoginType !=='PERSONAL' ? 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>
    <div class="mk-bottom"></div>
  </div>
</template>
<script>
import { appAlarmRecordList } from "@/api/app";
export default {
  name: "alarmTableList",
  props: ["projectId"],
  data() {
    return {
      title: "实时报警列表",
      queryCheckbox: [],
      list: [],
       userLoginType: ""
    };
  },
  created() {
    this.userLoginType = this.$store.getters.userType;
    this.getAlarmRecrdList();
  },
  watch: {
    projectId(val, oldval) {
      this.getAlarmRecrdList();
    },
    queryCheckbox(val, oldVal) {
      this.getAlarmRecrdList();
    }
  },
  methods: {
    returnStartImg(val) {
      switch (val) {
        case "UNPROCESS":
          return "table-start-w bj-a";
          break;

        case "IGNORE":
          return "table-start-w bj-jj";
          break;

        case "PROCESSED":
          return "table-start-w bj-jc";
          break;
      }
    },
    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: 290px;
  display: flex;
  flex-wrap: wrap;
  .mk-top {
    height: 30px;
    width: 100%;
    display: flex;
    justify-content: center;
    font-size: 16px;
    font-family: "Source Han Sans CN";
    font-weight: 400;
    color: #02d9fd;
    padding-left: 0;
    align-items: end;
    padding-bottom: 0px;
    letter-spacing: 1px;
    background-size: cover;
    padding-top: 4px;
    background-image: url("../../../../assets/images/big/boxgao-t.png");
  }
  .mk-conter {
    width: 100%;
    height: calc(100% - 60px);
    justify-content: center;
    padding-top: 10px;
    background-image: url("../../../../assets/images/big/boxgao-c.png");
    background-size: contain;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: calc(100%);
    height: calc(100% - 60px);
    padding: 0 20px;
    .query-right-div {
      width: calc(100%);
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding-right: 60px;
      height: 30px;
      .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: 16px;
        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;
      }
      .has-gutter > tr {
        color: #909399;
        font-weight: 500;
      }
    }
    .el-table {
      background-color: #ffffff00;
      td {
        border-bottom: 1px solid #182762;
      }
    }
    .table-start-w {
      width: 88px;
      height: 41px;
      margin-right: 30px;
      display: flex;
      justify-content: space-evenly;
      font-size: 15px;
      font-family: "Adobe Heiti Std";
      font-weight: normal;
      color: #ffc000;
      line-height: 25px;
      align-items: center;
      .big-wraring-svg {
        font-size: 22px;
      }
    }
    .bj-a {
      background-image: url("../../../../assets/images/big/biao_06.png");
    }
    .bj-jc {
      background-image: url("../../../../assets/images/big/biao_08.png");
    }
    .bj-jj {
      background-image: url("../../../../assets/images/big/biao_03.png");
    }
  }
  .alarm-table-tr {
    .el-table__body-wrapper tbody tr {
      background: #0124a600;
      color: #fff;
      background-size: cover;
      width: 100%;
      height: 50px;
      margin-bottom: 10px;
      // border: 1px solid red;
    }
  }

  .mk-bottom {
    height: 30px;
    width: 100%;
    background-size: cover;
    background-image: url("../../../../assets/images/big/boxgao-b.png");
  }
}
</style>
