<template>
    <button :disabled="disabled"
            :class="buttonClass"
            @click="clickHandle">
        <i v-if="loading"
           :class="loadingClass" />
        <i v-if="!loading && (iconPrefix || icon)"
           :class="prefixClass" />
        <label v-if="$slots.default"
               :class="labelClass">
            <slot /></label>
        <i v-if="!loading && !(iconPrefix || icon) && iconSuffix"
           :class="suffixClass" />
    </button>
</template>

<script>
import { prefix, prefixMixins } from 'jdd-design/utils';
export default {
    name: `${prefix}-button`,
    mixins: [prefixMixins],
    inject: {
        jddForm: {
            default: null
        }
    },
    props: {
        size: {
            type: String,
            default: 'small',
            validator(value) {
                return ['large', 'medium', 'small', 'mini'].indexOf(value) > -1;
            }
        },
        corner: {
            type: String,
            default: 'mini',
            validator(value) {
                return (
                    ['large', 'medium', 'small', 'mini', 'none'].indexOf(
                        value
                    ) > -1
                );
            }
        },
        type: {
            type: String,
            default: 'major',
            validator(value) {
                return (
                    ['major', 'minor', 'warning', 'font', 'circle'].indexOf(
                        value
                    ) > -1
                );
            }
        },
        icon: {
            type: String
        },
        iconPrefix: {
            type: String
        },
        iconSuffix: {
            type: String
        },
        block: {
            type: Boolean,
            default: false
        },
        loading: {
            type: Boolean,
            default: false
        },
        disabled: {
            type: Boolean,
            default: false
        },
        circle: {
            type: Boolean,
            default: false
        },
        plain: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        buttonClass() {
            let clsNames = [`${prefix}-button`];
            clsNames.push(`${prefix}-button--${this.type}`);
            clsNames.push(
                `${prefix}-button--${this.size ||
                    (this.jddForm && this.jddForm.size)}`
            );
            clsNames.push(`${prefix}-button-corner--${this.corner}`);
            this.plain && clsNames.push('is-plain');
            (this.disabled || (this.jddForm && this.jddForm.disabled)) &&
                clsNames.push('is-disabled');
            this.loading && clsNames.push('is-loading');
            this.circle && clsNames.push('is-circle');
            !this.circle && this.block && clsNames.push('is-block');
            return clsNames;
        },
        prefixClass() {
            let clsNames = [`${prefix}-button__icon-prefix`];
            (this.iconPrefix || this.icon) &&
                clsNames.push(this.iconPrefix || this.icon);
            return clsNames;
        },
        suffixClass() {
            let clsNames = [`${prefix}-button__icon-suffix`];
            !(this.iconPrefix || this.icon) &&
                this.iconSuffix &&
                clsNames.push(this.iconSuffix);
            return clsNames;
        },
        labelClass() {
            return `${prefix}-button-text`;
        },
        loadingClass() {
            return `${prefix}-icon-loading`;
        }
    },
    methods: {
        clickHandle(evt) {
            if (this.disabled || this.loading) return;
            this.$emit('click', evt);
        }
    }
};
</script>
