<!--
 * @Author: micky
 * @Date: 2024-08-12 20:05:21
 * @LastEditors: micky
 * @LastEditTime: 2024-11-05 19:10:21
 * @FilePath: \chargingpile-uniapp\src\components\widgets\page-common\page-common.vue
-->
<template>
    <view class="page-common" :style="customStyle" :class="needPadding ? 'with-padding' : ''">
        <slot></slot>
        <slot name="btn">
            <view class="btn" v-if="btnText" :style="btnStyle">
                <u-button
                    :text="btnText"
                    color="#2759FF"
                    shape="circle"
                    @click="handleSubmit"
                    :disabled="btnDisabled"
                ></u-button>
            </view>
        </slot>
    </view>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { debounce } from 'lodash-es'
const props = defineProps({
    btnText: String,
    backgroundColor: {
        type: String,
        default: '#FAFAFE'
    },
    needPadding: {
        type: Boolean,
        default: true
    },
    btnDisabled: {
        type: Boolean,
        default: false
    },
    customStyle: {
        type: Object,
        default: () => ({})
    },
    btnStyle: {
        type: Object,
        default: () => ({})
    }
})
const emits = defineEmits(['submit'])
const customStyle = computed(() => ({
    backgroundColor: props.backgroundColor,
    ...props.customStyle
}))
const handleSubmit = debounce(() => {
    emits('submit')
})
</script>
<style scoped lang="scss">
.page-common {
    @apply h-[100vh];
    background-color: $gray-1;
    padding-bottom: calc(160rpx + env(safe-area-inset-bottom));
    overflow: auto;
    .btn {
        @apply fixed bottom-0 left-0 bg-white w-full pt-3 z-10 h-[80rpx];
        padding-bottom: Max(env(safe-area-inset-bottom), 24rpx);
        box-sizing: content-box;
        :deep(button) {
            @apply w-[90%] h-[80rpx];
        }
    }
    &.with-padding {
        @apply px-[24rpx] pt-[20rpx];
    }
}
</style>
