<template>
  <button class="lina-button" :class="{[`icon-${iconPosition}`]: true}" @click="$emit('click')">
    <l-icon v-if="icon && !loading" :name="icon"></l-icon>
    <l-icon v-if="loading" class="loading" name="refresh"></l-icon>
    <div class="content">
      <slot></slot>
    </div>
  </button>

</template>

<script>
import LIcon from './icon'

export default {
  components: {LIcon},
  props: {
    icon: {},
    iconPosition: {
      type: String,
      default: 'left',
      validator(val) {
        return (val === 'left' || val === 'right')
      }
    },
    loading: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style lang="scss">
    $button-height: 32px;
    $button-bg: white;
    $button-active-bg: #eee;
    $font-size: 14px;
    $border-radius: 4px;
    $color: #333;
    $border-color: #999;
    $border-color-hover: #666;

  @keyframes spin {
    0% { transform: rotate(0deg); }
    95% { transform: rotate(360deg); }
    100% { transform: rotate(360deg); }
  }

  .lina-button {
    font-size: $font-size; height: $button-height;
    padding: 0 1em; border-radius: $border-radius; border: 1px solid $border-color; background: $button-bg;
    display: inline-flex; justify-content: center; align-items: center;
    vertical-align: middle; font-family: inherit;

    &:hover { border-color: $border-color-hover; }

    &:active { background-color: $button-active-bg; }

    &:focus { outline: none; }

    > .lina-icon { order: 1; margin-right: .5em; }

    > .content {order: 2;}

    &.icon-right {
      > .content { order: 1; }

      > .lina-icon { order: 2; margin-left: .5rem; margin-right: 0; }
    }

    .loading {
      animation: spin 1.2s infinite;
    }
  }

</style>