<template>
    <view class="footer" :style="paddingStyle">
        <view class="btn" @click="handleBtnClick" :class="btnClass">
            {{ text }}
        </view>
    </view>
</template>

<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps({
    text: {
        type: String,
        default: '默认按钮'
    },
    color: {
        type: String,
        default: '#0E66FB'
    },
    disabled: {
        type: Boolean,
        default: false
    },
    padding: {
        type: Number,
        default: 32
    },
    plain: {
        type: Boolean,
        default: false
    }
})
const emit = defineEmits(['handleBtnClick'])
const btnClass = computed(() => {
    let classes = []
    const { disabled, plain } = props

    if (disabled) {
        classes.push(`btn--disabled`)
    }
    plain && (classes = classes.concat('btn--plain'))
    return classes.join(' ')
})
const paddingStyle = computed(() => {
    const style = {}
    const { padding } = props
    style.padding = padding + 'rpx'
    return style
})
const handleBtnClick = () => {
    emit('handleBtnClick')
}
</script>

<style lang="scss" scoped>
.footer {
    @include flex-center;
    height: 120rpx;
    background-color: $white-1;
    .btn {
        @include flex-justify(center);
        width: 100%;
        height: 80rpx;
        line-height: 80rpx;
        background-color: $blue-1;
        color: $white-1;
        border-radius: 999px;
        box-sizing: border-box;
        &--disabled {
            opacity: 0.5;
            cursor: not-allowed;
            pointer-events: none;
        }
        &--plain {
            background-color: transparent;
            border: 1px solid $blue-1;
            color: $blue-1;
        }
    }
}
</style>
