<template>
    <view
        :class="[
            'iphone-x-box',
            isIphoneX ? 'iphone-bottom' : '',
        ]"
    >
        <slot></slot>
    </view>
</template>

<script>
/**
 * 作者：zhangguobiao@baidu.com
 * 描述：兼容iPhone X及其以上IOS机型的公共组件
*/
import {getSystemInfo} from '@baidu/med-utils/lib/Mars/system';
export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    data() {
        return {
            isIphoneX: false,
        };
    },
    mounted() {
        let systemInfo = getSystemInfo();
        if (
            (systemInfo.model.indexOf('iPhone X') !== -1
                || systemInfo.model.indexOf('iPhone 11') !== -1
                || systemInfo.model.indexOf('iPhone 12') !== -1
                || systemInfo.model.indexOf('iPhone 13') !== -1)
        ) {
            this.isIphoneX = true;
        }
    }
};
</script>

<style lang="less" scoped>
.iphone-x-box {
    width: 100%;
    position: fixed;
    bottom: 0;
    background: #fff;
}
.iphone-bottom {
    padding-bottom: 10px;
}
</style>
