<template>
  <div class="toptip"
       v-show="visible"
       :class="myClass"
       @click="hide"
       :style="{'opacity':visible?1:0}"
  >{{msg}}
  </div>
</template>

<script>
  export default {
    name: "toptip",
    data() {
      return {
        visible: false,
        msg: '',
        countDown: undefined,
        closeTime: 0,
        type: 'danger'
      }
    },
    methods: {
      show(msg, type = 'danger', closeTime = 3000) {
        this.type = type;
        this.msg = msg;
        this.visible = true;
        this.closeTime = closeTime;
        this.countDown = window.setInterval(() => {
          this.closeTime = this.closeTime - 100;
          if (this.closeTime <= 0) {
            this.hide();
          }
        }, 100);
      },
      hide() {
        this.visible = false;
        window.clearInterval(this.countDown);
      }
    },
    computed: {
      myClass() {
        const result = [];
        result.push(this.type);
        return result;
      }
    }
  }
</script>

<style scoped>
  div.toptip {
    z-index: 10000;
    -webkit-transition: opacity .3s;
    transition: opacity .3s;
    width: 100%;
    overflow: hidden;
    color: white;
    top: 0;
    left: 0;
    height: 32px;
    line-height: 32px;
    size: 22px;
    text-align: center;
    position: fixed;
  }

  .danger, .error {
    background-color: #f6383a;
  }

  .success {
    background-color: #4cd964;
  }

  .warning {
    background-color: #e6a32c;
  }
</style>
