<template>
  <div :class='getClass' @touchstart="onTouchstart" @touchend.prevent.stop="onTouchend">
    <slot>
      {{txt}}
    </slot>
  </div>
</template>

<script>
export default {
  name: 'YohoButton',
  props: {
    txt: {
      type: String,
      default: false
    },
    disable: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      active: false
    };
  },
  methods: {
    onTouchstart() {
      if (this.disable) {
        return;
      }
      this.active = true;
    },
    onTouchend() {
      if (this.disable) {
        return;
      }
      this.clearActive();
      this.$emit('click');
    },
    clearActive() {
      this.active = false;
    }
  },
  computed: {
    getClass() {
      return { btn: true, active: this.active, enable: !this.disable };
    }
  }
};
</script>

<style lang="scss" scoped>
.btn {
  width: 100%;
  height: 120px;
  font-size: 28px;
  background: #ccc;
  text-align: center;
  line-height: 120px;
  color: #fff;
  border-radius: 500px;

  &.enable {
    background: #002b47;
  }

  &:active,
  &.active {
    opacity: 0.5;
    // color: #eee !important;
  }
}
</style>