<template>
  <div class="safeCom">
    <div class="safeCom_head">
      <i
        :class="['iconfont', iconfonts()]"
        style="font-size: 24px; margin-right: 10px"
      ></i>
      <div style="display: flex; justify-content: space-between; width: 100%">
        <div class="safeCom_title">{{ title }}</div>
        <div
          style="font-size: 14px; position: relative; right: 35px; top: 15px"
        >
          共{{ alarmList.length }}条
        </div>
      </div>
    </div>
    <el-table :data="alarmList" style="width: 100%" height="calc(100% - 51px)">
      <el-table-column
        prop="tsName"
        label="报警时间"
        width="150"
        show-overflow-tooltip
      />
      <el-table-column
        prop="lv"
        label="级别"
        width="50"
        show-overflow-tooltip
      />
      <el-table-column
        prop="alarmName"
        label="报警类型"
        show-overflow-tooltip
      />
      <el-table-column
        prop="description"
        label="报警信息"
        show-overflow-tooltip
      />
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: () => {
        return "";
      },
    },
    deviceType: {
      type: String,
      default: () => {
        return "";
      },
    },
    alarmType: {
      type: String,
      default: () => {
        return "";
      },
    },
  },

  data() {
    return {
      alarmList: [],
      iconfontsObj: {
        booststation: "iconIOTtubiao_huabanfuben",
        windturbine: "iconfengji",
        custom: "iconzidingyi",
        inverter: "iconzidingyi",
      },
    };
  },

  created() {
    this.initWarningList();
  },

  methods: {
    iconfonts() {
      return this.iconfontsObj[this.deviceType];
    },

    initWarningList() {
      let alarmList = [];
      this.$store.state.warningList.forEach((ele) => {
        if (
          this.deviceType === ele.deviceType &&
          this.alarmType === ele.alarmType
        ) {
          const someRes = alarmList.some((someEle) => {
            return `${someEle.id}${someEle.ts}` === `${ele.id}${ele.ts}`;
          });
          !someRes && alarmList.push(ele);
        }
      });
      alarmList.sort((a, b) => {
        return b.ts - a.ts;
      });
      this.trimAlarmList(alarmList);
      this.alarmList = alarmList;
    },

    trimAlarmList(arr) {
      if (arr?.length > this.$store.state.warningListLimitLength) {
        let subNum = arr.length - this.$store.state.warningListLimitLength;
        for (let i = arr.length - 1; i >= 0; i--) {
          if (subNum) {
            arr.splice(i, 1);
            subNum--;
            i--;
          }
        }
      }
    },

    reverseArray(arr) {
      return arr.reverse();
    },
  },

  watch: {
    "$store.state.warningList.length"() {
      this.initWarningList();
    },
  },
};
</script>

<style lang="scss" scoped>
.safeCom {
  width: 100%;
  height: calc(100% - 20px);
  .safeCom_head {
    height: 50px;
    display: flex;
    align-items: center;
    border-bottom: 1.5px solid rgb(221, 221, 221);
    .safeCom_title {
      font-size: 24px;
      text-align: center;
    }
    .safeCom_fifter {
      flex: 1;
    }
  }
}
</style>
