<template>
  <dynamic-tag
    class="ui-tap"
    :tag="tag"
    :class="tapClasses"
    :style="styles"
    @touchstart.native="handleTouchStart"
    @touchmove.native="handleTouchMove"
    @touchend.native="handleTouchEnd">
    <slot></slot>
    <div class="ui-tap-effect" ac:if="tapEffect && isIos"></div>
  </dynamic-tag>
</template>
<script>
import DynamicTag from '../../ac/libs/dynamicTag'
export default {
  props: {
    hoverClass: String,
    hoverStartTime: {
      type: Number,
      default: 20
    },
    tag: {
      type: String,
      default: 'div'
    },
    tapEffect: {
      type: Boolean,
      default: true
    }
  },
  components: {
    DynamicTag
  },
  data () {
    return {
      sto: null,
      isActive: false,
      isIos: ui.IS_IOS
    }
  },
  computed: {
    styles () {
      let style = {}
      if (this.tapEffect) {
        style.position = 'relative'
      }
      return style
    },
    tapClasses () {
      let classList = [
        { 'ui-tap-active': (ui.IS_IOS && this.isActive), 'ui-android-tap': this.tapEffect && ui.IS_ANDROID }
      ]

      if (this.hoverClass && this.hoverClass !== 'none' && this.isActive) {
        classList.push(this.hoverClass)
      }
      return classList
    }
  },
  methods: {
    enableActive () {
      if (ui.IS_IOS && this.tapEffect) {
        this.sto = setTimeout(() => {
          this.isActive = true
        }, this.hoverStartTime)
      }
    },
    disableActive () {
      if (ui.IS_IOS && this.tapEffect) {
        if (this.sto) {
          clearTimeout(this.sto)
          this.sto = null
        }
        if (this.isActive) {
          this.isActive = false
        }
      }
    },
    handleTouchStart (e) {
      this.enableActive()
    },
    handleTouchMove (e) {
      this.disableActive()
    },
    handleTouchEnd (e) {
      this.disableActive()
    }
  },
  mounted () {
  }
}
</script>
