<template>
  <div class="error-box" :class="{animation:visibility}" v-show="visibility">
      {{msg}}
      <i class="closeX" @click="close">&times;</i>
  </div>
</template>
<script>
  export default {
    name: "error",
    data(){
      return{
        visibility: 123,
        msg:'',
        delay:'',
      }
    },
    mounted(){

    },
    methods:{
      open(status){
        this.visibility = true
        clearInterval(status)
        status = ""
        if (!status){
          return setTimeout(()=>{
            this.close(status)
          },this.delay)
        }
      },
      close(status){
        const error = document.querySelector('.error-box')
        if (error){
            clearTimeout(status)
            status = ""
            error.remove()
        }
      }
    }
  }
</script>
<style scoped>
  .error-box{
    opacity: 0;
    transform: translateY(-100px);
    padding: .25rem .32rem;
    background: linear-gradient(bottom,#f7ebec,#faeeef);
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    font-size: .26rem;
    color: #ee3852;
    border-bottom: 1px solid rgba(238,56,82,.1);
  }
  .closeX{
    float: right;
    font-size: .36rem;
    color: #ee3852;
    margin-top: -0.08rem;
  }
  .animation{
    animation: trans .2s 0s 1 ease-in-out forwards;
  }
  @keyframes trans {
    to{
      opacity: 1;
      transform: translateY(0);
    }
  }
</style>
