<style>
    .vui-toast > div {
        position: fixed;
        z-index: 99999;
        left: 50%;
        top: 50%;
        padding: .5em .7em;
        color: #fff;
        font-size: .4rem;
        background: rgba(0, 0, 0, .6);
        border-radius: .33em;
        transform: translate(-50%, -50%);
        transition-property: opacity;
    }

    .vui-toast > .vui-toast-top {
        top: 10%;
        bottom: auto;
    }

    .vui-toast > .vui-toast-bottom {
        top: auto;
        bottom: 10%;
    }

    /*pc样式*/
    .vui-toast-pc > div {
        font-size: 16px;
    }
</style>

<script>
  import mixinType from '../../mixins/type'
  import Fade from '../fade/index.vue'

  export default {
    name: 'toast',
    inheritAttrs: false,
    mixins: [mixinType],
    props: {
      time: {
        type: Number,
        default: 3000
      },
      position: {
        type: String,
        default: 'center',
        validator (value) {
          return ['top', 'center', 'bottom'].indexOf(value) !== -1
        }
      },
      single: { // 是否同时只能显示一个toast
        type: Boolean,
        default: true
      },
      className: { // 自定义类名
        type: String,
        default: 'vui-toast-box'
      }
    },
    data () {
      return {
        id: 0,
        list: []
      }
    },
    computed: {
      $style () {
        return this.$options.cssModules
      }
    },
    render () {
      return (
        <div class={['vui-toast', `vui-toast-${this.page.type}`]}>{
          this.list.map(item => (
            <fade appear {...{
              scopedSlots: {
                default: props => (
                  <div class={[props.className, item.className, `vui-toast-${item.position}`]}>
                    {item.slot}
                  </div>
                )
              }
            }} />
          ))
        }</div>
      )
    },
    methods: {
      show () {
        this.$nextTick(function () { // 只有在nextTick中才能获取更新后的props
          if (!this.single || !this.list.length) {
            let item = {
              id: this.id++,
              slot: this.$slots.default,
              position: this.position,
              className: this.className
            }

            this.list.push(item)
            setTimeout(() => {
              this.list.splice(this.list.indexOf(item), 1)
            }, this.time)
          }
        })
      }
    },
    components: {
      Fade
    }
  }
</script>