<template>
  <button class="zui-button" :hover-class="!disabled ? 'button-hover' : ''" :class="classRender" :style="styleRender" @click.stop="onClick">
    <span v-if="icon" class="zui-button__icon">
      <zui-icon :name="icon"></zui-icon>
    </span>
    <slot></slot>
  </button>
</template>

<script>
import color from 'color';

export default {
  name: 'ZuiButton',
  props: {
    disabled: Boolean,
    type: {
      type: String,
      default: 'default',
    },
    size: {
      type: String,
      default: 'md',
    },
    block: {
      type: Boolean,
      default: false,
    },
    icon: [String, Object],
    round: Boolean,
    circle: Boolean,
    square: Boolean,
    theme: String,
    color: String,
    fontColor: String,
  },
  computed: {
    styleRender: function() {
      if (this.color) {
        if (this.color.includes('linear-gradient')) {
          return `
            color: ${this.fontColor};
            background: ${this.color};
            border: none;
          `.trim();
        }
        const config = {
          primary: `
            color: ${this.fontColor};
            border-color: ${this.color};
            background-color: ${this.color};
          `.trim(),
          secondary: `
            color: ${this.color};
            background-color: ${color(this.color).lightness(95)};
          `.trim(),
          plain: `
            border-color: ${this.color};
            color: ${this.color};
            background-color: ${color(this.color).lightness(95)};
          `.trim(),
          ghost: `
            border-color: ${this.color};
            color: ${this.color};
          `.trim(),
        };
        return config[this.type] || `color: ${this.color};`.trim();
      }
      return `color: ${this.fontColor};`;
    },
    classRender: function() {
      return [
        this.size,
        this.type,
        this.theme,
        this.disabled ? 'disabled' : '',
        this.block ? 'block' : '',
        this.round ? 'round' : '',
        this.square ? 'square' : '',
        this.color ? 'custom' : '',
      ].join(' ');
    }
  },
  methods: {
    onClick: function() {
      if (!this.disabled) {
        this.$emit('click');
      }
    }
  }
};
</script>

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