<template>
  <div
    class="currentWarningCardTableBox"
    :class="$store.state.currentWarningCardClass"
  >
    <el-table
      :data="tableData"
      class="table"
      height="30vh"
      :header-cell-style="{
        background: '#000000',
        color: 'rgb(220,220,220)',
        padding: '4px',
        fontSize: '14px',
        'border-bottom': 'solid 1px black',
      }"
      :cell-class-name="setCellClassName"
    >
      <el-table-column
        prop="lastUpdateTime"
        align="center"
        label="时间"
        width="150"
      >
      </el-table-column>
      <el-table-column prop="alertText" align="center" label="描述" width="280">
      </el-table-column>
      <el-table-column prop="isSelected" align="center" label="确认">
        <template v-slot="scope">
          <input
            type="checkbox"
            v-model="scope.row.isSelected"
            @click="itemChecked(scope.row)"
          />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import MessageBridge from "utils/MessageBridge";
import BackgroundData from "utils/BackgroundData";
import api from "api/index";

export default {
  name: "AlarmArea",
  components: {},
  created() {
    this.faultMessage();
    this.intervals = setInterval(this.faultMessage, 15000);
  },
  props: {
    activeTab: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      values: [],
      tableData: [],
      dialogVisible: false,
      showSvg: false,
      svgVisible: false,
      svgWeb: "",
      stationName: "",
      currentWindturbine: {},
      audio: null,
      intervals: null,
    };
  },
  methods: {
    filtrationData(activeTab) {
      let syzAlarm = [];
      let syzBase = [];
      this.values.forEach((ele) => {
        if (
          ele.stationId === activeTab &&
          ele.rank === this.$store.state.syzAlarmRank &&
          ele.category1 === "SYZ"
        ) {
          syzAlarm.push(ele);
        } else if (ele.stationId === activeTab && ele.category1 === "SYZ") {
          syzBase.push(ele);
        }
      });

      this.$store.commit(
        "currentWarningCardClass",
        syzAlarm.length ? "show" : ""
      );

      this.tableData = [].concat(syzAlarm, syzBase);
    },
    faultMessage(json) {
      api.alarmFault().then((res) => {
        if (res.data) {
          let val = res.data;
          if (Object.keys(val).length > 0) {
            let sleected = {};
            this.values.forEach((it) => {
              if (it.isSelected) {
                sleected[it.id] = 0;
              }
            });
            this.values = new Array();
            for (let v in val) {
              let vl = val[v];
              if (vl.stationId != "QS_FDC" && vl.category1 == "FJ") {
                vl.alertText = vl.windturbineName + "-" + vl.alertText;
              }
              if (
                sleected[vl.id] == 0 &&
                BackgroundData.getInstance().LoginUser
              ) {
                vl.isSelected = true;
              }
              if (vl.category1 !== "GF" && vl.objectId.indexOf("GDC") === -1) {
                this.values.push(vl);
              }
            }
            this.filtrationData(this.activeTab);
          }
        }
      });
    },
    close() {
      this.dialogVisible = false;
      this.svgVisible = false;
    },
    itemChecked(row) {
      if (row.isSelected == true) {
        row.isSelected = false;
        return;
      }
      let bd = BackgroundData.getInstance();
      if (!bd.LoginUser) {
        this.$notify({
          title: "请登录",
          message: "确认报警需要先登录！",
          type: "warning",
          position: "bottom-right",
          offset: 60,
          duration: 3000,
        });
        row.isSelected = false;
        return;
      }
      row.isSelected = true;
      this.confirm(row);
    },
    confirm(item) {
      api
        .sendWarning({
          snapID: item.snapIDString,
          faultID: item.idString,
          userName: BackgroundData.getInstance().LoginUser.name,
        })
        .then((msg) => {
          let mms = msg.data > 0 ? "报警确认成功！" : "报警确认出现错误!";
          let tp = msg.data > 0 ? "success" : "error";
          msg.data === 0 ? (item.isSelected = false) : "";
          this.$notify({
            title: "报警",
            message: mms,
            type: tp,
            position: "bottom-right",
            offset: 60,
            duration: 3000,
          });
        });
    },
    setCellClassName({ row }) {
      if (row.rank === this.$store.state.syzAlarmRank) {
        return "cellBase flicker";
      } else {
        return "cellBase";
      }
    },
  },
  unmounted() {
    clearInterval(this.intervals);
    this.intervals = null;
  },
  watch: {
    activeTab(res) {
      this.filtrationData(res);
    },
  },
};
</script>
<style scoped>
.el-table::before {
  width: 0;
}

.table {
  background-color: rgba(0, 0, 0, 0.5);
}

:deep(.el-table__body-wrapper::-webkit-scrollbar) {
  width: 8px;
  height: 0px;
  background-color: black;
}

:deep(.el-table__body-wrapper::-webkit-scrollbar-thumb) {
  background-color: #292929;
  border-radius: 6px;
}

:deep(.el-table td, .el-table th) {
  border-bottom: 2px solid black;
}
.el-table__body-wrapper {
  background-color: black;
}
tr {
  line-height: 1.5;
  background: #1e1e1e;
  margin-bottom: 2px;
  border-radius: 5px;
}

/* .ToolBar {
  position: absolute;
  right: 12px;
  width: 586px;
  text-align: center;
  z-index: 2;
  font-size: 14px;
  height: 28px;
  margin: 5px;
  background: #1e1e1e;
} */
.table-main {
  font-size: 14px;
  width: 600px;
  text-align: center;
  background: #000000;
  margin: 5px;
  border-collapse: separate;
  border-spacing: 0px 5px;
}

.currentWarningCardTableBox {
  position: absolute;
  right: -400px;
  bottom: 40px;
  padding-left: 5px;
  padding-right: 5px;
  opacity: 0.3;
  transition: 0.3s;
}
.currentWarningCardTableBox:hover,
.currentWarningCardTableBox.show {
  right: 10px;
  transition: 0.3s;
  opacity: 1;
}
.currentWarningCardTableBox.hide {
  opacity: 0.3;
  transition: 0.3s;
  right: -200px;
}
</style>
<style lang="less">
.cellBase {
  background: rgb(30, 30, 30) !important;
  color: rgb(220, 220, 220);
  padding: 3px;
  font-size: 12px;
}
.cellBase.flicker {
  animation: flicker 0.6s infinite;
}
@keyframes flicker {
  0% {
    color: rgb(220, 220, 220);
  }
  50% {
    color: orangered;
  }
  100% {
    color: rgb(220, 220, 220);
  }
}
</style>