<template>
  <button :class="classes" :disabled="disabled" :type="htmlType" @click="handleClickLink">
    <Icon class="ivu-load-loop" type="ios-loading" v-if="loading" ></Icon>
    <Icon :type="icon"  v-if="icon  && !loading"></Icon>
    <span v-if="showSlot" ref="slot"><slot></slot></span>
  </button>
</template>

<script>
  import {oneOf} from './../assist/assist'
  const  prefixCls = 'mvu-btn';
    export default {
        name: "m-button",
      data(){
          return{
            showSlot:true,
          }
      },
      props:{
          type:{
            validator:(value)=>{
              return oneOf(value,['default','green','red','blue','Greyish','black','lightBlue','gold','sea','brown','ghost'])},
            default:'default',
          },
        size:{
            validator:(value)=>{
              return oneOf(value,['xs','s','m','xm','l','xl'])
            },
          default: 'l'
        },
        shape: {
          validator (value) {
            return oneOf(value, ['circle', 'default']);
          },
          default:'default'
        },
        htmlType:{
            validator:(value)=>{
              return oneOf(value,['button','submit','reset'])
            },
          default: 'button'
        },
        loading: Boolean,
        disabled: Boolean,
        icon: {
          type: String,
          default: ''
        },
      },
      computed:{
        classes(){
          return[
            `${prefixCls}`,
            `${prefixCls}-${this.type}`,
            `${prefixCls}-${this.size}`,
            {
              [`${prefixCls}-${this.shape}`]: this.shape !== 'default',
              [`${prefixCls}-loading`]: this.loading != null && this.loading,
              [`${prefixCls}-only-icon`]: !this.showSlot && (this.icon || this.loading),
            }
          ]
        },
      },
      methods:{
        handleClickLink(event){
          this.$emit('click', event);
        }
      },
      mounted () {
        this.showSlot = !!this.$slots.default;

      }
    }
</script>

<style scoped>
 @import "./m-button.css";
</style>
