<template>
    <a v-if="href" :class="className" :href="href">
        <Icon v-if="icon" :name="icon" />
        <span>
            <!-- 文本内容 -->
        </span>
        <slot/>
    </a>
    <button
        v-else
        :class="className"
        :disabled="disabled"
        @click="click"
        :type="nativeType">
        <Icon name="loading" v-if="loading" />
        <Icon v-else-if="icon" :name="icon" />
        <!-- 文本内容 -->
        <span :class="bem('content')" v-if="$slots.default">
            <slot/>
        </span>
    </button>
</template>

<script>
import { componentMixin, createComponentName } from '../_utils/component';
import Icon from '../Icon';

export default {
    name: createComponentName('button'),
    components: {
        Icon
    },
    mixins: [componentMixin],
    props: {
        // 按钮大小
        size: {
            // "small"/"normal"/"large"
            type: String,
            default: 'normal',
        },
        // 按钮类型
        type: {
            // "dange"/ "normal" /"primary" /"text"
            type: String,
            default: 'normal',
        },
        // 跳转链接
        href: {
            type: String,
            default: '',
        },
        // TODO: loading状态 需要补充
        loading: { type: Boolean, default: false },
        // 禁用状态
        disabled: { type: Boolean, default: false },
        // 是否带圆角
        round: { type: Boolean, default: false },

        icon: { type: String, default: '' },
        // 原生type类型
        nativeType: {
            // "button" / "submit" / "reset"
            type: String
        }
    },
    data() {
        return {
            active: false,
        };
    },
    computed: {
        className() {
            return this.bem({
                [this.size]: this.size !== 'normal',
                [this.type || 'normal']: true,
                active: this.active,
                disabled: this.disabled,
                round: this.round,
                loading: this.loading,
                'icon-only': this.icon && !this.$slots.default,
            });
        },
    },
    methods: {
        click(e) {
            clearTimeout(this.timeout);
            this.active = true;
            this.timeout = window.setTimeout(() => {
                this.active = false;
            }, 200);

            // 点击事件
            // @arg MouseEvent
            this.$emit('click', e);
        },
    },
};
</script>

<style lang="less">
@import '../_styles/base.less';

@b: @button;
@button-radius: @border-radius-base;

@button-round-radius: 34px;
@button-height-xlg: 48px;
@button-height-lg: 44px;
@button-height-base: 36px;
@button-height-sm: 30px;

.@{b} {
    position: relative;
    text-decoration: none;
    height: @button-height-base;
    padding: 0 @margin-lg;
    border-radius: @button-radius;
    font-size: @font-size-base;
    color: @color-body;
    user-select: none;
    background: transparent;
    cursor: pointer;
    background-image: none;
    touch-action: manipulation;
    border: 1px solid @color-border;
    box-sizing: border-box;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    transition: color 0.2s linear, background-color 0.2s linear, border 0.2s linear;

    &__content {
        display: flex;
        align-items: center;
    }

    .@{icon} {
        color: currentColor;
        font-size: 1em;

        & + * {
            margin-left: @margin-xsm;
        }
    }

    &:hover {
        color: @color-primary;
        border-color: @color-primary;
    }

    &:focus {
        outline: 0;
    }

    &--active {
        outline: 0;
        background-color: @color-primary-tint-3;
        color: @color-primary;
        border-color: @color-primary;
    }

    &--primary {
        background-color: @color-primary;
        border-color: @color-primary;
        color: #fff;

        &:hover {
            color: @color-white;
            background-color: @color-primary-tint-1;
            border-color: @color-primary-tint-1;
        }

        &.@{b}--active {
            background-color: shade(@color-primary, 16%);
            border-color: shade(@color-primary, 16%);
        }
    }

    &--danger {
        border-color: @color-danger;
        color: @color-danger;

        &:not([disabled]):hover {
            color: @color-white;
            background-color: @color-danger-tint-1;
            border-color: @color-danger-tint-1;
        }

        &:not([disabled]).@{b}--active {
            color: @color-white;
            background-color: shade(@color-danger, 16%);
            border-color: shade(@color-danger, 16%);
        }
    }

    &--text {
        border: none;
        color: @color-primary;
        height: auto;
        padding: 0;

        &:not([disabled]):hover {
            color: @color-primary-tint-1;
            background-color: transparent;
        }

        &:not([disabled]).@{b}--active {
            color: shade(@color-primary, 16%);
            background-color: transparent;
        }
    }


    &--small {
        height: @button-height-sm;
        font-size: @font-size-sm;
    }

    &--large {
        height: @button-height-lg;
    }

    &--loading {
        pointer-events: none;
    }

    &[disabled],
    &[disabled]:hover {
        background: @bg-disable;
        border: 1px solid @border-color-disable;
        color: @color-disable;
        cursor: no-drop;
    }


    &[disabled].@{b}--text {
        background: none;
        border: none;
    }

    &--icon-only {
        padding: 0 @margin-xsm;
        width: 32px;
    }

    &--round {
        border-radius: 22px;
        padding: 0 @margin-sm;

        &.@{button}--icon-only {
            border-radius: 50%;
            padding: @margin-sm;
            padding: 0;
        }
    }
}
</style>
