<template>
  <div class="e-toast"
    v-show="isToast"
    ref="toast"
    :direction="direction"
    :style="{'z-index':zIndex }"
  >
    <div class="e-mask" v-show="mask" @click="handleDestroy()"></div>
    <div class="e-toast__wrap" ref="toastWrap">
      <div class="e-toast__wrap__box">
        <emmm-icon v-if="type==='success'" iconType="icon" iconName="check"></emmm-icon>
        <emmm-icon v-if="type==='error'" iconType="icon" iconName="close"></emmm-icon>
        <emmm-icon v-if="type==='warning'" iconType="icon" iconName="warn"></emmm-icon>
        <div class="e-toast--text" v-if="content" >{{ content }}</div>
      </div>
    </div>
  </div>
</template>
<script>
  import Icon from '../icon'
  import ToastMixin from './toast-mixin'
  export default{
    name:'emmm-toast',
    mixins: [ToastMixin],
    data(){
      return {
        isToast: false
      }
    },
    props:{
      type:{
        type:String,
        default:'success'
      },
      content:{
        type:String,
        default:''
      },
      mask:{
        type:Boolean,
        default:false
      },
      zIndex:{
        type: Number,
        default:null
      },
      direction:{
        type:String,
        default:'horizontal'
      },
      autoClose:{
        type:Boolean,
        default:true
      }
    },
    methods:{
      close(){
        this.$emit('close')
        this.isToast = false
      },
      handleDestroy(){
        this.close();
        this.$destroy();
      }
    },
    mounted(){
      //点击让toast延迟出现,避免重复多次点击
      this.isToast = true;
      setTimeout(() => {
        let toastWrap=this.$refs.toastWrap
        let mTop=toastWrap.clientHeight/2*-1+'px'
        let mLeft=toastWrap.clientWidth/2*-1+'px'
        toastWrap.style.margin=mTop+' 0 0 '+mLeft
        toastWrap.style.filter = 'alpha(opacity:'+1+')';
        toastWrap.style.opacity = 1;
      },100);
      //是都自动关闭
      if(this.autoClose){
        setTimeout(() => {
          this.close()
          this.$destroy()
        }, 3000);
      }

    }

  }
</script>
<style lang="postcss" scoped>
  @import './toast.css';
</style>
