<template>
  <button
    type="button"
    :class="classes"
    @click="onClick"
    :style="style"
  >
    {{ label }}
  </button>
</template>

<script>
import "./button.css";
export default {
  name: "my-button",

  props: {
    /**
     * 标签名
     */
    label: {
      type: String,
      required: true,
      default: 'Button'
    },
    /**
     * 按钮类型
     */
    primary: {
      type: Boolean,
      default: false,
    },
    /**
     * 按钮大小
     */
    size: {
      type: String,
      default: "medium",
      validator: function (value) {
        return ["small", "medium", "large"].indexOf(value) !== -1;
      },
    },
    /**
     * 按钮背景色
     */
    backgroundColor: {
      type: String,
    },
  },

  computed: {
    classes() {
      return {
        "storybook-button": true,
        "storybook-button--primary": this.primary,
        "storybook-button--secondary": !this.primary,
        [`storybook-button--${this.size}`]: true,
      };
    },
    style() {
      return {
        backgroundColor: this.backgroundColor,
      };
    },
  },

  methods: {
    onClick(e) {
      /**
       * 点击事件
       */
      this.$emit("onClick", e);
    },
  },
};
</script>
