<template>
  <div class="big-alarm-table-list-wrap">
    <nav-temp htmlType="t2" :title="title">
      <div class="center-wrap" slot="mk-center">
        <div class="query-right-div">
          <div class="alarm-census-wrap">
            <div class="census-block">
              <img src="@/assets/images/big/v3/iconG.png" />
              已处理：
              <span style="color: #0cff00">{{result['processed']}}</span>
            </div>
            <div class="census-block image-twinkle">
              <img src="@/assets/images/big/v3/iconR.png" />
              未处理：
              <span style="color: red">{{result['unProcessed']}}</span>
            </div>
          </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="190"
          style="margin-top: 4px"
          :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)">
                </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)">
                </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="100"
          >
            <template slot-scope="scope">
              <span
                style="
                  width: 100px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                "
              >
                {{ scope.row.deviceName }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="alarmDivide"
            label="划分"
            align="center"
            width="100"
            :formatter="alarmTypeFormatter"
          ></el-table-column>

          <el-table-column
            prop="typeName"
            label="报警类型"
            align="center"
            :width="userLoginType !== 'PERSONAL' ? 120 : ''"
          ></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="120"
          >
            <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>
    </nav-temp>
  </div>
</template>
<script>
import { appAlarmRecordList } from "@/api/app";
import NavTemp from "./navTemp";
export default {
  name: "alarmTableList",
  components: {
    NavTemp,
  },
  props: ["projectId", 'result'],
  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: 20,
      }).then((res) => {
        this.list = res.rows;
      });
    },
  },
};
</script>
<style lang="scss">
.big-alarm-table-list-wrap {
  width: 100%;
  height: 280px;
  display: flex;
  flex-wrap: wrap;
  .center-wrap {
    width: 100%;
    height: calc(100% - 75px);
    justify-content: center;
    padding-top: 10px;
    background-size: contain;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: calc(100%);
    // height: calc(100% - 75px);
    padding: 0;
    .query-right-div {
      width: calc(100%);
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding-right: 40px;
      height: 30px;
      margin-top: -25px;
      justify-content: space-between;
      padding-left: 20px;
      .el-checkbox__label {
        color: #fff;
      }
      .alarm-census-wrap {
        display: flex;
        width: 600px;
        color: #fff;
        .census-block {
          // width: 50%;
          display: flex;
          align-items: flex-end;
          justify-content: flex-start;
          flex-wrap: nowrap;
          font-size: 16px;
          letter-spacing: 1px;
          margin-right: 10px;
          > img {
            margin-right: 5px;
          }
          > span {
            font-size: 18px;
            font-family: Source Han Sans CN;
            font-weight: bold;
            color: #0cff00;
            line-height: 26px;
          }
        }
        .image-twinkle {
          > img {
            animation-name: light;
            animation-duration: 1.25s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
            animation-direction: alternate;
          }
        }
      }
    }
    .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: #072d81;
        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__header-wrapper tr th {
        font-size: 14px;
        font-family: "Source Han Sans CN";
        font-weight: 400;
        color: #00feff;
        line-height: 16px;
        background: #072d81;
        height: 35px !important;
      }
    }
    .el-table {
      background-color: #ffffff00;
      td {
        border-bottom: 1px solid #06459f;
        padding: 3px 0;
      }
    }
    .el-table::before {
      height: 0px;
    }
    .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/v3/btnR.png");
    }
    .bj-jc {
      background-image: url("../../../../assets/images/big/v3/btnG.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;
    }
  }
  @keyframes light {
    from {
      opacity: 1;
    }
    to {
      opacity: 0.2;
    }
  }
}
</style>
