<template>
  <div v-if="alertState" class="alert-active" id="alertOverlay">
    <div></div>
  </div>
</template>

<script>
import { VXETable } from 'vxe-table'
export default {
  props: {
    // 告警状态
    alertState: {
      type: Boolean,
      default: false
    },
    // 告警类型
    alertType: {
      type: String,
      default: 'error'
    },
    // 告警内容
    alertContent: {
      type: String,
      default: '警告!警告!箱码错误!'
    },
    // 告警持续时间
    alertDuration: {
      type: Number,
      default: 3000
    }
  },
  watch: {
    // 监听告警状态
    alertState(newVal) {
      if (newVal) {
        // 设置告警状态为激活
        this.setAlertState(true)
      } else {
        // 清除告警状态
        this.setAlertState(false)
      }
    }
  },
  methods: {
    onConfirm() {
      // 清除告警状态
      this.$emit('update:alertState', false)
    },
    setAlertState() {
      VXETable.modal.alert({ id: 'modal', width: '45vw', showConfirmButtoncontent: true, content: this.alertContent, status: this.alertType, lockView: false, mask: false, beforeHideMethod: this.onConfirm })
    }
  }
}
</script>

<style lang="scss" scoped>
html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#alertOverlay::before,
#alertOverlay::after {
  content: "";
  position: absolute;
  width: 140px;
  height: 100%;
}

#alertOverlay>div::before,
#alertOverlay>div::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 140px;
}

#alertOverlay::before {
  background: linear-gradient(to right, red, transparent);
  top: 0;
  left: 0;
  transform: rotate(0deg);
}

#alertOverlay::after {
  background: linear-gradient(to left, red, transparent);
  top: 0%;
  left: 100%;
  transform: rotate(0deg) translate(calc(-1 * 140px), 0px);
}

#alertOverlay>div::before {
  background: linear-gradient(to top, red, transparent);
  top: 0;
  left: 0;
  transform: rotate(180deg);
}

#alertOverlay>div::after {
  background: linear-gradient(to top, red, transparent);
  top: 100%;
  left: 0;
  transform: rotate(0deg) translate(0px, calc(-1 * 140px));
}

#alertOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  opacity: 1;
  transition: opacity 0.5s;
  pointer-events: none;
  z-index: 9999;
  // background-color: red;
}

.alert-active {
  animation: blink 1s infinite;
}

@keyframes blink {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 0.5;
  }

  100% {
    opacity: 0;
  }
}
</style>
