<template>
    <!-- #ifndef VUE3  -->
    <view>
        <!-- #endif  -->
        <view><slot></slot></view>
        <view :style="safeAreaStyle"></view>
        <!-- #ifndef VUE3  -->
    </view>
    <!-- #endif  -->
</template>
<!-- #ifdef VUE3  -->
<script setup>
import { ref, onMounted, computed } from 'vue'
const safeFlag = ref(false)
const props = defineProps({
    safeStatus: {
        type: Boolean,
        default: true
    },
    bottom: {
        type: Number,
        default: 22
    },
    bgColor: {
        type: String,
        default: null
    }
})
const safeAreaStyle = computed(() => ({
    height: `${safeFlag.value ? props.bottom : 0}px`,
    backgroundColor: props.bgColor
}))
onMounted(() => {
    const sysInfo = uni.getSystemInfoSync()
    safeFlag.value = props.safeStatus && /^(iphone)\s(x|11|12|13)/i.test(sysInfo.model)
})
</script>
<!-- #endif  -->

<script>
export default {
    name: 'simple-safe-view',
    // #ifndef VUE3
    props: {
        safeStatus: {
            type: Boolean,
            default: true
        },
        bottom: {
            type: Number,
            default: 22
        },
        bgColor: {
            type: String,
            default: null
        }
    },
    data() {
        return {
            safeFlag: false
        }
    },
    computed: {
        safeAreaStyle() {
            return `height:${this.safeFlag ? this.bottom : 0}px;background-color: ${this.bgColor}`
        }
    },
    created() {
        const sysInfo = uni.getSystemInfoSync()
        console.log(sysInfo)
        this.safeFlag = this.safeStatus && /^(iphone)\s(x|11|12|13)/i.test(sysInfo.model)
    }
    // #endif
}
</script>
