<template>
    <button
            class="el-button"
            @click="handleClick"
            :disabled="buttonDisabled || loading"
            :autofocus="autofocus"
            :type="nativeType"
            :class="[
      type ? 'el-button--' + type : '',
      buttonSize ? 'el-button--' + buttonSize : '',
      {
        'is-disabled': buttonDisabled,
        'is-loading': loading,
        'is-plain': plain,
        'is-round': round,
        'is-circle': circle
      }
    ]"
    >
        <i class="el-icon-loading" v-if="loading"></i>
        <i :class="icon" v-if="icon && !loading"></i>
        <span v-if="$slots.default"><slot></slot></span>
    </button>
</template>
<script>
import proxy from './proxy'
export default {
    name: 'ElButton',

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

    props: {
        type: {
            type: String,
            default() {
                return this.$ELEMENT.button?.type || 'default'
            }
        },
        size: String,
        icon: {
            type: String,
            default: ''
        },
        nativeType: {
            type: String,
            default: 'button'
        },
        loading: Boolean,
        disabled: Boolean,
        plain: {
            type: Boolean,
            default() {
                return this.$ELEMENT.button?.plain
            }
        },
        autofocus: Boolean,
        round: {
            type: Boolean,
            default() {
                return this.$ELEMENT.button?.round
            }
        },
        circle: Boolean,
        isProxy: {
            type: Boolean,
            default() {
                return this.$ELEMENT.button?.isProxy
            }
        },
        proxy: Function,
        proxyList: {
            type: Array,
            default() {
                return this.$ELEMENT.button?.proxyList || []
            }
        },
        options: {
            type: Object,
            default: () => ({})
        }
    },

    computed: {
        _elFormItemSize() {
            return (this.elFormItem || {}).elFormItemSize;
        },
        buttonSize() {
            return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
        },
        buttonDisabled() {
            return this.$options.propsData.hasOwnProperty('disabled') ? this.disabled : (this.elForm || {}).disabled;
        }
    },

    methods: {
        handleClick(evt) {
            if (this.isProxy) {
                let action = this.proxy || this.$ELEMENT.button?.proxy || proxy
                return action.call(this, evt)
            } else {
                return this.$emit('click', evt);
            }
        }
    }
};
</script>
