/**
 * @file 仿微信小程序按钮hover-class
 */

export default {
  props: {
    // 指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果
    hoverClass: {
      type: String,
      default: 'button-hover',
    },
    // 按住后多久出现点击态，单位毫秒
    hoverStartTime: {
      type: Number,
      default: 0,
    },
    // 手指松开后点击态保留时间，单位毫秒
    hoverStayTime: {
      type: Number,
      default: 70,
    },
  },
  data() {
    return {
      hover: false,
    };
  },
  computed: {
    // 计算绑定的class对象
    bindClass() {
      return {
        [this.hoverClass]: this.hover,
      };
    },
    // 事件hack
    bindEvents() {
      const events = this.$listeners || {};
      const activeEvents = ['mousedown', 'touchstart'];
      const deactiveEvents = ['mouseup', 'mouseout', 'touchend'];
      let safeEvents = { ...events };
      activeEvents.forEach(key => {
        safeEvents[key] = e => {
          const originEvent = events[key];
          originEvent && originEvent(e);
          if (this.hoverStartTime) {
            setTimeout(() => {
              this.hover = true;
            }, this.hoverStartTime);
          } else {
            this.hover = true;
          }
        };
      });
      deactiveEvents.forEach(key => {
        safeEvents[key] = e => {
          const originEvent = events[key];
          originEvent && originEvent(e);
          setTimeout(() => {
            this.hover = false;
          }, this.hoverStayTime);
        };
      });
      return safeEvents;
    },
  },
};