<template>
  <div class="ipub-button"
       @click="handleClick"
       :class="[
            type ? 'ipub-button--' + type : '',
            size ? 'ipub-button--' + size : '',
            {
              'is-disabled': disabled,
              'is-plain': plain,
              'is-round': round,
              'is-circle': circle,
              'is-loading': loading,
            }
          ]">
    <ipub-icon v-if="!icon&&loading"
               style="margin-right:10px"
               type="loading" />
    <ipub-icon v-if="icon"
               class="ipub-button__icon"
               :type="icon" />
    <template v-if="!circle">
      <slot></slot>
    </template>
    <ipub-icon v-if="icon&&loading"
               style="margin-left:10px"
               type="loading" />
  </div>
</template>

<script>
import IpubIcon from '../../icon'
export default {
  name: 'IpubButton',
  components: {
    IpubIcon
  },
  props: {
    type: {
      type: String,
      default: 'default',
      validator (val) {
        return ['default', 'primary', 'theme', 'danger', 'warning', 'text', 'success'].indexOf(val) !== -1
      }
    },
    size: {
      type: String,
      default: 'common',
      validator (val) {
        return ['common', 'small'].indexOf(val) !== -1
      }
    },
    icon: {
      type: String,
      default: ''
    },
    loading: Boolean,
    disabled: Boolean,
    plain: Boolean,
    round: Boolean,
    circle: Boolean
  },
  methods: {
    handleClick (event) {
      if (!this.loading) {
        this.$emit('click', event);
      }
    }
  }
}
</script>

<style lang="scss">
@mixin button-type($color) {
  background-color: $color;
  color: #fff;
  &.is-plain {
    color: $color;
    &:hover {
      color: #fff;
      background-color: $color;
    }
    &.is-disabled {
      color: $default_color;
      border: 1px solid $default_color;
      background-color: transparent;
      pointer-events: none;
    }
  }
}

.ipub-button {
  display: inline-block;
  line-height: 40px;
  min-width: 40px;
  cursor: pointer;
  background-color: #fff;
  border: none;
  color: $font_color;
  text-align: center;
  box-sizing: border-box;
  margin: 0;
  border-radius: 4px;
  height: 40px;
  padding: 0 16px;
  font-family: $p_family;
  font-size: $font_size_p1;
  text-align: center;
  box-sizing: border-box;
  font-size: 1em;
  & + & {
    margin-left: 20px;
  }
  &:hover {
    transition: 0.3s all;
    opacity: 0.7;
  }
  &--small {
    font-weight: normal;
    line-height: 30px;
    height: 30px;
    &.is-round {
      padding: 0 20px;
      border-radius: 15px;
    }
  }
  &--default {
    border-width: 1px;
    border-style: solid;
    &.is-plain {
      &.is-disabled {
        color: $default_color;
        border: 1px solid $default_color;
        background-color: transparent;
        pointer-events: none;
      }
    }
  }
  &--primary {
    @include button-type($main_color);
  }
  &--danger {
    @include button-type($key_color);
  }
  &--theme {
    @include button-type($theme_color);
  }
  &--success {
    @include button-type($success_color);
  }
  &--warning {
    @include button-type($warning_color);
  }
  &.is-plain {
    border-width: 1px;
    border-style: solid;
    background-color: transparent;
  }
  &.is-circle {
    padding: 0 12px;
    border-radius: 50%;
    min-width: 0;
  }
  &.is-round {
    padding: 0 20px;
    border-radius: 20px;
  }
  &.is-disabled {
    border: transparent;
    background: $disable_color;
    color: $default_color;
    pointer-events: none;
    cursor: not-allowed;
  }
  &.is-loading {
    opacity: 0.7;
  }
  &__icon + span {
    margin-left: 5px;
  }
  &--text {
    color: $link_color;
    padding: 0;
    border: none;
    min-width: 0;
    &:hover {
      color: $logo_color;
      opacity: 1;
    }
    &.is-disabled {
      color: $default_color;
      background: transparent;
      cursor: not-allowed;
    }
  }
}
</style>
