<template>
  <div :class="classes">
    <button @click="clickButtonHandle" :disabled="disabled">
      <slot></slot>
    </button>
  </div>
</template>

<script>
import { oneOf } from "../../utils/assist.js";
import Emitter from '../../mixins/emitter.js'
const prefixCls = "lion-btn";
export default {
  name: "LionButton",
  mixins: [ Emitter ],
  props: {
    type: {
      type: String,
      validator(value) {
        return oneOf(value, ["simple", "primary", "common", "commit", "cancel","disabled","circel", "radian"]);
      },
      default: "primary"
    },
    size: {
      type:String,
      validator (value) {
        return oneOf(value, ["small", "default","large"]);
      },
      default: "default"
    },
    disabled: {
      type: Boolean,
      default:false
    },
    loading: {
      type: Boolean,
      default: false
    },
   // 按钮组向外暴露的value
   value: {
     type: [Number,String],
     default: ''
   }
  },
  data() {
    return {};
  },
  computed: {
    classes() {
      return [
        `${prefixCls}`,
        `${prefixCls}-${this.type}`,
        {
          [`${prefixCls}-${this.size}`]: this.size !== "default"
        }
      ];
    }
  },
  methods: {
    clickButtonHandle(e) {
      if(!e) return false;
      this.dispatch('LionButtonGroup', 'buttonClick', {_e: e, _this: this});
      this.dispatch('LionButtonGroup', 'changeButtonHandle',this)
    },
  },
  created() {
    this.disabled && this.type !=='simple' ? this.type = 'disabled' : '';
  }
};
</script>




