<template>
 <button
   class="sv-button"
   :class="[buttonTypeClass, buttonColorClass, buttonSizeClass, buttonDisabledClass, buttonShapeClass, {'is-highlight': isHighlight}]"
   :style="buttonStyles"
   @click="clickFunction"><slot></slot></button>
</template>

<script>
  export default {
    name: 'svButton',
    props: {
      size: {
        type: String,
        default: 'default'
      },
      color: {
        type: String,
        default: 'light'
      },
      disabled: {
        type: Boolean,
        default: false
      },
      type: {
        type: String,
        default: ''
      },
      shape: {
        type: String,
        default: ''
      },
      radius: {
        type: [String, Number],
        default: ''
      }
    },
    data () {
      return {
        buttonColor: this.color,
        buttonSize: this.size,
        isHighlight: false
      }
    },
    computed: {
      buttonColorClass: {
        get () {
          return `sv-button-${this.buttonColor}`
        },
        set (color) {
          this.buttonColor = color
        }
      },
      buttonSizeClass: {
        get () {
          return `sv-button-${this.buttonSize}`
        },
        set (size) {
          this.buttonSize = size
        }
      },
      buttonDisabledClass () {
        return this.disabled ? 'sv-button-disabled' : ''
      },
      buttonTypeClass () {
        return this.type ? `sv-button-${this.type}` : ''
      },
      buttonShapeClass () {
        return this.shape ? `sv-button-${this.shape}` : ''
      },
      buttonStyles () {
        let styles = {}
        if (this.radius) {
          styles['borderRadius'] = `${this.radius / 20}rem`
        }
        return styles
      }
    },
    methods: {
      clickFunction (value) {
        if (this.disabled) return
        this.$emit('click', value)
      }
    }
  }
</script>

<style lang="scss" rel="stylesheet/scss">
  @import "../../styles/base";
  .sv-button{
    padding:pxToRem(16px 40px);
    border:1px solid #dddee1;
    border-radius: pxToRem(8px);
    outline: none;
    text-align: center;
    font-size: pxToRem(28);
    color:#495060;
    white-space: nowrap;
    &.sv-button-light{
      background: $color-light;
      &:active, .is-highlight{
        background: #f7f7f7;
      }
    }
    &.sv-button-stable{
      background: #f7f7f7;
      border-color: #dddee1;
      &:active, &.is-highlight{
        background: #d7d7d7;
      }
    }
    &.sv-button-primary{
      background: $color-primary;
      border-color: $color-primary;
      color: $color-light;
      &:active, &.is-highlight{
        background: $color-primary-deep;
        border-color: $color-primary-deep;
      }
      &.sv-button-outline{
        color: $color-primary;
        background: $color-light;
      }
    }
    &.sv-button-info{
      background: $color-info;
      color: #fff;
      &:active, &.is-highlight{
        background: #1D8CE0;
      }
      &.sv-button-outline{
        color: #20A0FF;
        background: $color-light;
      }
    }
    &.sv-button-success{
      background-color: $color-success;
      border-color: $color-success;
      color: $color-light;
      &:active, &.is-highlight{
        background: #19be6b;
      }
      &.sv-button-outline{
        color: $color-success;
        background: $color-light;
      }
    }
    &.sv-button-warning{
      background: $color-warning;
      border-color: $color-warning;
      color:$color-light;
      &:active, &.is-highlight{
        background: #dea726;
      }
      &.sv-button-outline{
        color: $color-warning;
        background: $color-light;
      }
    }
    &.sv-button-lively{
      background: $color-lively;
      border-color: $color-lively;
      color: $color-light;
      &:active, &.is-highlight{
        background: #e56c00;
      }
      &.sv-button-outline{
        color: $color-lively;
        background: $color-light;
      }
    }
    &.sv-button-danger{
      background: $color-danger;
      color: #fff;
      &:active, &.is-highlight{
        background: #e64242;
      }
      &.sv-button-disabled{
        background: $color-danger;
      }
      &.sv-button-outline{
        color: $color-danger;
        background: $color-light;
      }
    }
    &.sv-button-royal{
      background: $color-royal;
      border-color:$color-royal;
      color: $color-light;
      &:active, &.is-highlight{
        background: #6641e2;
      }
      &.sv-button-outline{
        color: $color-royal;
        background: $color-light;
      }
    }
    &.sv-button-text{
      background: transparent;
      border:none;
      &:active{
        background: transparent;
      }
      &.sv-button-stable{
        color: #495060;
        &:active, &.is-highlight{
          color: #d7d7d7;
        }
      }
      &.sv-button-primary{
        color: $color-primary;
        &:active, &.is-highlight{
          color: $color-primary-deep;
        }
      }
      &.sv-button-danger{
        color: $color-danger;
        &:active, &.is-highlight{
          color: $color-danger-deep;
        }
      }
      &.sv-button-success{
        color:$color-success;
      }
    }
    &.sv-button-small{
      padding:pxToRem(10 30);
    }
    &.sv-button-large{
      padding:pxToRem(20px 80px);
    }
    &.sv-button-full{
      width: 100%;
      height: 100%;
      min-height: 34px;
      font-size: pxToRem(32px);
    }
    &.sv-button-disabled{
      opacity: .5;
    }
    &.sv-button-line {
      border-radius: 0;
    }
    &.sv-button-round{
      border-radius: pxToRem(40);
    }
    &.sv-button-circle {
      border-radius: 50%;
    }
  }

</style>
