<template>
    <view class="app-custom-root">
        <view
            class="app-container"
            :style="{ backgroundColor: backGorundColor, backgroundImage: showBgImage && `url(${img})` }"
        >
            <!-- 顶部头部区域 -->
            <view
                v-if="title"
                class="container-header"
                :style="border ? { borderBottom: `2rpx solid ${borderColor}` } : { borderBottom: 'none' }"
            >
                <view class="header-btnLf">
                    <slot name="headerleft"></slot>
                </view>
                <view class="header-title">
                    <view>{{ title }}</view>
                    <view v-show="subTitle" class="subtitle-text">{{ subTitle }}</view>
                </view>
                <view class="header-btnRi">
                    <slot name="headerright"></slot>
                </view>
            </view>

            <!-- 主体不可滚动 headContent -->
            <view class="container-headContent">
                <slot name="headContent"></slot>
            </view>

            <!-- 主体内容区域 -->
            <view class="container-main">
                <scroll-view v-if="useScrollView" scroll-y class="main-scroll" @scrolltolower="handleScrollToLower">
                    <slot></slot>
                </scroll-view>
                <view class="main-scroll" v-else><slot></slot></view>
            </view>

            <!-- 底部 footer -->
            <view class="container-footer">
                <slot name="footer"></slot>
            </view>
        </view>
    </view>
</template>

<script setup>
import img from '@/static/icon/background2.png';
const emit = defineEmits(['onScrollBottom']);

defineProps({
    title: {
        type: String,
        default: '',
    },
    border: {
        type: Boolean,
        default: false,
    },
    borderColor: {
        type: String,
        default: '#F4F4F4',
    },
    subTitle: {
        type: String,
        default: '',
    },
    backGorundColor: {
        type: String,
        default: '#ffffff',
    },
    useScrollView: {
        type: Boolean,
        default: true,
    },
    showBgImage: {
        type: Boolean,
        default: true,
    },
});

const handleScrollToLower = () => {
    emit('onScrollBottom');
};
</script>

<style lang="scss" scoped>
.app-custom-root {
    position: fixed;
    z-index: 10;
    width: 100vw;
    height: calc(100% - var(--window-bottom));
    overflow: hidden;
    /* H5环境安全区域适配 */
    /* #ifdef H5 */
    height: 100vh;
    /* #endif */
}
.app-container {
    // background-image: url('@/static/icon/background2.png');
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 100% 728rpx;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    .container-header {
        min-height: calc(88rpx - 14rpx);
        text-align: center;
        line-height: calc(88rpx - 14rpx);
        font-size: 32rpx;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 7rpx 3rpx;
        .header-title {
            font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
            color: #000000;
            font-weight: bold;
            .subtitle-text {
                font-family: 'PingFangSC-Regular', 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
                font-weight: 400;
                font-size: 28rpx;
                color: #333333;
                line-height: 45rpx;
                margin-top: -16rpx;
                margin-bottom: 6rpx;
            }
        }
        .header-btnLf,
        .header-btnRi {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            width: calc(60rpx * 3);
        }
        .header-btnRi {
            justify-content: flex-end;
        }
    }
}

.container-main {
    flex: 1;
    overflow: hidden;
    padding-bottom: 20rpx;
}
/* #ifdef H5 */
.container-main {
    padding-bottom: 120rpx!important;
}
/* #endif */

.main-scroll {
    width: 100%;
    height: 100%;
}
</style>
