<template>
    <div class="bili-button-container bili-button" :class="[{'press-down': pressed, 'night-mode': $root.isNightMode, 'is-disabled': disable}, `bili-button-type-${type}`, `bili-button-size-${size}`]" @touchstart="touchStart" @touchend="touchEnd" @click="handleClick">
        <slot></slot>
    </div>
</template>

<script>
export default {
    name: 'Bili_Button',
    data() {
        return {
            pressed: false
        };
    },
    props: {
        // 按钮类型
        type: {
            type: String,
            default: 'default',
            validator(value) {
                return ['default', 'primary', 'text', 'cancel', 'highlight', 'custom'].indexOf(value) !== -1;
            }
        },
        // 按钮尺寸
        size: {
            type: String,
            default: 'normal',
            validator(value) {
                return ['normal', 'small', 'mini', 'custom'].indexOf(value) !== -1;
            }
        },
        // 是否为纯文字妞妞
        plain: {
            type: Boolean,
            default: false
        },
        // 是否不可点
        disable: {
            type: Boolean,
            default: false
        },
        // 开放能力
        openType: {
            type: String,
            default: ''
        },
    },
    methods: {
        touchStart() {
            if (this.disable) return;
            this.pressed = true;
        },
        touchEnd() {
            if (this.disable) return;
            this.pressed = false;
        },
        handleClick() {
            if (this.openType === 'getUserInfo') {
                bl.getUserInfo({
                    success: (res) => {
                        this.$emit('getuserinfo', res);
                    },
                    fail: (res) => {
                        this.$emit('getuserinfo', res);
                    }
                });
            }

            this.$emit('click');
        }
    }
}
</script>

<style lang="less" scoped>
.bili-button-container {
    position: relative;
    box-sizing: border-box;
    text-align: center;
    border-radius: 40px;

    &::after {
        content: '';
        display: block;
        position: absolute;
        left: -50%;
        top: -50%;
        right: -50%;
        bottom: -50%;
        transform: scale(0.5);
        border: 1px solid;
        border-radius: 80px;
    }

    // 尺寸调整
    &.bili-button-size-normal {
        font-size: 16px;
        line-height: 40px;
        height: 40px;
    }

    &.bili-button-size-small {
        font-size: 14px;
        line-height: 30px;
        height: 30px;
    }

    &.bili-button-size-mini {
        font-size: 12px;
        line-height: 24px;
        height: 24px;
    }

    // 样式调整
    &:not(.is-disabled) {
        &.bili-button-type-text {
            line-height: 24px;
            height: 24px;
            border: none;
            background: none;
            box-shadow: none;
            color: #fb7299;

            &.bili-button-size-small {
                line-height: 14px;
                height: 14px;
            }

            &.bili-button-size-mini {
                line-height: 12px;
                height: 12px;
            }
        }

        &.bili-button-type-default {
            color: #fb7299;

            &::after {
                border-color: #fb7299;
            }
        }

        &.bili-button-type-primary {
            background: linear-gradient(270deg, #ff62c5, #ff5687);
            color: #ffffff;
            box-shadow: rgba(255, 100, 145, 0.7) 0px 1px 4px 0px;

            &::after {
                border: none;
            }
        }

        &.bili-button-type-cancel {
            color: #757575;

            &::after {
                border-color: #cccccc;
            }
        }

        &.bili-button-type-highlight {
            background: linear-gradient(270deg, #ff62c5, #ff5687);
            color: #ffffff;
            box-shadow: rgba(255, 100, 145, 0.6) 0 3px 8px 0;

            &::after {
                border: none;
            }

            &:before {
                content: '';
                display: block;
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background: transparent;
                border-radius: 40px;
                box-shadow: rgba(0, 0, 0, 0.2) 0 2px 20px 0;
            }
        }

        &.press-down {
            &.bili-button-type-default {
                background: rgba(230, 77, 121, 0.1);
            }

            &.bili-button-type-primary {
                background: linear-gradient(270deg, #e558b0, #e64d79);
            }

            &.bili-button-type-cancel {
                background: rgba(0, 0, 0, 0.1);
            }

            &.bili-button-type-highlight {
                background: linear-gradient(270deg, #e558b0, #e64d79);
                box-shadow: rgba(255, 100, 145, 0.7) 0px 1px 4px 0px;

                &::before {
                    box-shadow: none;
                }
            }
        }

        &.night-mode {
            &.bili-button-type-default {
                color: #bb5b76;
                &::after {
                    border-color: #bb5b76;
                }
            }

            &.bili-button-type-primary {
                background: #bb5b76;
            }

            &.bili-button-type-cancel {
                &::after {
                    border-color: #444444;
                }
            }

            &.bili-button-type-press-down {
                &.default {
                    background: rgba(230, 77, 121, 0.1);
                }

                &.primary {
                    background: linear-gradient(270deg, #e558b0, #e64d79);
                }

                &.cancel {
                    background: rgba(0, 0, 0, 0.1);
                }
            }
        }
    }

    &.is-disabled {
        color: #999999;
        background: #e7e7e7;
        box-shadow: none;

        &::after {
            border: none;
        }
    }
}
</style>
