<template>
  <div
    :type="type"
    :class="clazz"
    class="btn border border-all"
    @click="handleClick"
  >
    <slot />
  </div>
</template>

<script>
export default {
  props: {
    type: {
      type: String,
      default: 'button',
    },
    full: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    emitWhenDisabled: {
      type: Boolean,
      default: false,
    },
  },

  data() {
    return {}
  },

  computed: {
    canNotResponseToClick() {
      return this.disabled && !this.emitWhenDisabled
    },
    clazz() {
      const { full, disabled, canNotResponseToClick } = this
      return {
        full,
        disabled,
        canNotResponseToClick,
      }
    },
  },

  methods: {
    handleClick() {
      if (this.canNotResponseToClick) return
      this.$emit('click')
    },
  },
}
</script>

<style lang="postcss">
@import 'src/style/abstract/index.css';

.btn {
  /* declare box-sizing, swiper will override it */
  box-sizing: border-box;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  padding: 12px 30px;
  font-size: 28px;
  line-height: 1;
  color: white;
  background-color: $green;
  border-color: $green;
  text-align: center;
  text-decoration: none;
  outline: none;
  appearance: none;
  user-select: none;
  pointer-events: auto;

  @include border-radius-retina($radius);

  &:not(:first-child) {
    margin-left: 20px;
    margin-top: 0;
  }

  &.hover,
  &:active {
    /* color: rgba(255, 255, 255, 0.3);
    border-color: rgb(20, 145, 141);
    background-color: rgb(20, 145, 141); */
  }

  &.full {
    display: flex;
    flex: 0 0 94px;
    width: 100%;
    height: 94px;
    font-size: 36px;
    line-height: 92px;
    color: white;
    border-color: $green;
    background-color: $green;

    &:not(:first-child) {
      margin-left: 0;
      margin-top: 20px;
    }

    &.disabled,
    &[disabled] {
      background-color: rgba(16, 142, 232, 0.6);
      border-color: rgba(16, 142, 232, 0.6);
    }

    &.canNotResponseToClick {
      pointer-events: none;
    }

    &.second {
      color: $green;
      background-color: white;
      border-color: $green;
    }
  }

  &.green {
    background-color: $green;
    border-color: $green;
  }

  &.hollow {
    background-color: white;
    border-color: #ddd;
    color: #333;
  }

  &.transparent {
    padding: 0 44px;
    border-color: rgba(255, 255, 255, 0.62);
    background-color: transparent;
    color: white;
    font-size: 34px;
    height: 64px;
    line-height: 62px;
  }
}
</style>
