<template>
  <div>
    <div
      class="dof-overlay"
      ref="dof-overlay"
      v-if="show"
      :hack="shouldShow"
      @click="overlayClicked"
      :style="overlayStyle"
    ></div>
  </div>
</template>

<style scoped>
.dof-overlay {
  width: 750px;
  position: fixed;
  bottom: 0;
  right: 0;
}
</style>

<script>
const animation = weex.requireModule('animation')
import Utils from '../utils'

export default {
  props: {
    show: {
      type: Boolean,
      default: true
    },
    top: {
      type: Number,
      default: 0
    },
    left: {
      type: Number,
      default: 0
    },
    hasAnimation: {
      type: Boolean,
      default: true
    },
    duration: {
      type: [Number, String],
      default: 300
    },
    timingFunction: {
      type: Array,
      default: () => ['ease-in', 'ease-out']
      // default: () => 'cubic-bezier(0.25, 0.1, 0.25, 1.0)',
    },
    opacity: {
      type: [Number, String],
      default: 0.3
    },
    canAutoClose: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    overlayStyle() {
      return {
        opacity: this.hasAnimation ? 0 : 1,
        backgroundColor: `rgba(0, 0, 0,${this.opacity})`,
        left: Utils.env.isWeb() ? this.left + 'px' : 0,
        top: this.top + 'px'
      }
    },
    shouldShow() {
      const { show, hasAnimation } = this
      hasAnimation &&
        setTimeout(() => {
          this.appearOverlay(show)
        }, 50)
      return show
    }
  },
  methods: {
    overlayClicked(e) {
      this.canAutoClose
        ? this.appearOverlay(false)
        : this.$emit('dofOverlayBodyClicked', {})
    },
    appearOverlay(bool, duration = this.duration) {
      const { hasAnimation, timingFunction, canAutoClose } = this
      const needEmit = !bool && canAutoClose
      needEmit && this.$emit('dofOverlayBodyClicking', {})
      const overlayEl = this.$refs['dof-overlay']
      if (hasAnimation && overlayEl) {
        animation.transition(
          overlayEl,
          {
            styles: {
              opacity: bool ? 1 : 0
            },
            duration,
            timingFunction: timingFunction[bool ? 0 : 1],
            delay: 0
          },
          () => {
            needEmit && this.$emit('dofOverlayBodyClicked', {})
          }
        )
      } else {
        needEmit && this.$emit('dofOverlayBodyClicked', {})
      }
    }
  }
}
</script>
