<template>
  <div>
    <transition name="zgh-toast">
      <div class="toast" ref="prop" v-show="visible"
           :style="styles">
        <div class="" style="min-width: 100%;">
          <slot>
            <div class="colorf row1 m-fs28">{{message}}</div>
          </slot>
        </div>
      </div>
    </transition>
  </div>

</template>

<script>
  export default {
    name: 'ZghToast',
    data() {
      return {
        message: '',
        visible: false,
        styles: {},
        timer:null

      }
    },
    watch: {
      visible(val) {
        this.$emit('input', val);
      },
      value() {
        this.visible = this.value;
      }
    },
    methods: {
      _show(){
        clearTimeout(this.timer)
        this.visible=true;
        this.timer=setTimeout(()=>{
          this._close()
        },1000)
      },
      _close(){
        this.visible=false;
      }
    }
  }
</script>

<style lang="less">
  @import url("../../assets/config.less");

  @common_color: 'red';
  .toast {
    position: absolute;
    top: 85%;
    left: 50%;
    max-height: 90%;
    height: auto;
    width: auto;
    max-width: 80%;
    padding:10px 20px;
    border-radius: 10px;
    line-height: 1em;
    transform: translate(-50%, 0%);
    z-index: 10000;
    overflow: hidden;
    &:after{
      position: absolute;
      top:0;
      left:0;
      content: '';
      display: block;
      width:100%;
      height:100%;

      background:#000;
      opacity: .7;
      z-index: -1;
    }
  }
</style>
