<template>
  <button class="zui-button" :class="classRender" :style="styleRender" v-on="bindEvents">
    <span v-if="icon" class="zui-button__icon">
      <zui-icon v-bind="bindIcon"></zui-icon>
    </span>
    <slot></slot>
  </button>
</template>

<script>
import color from 'color';
import MIX_BUTTON from '../mixins/button';

export default {
  name: 'Button',
  mixins: [MIX_BUTTON],
  props: {
    type: {
      type: String,
      default: 'default',
    },
    size: {
      type: String,
      default: 'md',
    },
    block: {
      type: Boolean,
      default: false,
    },
    icon: [String, Object],
    round: Boolean,
    square: Boolean,
    theme: String,
    color: String,
    fontColor: {
      type: String,
      default: '#FFF',
    },
  },
  computed: {
    classRender() {
      return {
        ...this.bindClass,
        [this.size]: true,
        [this.type]: true,
        [this.theme]: !!this.theme,
        disabled: this.disabled,
        block: this.block,
        round: this.round,
        square: this.square,
        custom: !!this.color,
      };
    },
    bindIcon() {
      if (typeof this.icon === 'object' && this.icon instanceof Object) {
        return this.icon;
      }
      return { name: this.icon };
    },
    isHover() {
      return this.hover && !this.disabled;
    },
    styleRender() {
      if (this.color) {
        if (this.color.includes('linear-gradient')) {
          return {
            color: this.fontColor,
            background: this.color,
            border: 'none',
            opacity: this.isHover ? 0.9 : 1,
          };
        }
        if (this.type === 'primary') {
          return {
            backgroundColor: this.isHover ? color(this.color).lighten(0.2) : this.color,
            borderColor: this.isHover ? color(this.color).lighten(0.2) : this.color,
          };
        } else if (this.type === 'secondary') {
          return {
            backgroundColor: this.isHover ? color(this.color).lightness(90) : color(this.color).lightness(95),
            color: this.color,
          };
        } else if (this.type === 'plain') {
          return {
            borderColor: this.color,
            color: this.color,
            backgroundColor: this.isHover ? color(this.color).lightness(90) : color(this.color).lightness(95),
          };
        } else if (this.type === 'ghost') {
          return {
            borderColor: this.color,
            color: this.color,
            backgroundColor: this.isHover ? color(this.color).lightness(95) : undefined,
          };
        } else {
          return {
            color: this.isHover ? color(this.color).lighten(0.2) : this.color,
          };
        }
      }
      return {};
    },
  },
};
</script>

<style lang="scss">
@import './index.scss';
</style>
