<template>
  <button :class="[c(), ...buttonClass,cusClass]" :style="buttonStyle" :disabled="disabled">
    <div
      :class="c('default-effect')"
      @contextmenu="preventDefault"
      @touchstart="start"
      @touchend="end"
      @touchcancel="end"
      @mousedown="start"
      @mouseup="end"
      @mouseleave="end"/>
    <slot/>
  </button>
</template>

<script>
import {base} from '../../common/mixins'

const types = ['default', 'rimless', 'primary', 'safety', 'warning', 'danger']
const sizes = ['normal', 'mini', 'small', 'large', 'huge']

export default {
  name: 'HButton',
  mixins: [base],
  props: {
    type: {
      type: String,
      default: '',
    },
    size: {
      type: String,
      default: '',
    },
    color: {
      type: String,
      default: '',
    },
    bgColor: {
      type: String,
      default: '',
    },
    opacity: {
      type: [String, Number],
      default: 0.77,
    },
    shadow: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    cusClass: {
      type: String,
      default: '',
    },
  },
  data () {
    return {
      showOpacity: false,
      hasTouchEvent: 'ontouchstart' in document,
    }
  },
  computed: {
    buttonClass () {
      const res = []
      this.shadow && res.push('shadow')
      this.disabled && res.push('disabled')
      types.includes(this.type) && res.push(this.type)
      sizes.includes(this.size) && res.push(this.size)
      return res
    },
    buttonStyle () {
      return this.showOpacity
        ? {
          color: this.color,
          backgroundColor: this.bgColor,
          opacity: this.opacity,
        }
        : {
          color: this.color,
          backgroundColor: this.bgColor,
        }
    },
  },
  methods: {
    preventDefault (e) {
      // 移动浏览器中长按元素会触发显示菜单，导致touchend事件不会触发，需要阻止该行为
      e.preventDefault()
    },
    start (e) {
      if (this.disabled) return
      if (this.hasTouchEvent && !e.touches) return
      this.showOpacity = true
    },
    end (e) {
      // TODO: android4上貌似触发touchmove事件之后不会再触发touchend事件，暂未对该情况做兼容处理
      if (this.hasTouchEvent && !e.touches) return

      // 添加一点延时，不然透明度变化太快，效果不明显
      setTimeout(() => {
        this.showOpacity = false
      }, 100)
    },
  },
}
</script>

<style lang="less">

  @buttonColorPrimary:#5D98F6;
  @buttonColorSafety: #1aad19;
  @buttonColorWarning: #eebe41;
  @buttonColorDanger: #e64340;

  .type-mixin(@color, @bgColor) {
    color: @color;
    background-color: @bgColor;
    border: 1px solid @bgColor;
  }

  .size-mixin(@fontSize, @padding) {
    padding: @padding;
    font-size: @fontSize;
  }

  .hls-h-button {
    overflow: hidden;
    position: relative;
    padding: 8px 16px;
    font-size: 14px;
    color: #333;
    background-color: transparent;
    border: 1px solid #ccc; /*no*/
    outline: none;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    -webkit-touch-callout: none;

    &.default {
      .type-mixin(#333, transparent);
    }

    &.rimless {
      .type-mixin(#333, transparent);
    }

    &.primary {
      .type-mixin(#fff, @buttonColorPrimary);
    }

    &.safety {
      .type-mixin(#fff, @buttonColorSafety);
    }

    &.warning {
      .type-mixin(#fff, @buttonColorWarning);
    }

    &.danger {
      .type-mixin(#fff, @buttonColorDanger);
    }

    &.mini {
      .size-mixin(12px, 6px 12px);
    }

    &.small {
      .size-mixin(13px, 7px 14px);
    }

    &.normal {
      .size-mixin(14px, 8px 16px);
    }

    &.large {
      .size-mixin(16px, 10px 20px);
    }

    &.huge {
      .size-mixin(18px, 12px 24px);
    }

    &.shadow {
      box-shadow: 0 1px 3px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(255, 255, 255, 0.1);  /*no*/
    }

    &.disabled {
      color: rgba(255, 255, 255, 0.3) !important;
      background-color: #e6e6e6 !important;
      border: 1px solid #ccc !important;
      box-shadow: none !important;
      cursor: not-allowed !important;
    }

    &-default-effect, &-ripple-wrapper {
      overflow: hidden;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }
</style>
