
<style scpoed>
.bNotifycation-wrapper {
  position: fixed !important;
  top: 0;
}
.bNotifycation-wrapper .bar {
  position: absolute;
  width: 100vw;
  padding: 20px 20px;
  text-overflow: ellipsis;
  word-break: break-all;
  text-align: center;
  box-sizing: border-box;
  transition: all 0.8s ease-in;
  z-index: 99999;
}

.bNotifycation-wrapper .mask {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  background: rgba(0, 0, 0, 0.05);
  transition: all 0.8s ease-in;
}
</style>

<template>
  <div 
  :style="{opacity: isShow ? 1 : 0, zIndex: isShow ? 9999 : -2}"
  class="bNotifycation-wrapper"
  >
    <div class="bar"
      @click="hide"
      :style="{
        background: backgroundColor,
        color: textColor,
        top: isShow ? '0px' : '-100px',
        fontSize: textSize + 'px'
      }"
    >
      {{text}}
    </div>
    <div
      @click="hide"
      :style="{opacity: isShow && showMask ? 1 : 0, zIndex: isShow && showMask ? 9999 : -2}"
      class="mask"
    >
    </div>
  </div>
</template>

<script>
export default {
  /**
   * delayTime：通知条自动关闭的时间延迟
   * showMask：是否展示遮罩层
   * text：通知栏文字
   * backgroundColor：通知栏背景颜色
   * textColor：通知栏文字颜色
   * textSize：通知栏文字大小
  */
  props: {
    delayTime: {
      type: String || Number,
      default: () => 0
    },
    showMask: {
      type: Boolean,
      default: () => false
    },
    text: {
      type: String,
      default: () => ''
    },
    backgroundColor: {
      type: String,
      default: () => '#07c160'
    },
    textColor: {
      type: String,
      default: () => 'white'
    },
    textSize: {
      type: String || Number,
      default: () => 14
    }
  },
  data: () => {
    return {
      isShow: false,
      block: false
    }
  },
  methods: {
    // 显示通知栏
    show () {
      if (this.block) {
        return
      }
      this.isShow = true
      if (this.delayTime) {
        setTimeout(() => {
          if (!this.block) {
            this.isShow = false
          }
        }, this.delayTime)
      }
      this.block = false
    },
    // 隐藏通知栏
    hide () {
      if (this.block) {
        return
      }
      this.isShow = false
      this.block = false
    }
  }
}
</script>

