<template>
  <div class="vux-toast">
    <div class="weui-mask_transparent" v-show="isShowMask && show"></div>
    <transition :name="currentTransition">
      <!--<div class="weui-toast" :style="{width: width}" :class="toastClass" v-show="show"> -->
      <div class="weui-toast" :class="toastClass" v-show="show">
        <i :class="toastIconClass" class="weui-icon_toast" v-show="type !== 'text'" style="display:inline-block"></i>
        <p class="weui-toast__content" v-if="text" :style="style" v-html="text"></p>
        <p class="weui-toast__content" v-else><slot></slot></p>
      </div>
    </transition>
  </div>
</template>

<script>

export default {
  name:'mu-toast',
  props: {
    value: Boolean,
    time: {
      type: Number,
      default: 2000
    },
    type: {
      type: String,
      default: 'success'
    },
    transition: String,
    width: {
      type: String,
      default: '7.6em'
    },
    isShowMask: {
      type: Boolean,
      default: true
    },
    text: String,
    position: String
  },
  data () {
    return {
      show: false
    }
  },
  created () {
    if (this.value) {
      this.show = true
    }
  },
  methods:{
    fixSafariOverflowScrolling (type) {
      if (!this.$overflowScrollingList.length) return
      for (let i = 0; i < this.$overflowScrollingList.length; i++) {
        this.$overflowScrollingList[i].style.webkitOverflowScrolling = type
      }
    }
  },
  mounted:function(){
    this.$overflowScrollingList = document.querySelectorAll('.vux-fix-safari-overflow-scrolling')
  },
  computed: {

    currentTransition () {
      if (this.transition) {
        return this.transition
      }
      if (this.position === 'top') {
        return 'vux-slide-from-top'
      }
      if (this.position === 'bottom') {
        return 'vux-slide-from-bottom'
      }
      return 'vux-fade'
    },
    toastIconClass() {
        return {
            'm-sys-toast-faile': this.type === 'cancel',
            'm-sys-toast-success': this.type === 'success'
        }
    },
    toastClass() {
      return {
        'weui-toast_forbidden': this.type === 'warn',
        'weui-toast_cancel': this.type === 'cancel',
        'weui-toast_success': this.type === 'success',
        'weui-toast_text': this.type === 'text',
        'vux-toast-top': this.position === 'top',
        'vux-toast-bottom': this.position === 'bottom',
        'vux-toast-middle': this.position === 'middle'
      }
    },
    style () {
      if (this.type === 'text' && this.width === 'auto') {
        return { padding: '10px' }
      }
    }
  },
  watch: {
    show (val) {
      if (val) {
        this.$emit('input', true)
        this.$emit('on-show')
        this.fixSafariOverflowScrolling('auto')
        clearTimeout(this.timeout)
      }
    },
    value (val) {
      this.show = val
    }
  }
}
</script>

<style lang="less">
.weui-toast.vux-toast-middle {
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.vux-slide-from-top-enter, .vux-slide-from-top-leave-active {
  opacity: 0;
  transform: translateX(-50%) translateY(-100%)!important;
}
.vux-slide-from-bottom-enter, .vux-slide-from-bottom-leave-active {
  opacity: 0;
  transform: translateX(-50%) translateY(100%)!important;
}
.vux-slide-from-top-enter-active,
.vux-slide-from-top-leave-active,
.vux-slide-from-bottom-enter-active,
.vux-slide-from-bottom-leave-active {
  transition: all 400ms cubic-bezier(.36,.66,.04,1);
}
.weui-mask_transparent {
    position: fixed;
    z-index: 1000;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}
.weui-toast {
  position: fixed;
  z-index: 5000;
  top: 50%;
  left: 50%;
  margin-top: -67px;
  background: rgba(0, 0, 0, 0.56);
  text-align: center;
  border-radius: 10px;
  color: #fff;
}


.weui-toast {
  transform: translateX(-50%);
  //margin-left: 0!important;
}
.weui-icon_toast {
    font-size: 35px;
    margin-top: 32px;
}
.weui-toast.weui-toast_forbidden {
  color: #F76260;
}
.weui-toast.weui-toast_forbidden .weui-toast__content {
  margin-top: 10px;
}
.weui-toast.weui-toast_text{
  min-height: 0;
}
.weui-toast_text .weui-toast__content {
  margin: 0;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 15px;
}
.weui-toast__content {
  color: #ffffff;
  font-size: 16px;
  position: relative;
  letter-spacing: 0;
  line-height: 24px;
  text-align: center;
  margin: 9px 34px 32px 34px;
}

.weui-loading_toast .weui-toast__content {
  margin-top: 0;
}

</style>
