<template>
    <button class="btn" @click="handleClick"
            :disabled="disabled"
            :autofocus="autofocus"
            :type="nativeType"
            :class="[colorStyle, sizeStyle]">

        <focus-icon :name="icon" v-if="icon" @click="handleInnerClick"></focus-icon>

        <slot></slot>
    </button>
</template>
<script>
    import FocusIcon from 'focus-view/packages/icon';

    export default {
        name: 'focusButton',

        components: {FocusIcon},

        inject: {
            elFormItem: {
                default: ''
            }
        },

        props: {
            type: {
                type: String,
                default: 'default'
            },
            size: String,
            icon: {
                type: String,
                default: ''
            },
            nativeType: {
                type: String,
                default: 'button'
            },
            autofocus: Boolean,
            disabled: Boolean
        },

        computed: {
            _elFormItemSize() {
                return (this.elFormItem || {}).elFormItemSize;
            },
            sizeStyle() {
                const size = this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;

                return size ? 'btn-' + size : '';
            },
            colorStyle() {
                return this.type && this.type !== 'default' ? 'btn-' + this.type : '';
            }
        },

        methods: {
            handleClick(evt) {
                this.$emit('click', evt);
            },
            handleInnerClick(evt) {
                if (this.disabled) {
                    evt.stopPropagation();
                }
            }
        }
    };
</script>
