<template>
  <button ref="mainRef" v-on="$listeners" type="button" :class="'fbg-button '+ className" :disabled="disabled">
    <i v-show="loading" class="fbg-icon-loading" />
    <i v-if="icon" :class='"fbgiconfont icon-edit fbg-button-icon "+this.icon' />
    <slot></slot>
  </button>
</template>
<script>
import util from '../../utils';
export default {
  props: {
    type: {
      type: String,
      default: 'default'
    },
    size: {
      type: String,
      default: 'md'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    },
    icon: {
      type: String,
      default: ''
    }
  },
  computed: {
    className() {
      return 'fbg-button-'+this.type +' fbg-button-'+this.size + (this.disabled?' fbg-button-'+ this.type +'-disabled':'') + (this.loading?' fbg-button-'+ this.type +'-loading':'');
    }
  },
  created() {

  },
  data() {
    return {

    };
  }
}
</script>
<style lang="scss" scoped>
.fbg{
  &-button {
    font-family: '微软雅黑';
    font-size: 16px;
    color: #fff;
    border-radius: 5px;
    outline: none;
    cursor: pointer;
    &-icon {
      margin-right: 10px;
    }
    &-loading {

    }
    &-text {
      border: 1px solid rgba(0, 0, 0, 0);
      background-color: rgba(0, 0, 0, 0);
      color: $themeColor;
      &:hover {
        color: $themeColor;
        text-decoration: underline;
      }
      &:active {
        color: $themeColor;
      }
      &-disabled {
        color: #ccc!important;
        cursor:not-allowed;
      }
      &-loading {
        color: #ccc!important;
        cursor: default;
      }
    }
    &-primary {
      border: 1px solid rgba(0, 0, 0, 0);
      background-color: $themeColor;
      &:hover {
        background-color: $activeThemeColor;
      }
      &:focus {
        background-color: $activeThemeColor;
      }
      &-disabled {
        background-color: #ccc!important;
        cursor:not-allowed;
      }
      &-loading {
        background-color: #ccc!important;
        cursor: default;
      }
    }
    &-default {
      border: 1px solid #ccc;
      background-color: #fff;
      color: #333;
      &:hover {
        border:1px solid $themeColor;
        color: $themeColor;
      }
      &:focus {
        border:1px solid $themeColor;
        color: $themeColor;
      }
      &:active {
        background-color: #F1F8FF;
        color: $themeColor;
        border:1px solid $themeColor;
      }
      &-disabled {
        background-color: #F0F0F0 !important;
        color: #999!important;;
        border: 1px solid #ccc!important;
        cursor:not-allowed;
      }
      &-loading {
        background-color: #F0F0F0 !important;
        color: #999!important;;
        border: 1px solid #ccc!important;
        cursor: default;
      }
    }
    &-lg {
      height: 40px;
      line-height: 39px;
      padding: 0px 30px;
      font-size: 16px;
    }
    &-md {
      height: 32px;
      line-height: 31px;
      padding: 0px 20px;   
      font-size: 14px; 
    }
    &-sm {
      height: 24px;
      line-height: 23px;
      padding: 0px 12px;   
      font-size: 14px; 
    }

  }
}
</style>
