<template>
    <button 
        :type="htmlType"
        :class="classes" 
        :disabled="disabled" 
        @click="handleClick">
        <Icon size="12px" v-if="loading" type="loading"/>
        <span 
            v-if="showPrefixSlot"
            :class="`${prefixCls}-icon ${prefixCls}-icon-prefix`">
            <slot name="prefix"></slot>
        </span>
        <span><slot></slot></span>
        <span 
            v-if="showSuffixSlot"
            :class="`${prefixCls}-icon ${prefixCls}-icon-suffix`">
            <slot name="suffix"></slot>
        </span>
    </button>
</template>
<script>
    import { oneOf } from '../../../utils/assist'
    import Icon from '../../base/icon/'

    const prefixCls = 'yy-btn'
    /**
     * @displayName Button
     */
    export default {
        name: 'YYButton',
        components: { 
            Icon 
        },
        props: {
            /**
             * 按钮类型
             * @values primary, default, success, warning, danger, ghost, text
             */
            type: {
                validator(value) {
                    return oneOf(value, ['primary', 'default', 'success', 'warning', 'danger', 'ghost', 'text','text-bule'])
                },
                default: 'default'
            },
            /**
             * @values button, submit, reset
             */
            htmlType: {
                validator(value) {
                    return oneOf(value, ['button', 'submit', 'reset'])
                },
                default: 'button'
            },
            /**
             * 禁用按钮
             */
            disabled: {
                type: Boolean,
                default: false
            },
            /**
             * 主题
             * @values dark, light
             */
            theme: {
                validator(value) {
                    return oneOf(value, ['dark', 'light'])
                },
                default: 'dark'
            },
            /**
             * 是否显示加载图标
             */
            loading: {
                type: Boolean,
                default: false
            },
            /**
             * 按钮大小
             * @values small, large
             */
            size: {
                validator(value) {
                    return oneOf(value, ['small', 'large'])
                }
            }
        },
        data() {
            return {
                prefixCls: prefixCls,
                showPrefixSlot: false,
                showSuffixSlot: false
            }
        },
        computed: {
            classes() {
                return [
                    `${prefixCls}`,
                    `${prefixCls}-${this.type}`,
                    {
                        [`${prefixCls}-${this.size}`]: !!this.size,
                        [`${prefixCls}-${this.type}-light`]: this.type === 'ghost' && this.theme === 'light',
                    }
                ]
            }
        },
        methods: {
            handleClick(event) {
                event.preventDefault()
                if (this.disabled) return
                this.$emit('click', event)
            }
        },
        mounted() {
            this.showPrefixSlot = !!this.$slots.prefix
            this.showSuffixSlot = !!this.$slots.suffix
        }
    }
</script>
