<template>
  <div class="sv-mask" @click="click" v-if="visible" ref="svMaskRef" @touchmove.prevent>
    <slot></slot>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    name: 'svMask',
    data () {
      return {
        visible: this.value
      }
    },
    props: {
      value: {
        type: Boolean,
        default: false
      }
    },
    watch: {
      value (val) {
        this.visible = val
      },
      visible (val) {
        this.$emit('input', val)
      }
    },
    methods: {
      open (event) {
        this.visible = true
        this.$emit('open', event)
      },
      close (event) {
        window.setTimeout(() => {
          this.visible = false
          this.$emit('close', event)
        }, 250)
      },
      click () {
        this.$emit('click')
        this.close()
      },
      getZIndex () {
        return new Promise((resolve, reject) => {
          this.$nextTick(() => {
            resolve(window.getComputedStyle(this.$el, null).zIndex)
          })
        })
      }
    }
  }
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
  .sv-mask{
    position: fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index: 2;
    background: rgba(0, 0, 0, .6);
  }
</style>
