<template>
	<view
		class="uv-safe-bottom"
		:style="[style]"
		:class="[!isNvue && 'uv-safe-area-inset-bottom']"
	>
	</view>
</template>

<script>
	import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
	import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
	/**
	 * SafeBottom 底部安全區
	 * @description 這個適配，主要是針對IPhone X等壹些底部帶指示條的機型，指示條的操作區域與頁面底部存在重合，容易導致用戶誤操作，因此我們需要針對這些機型進行底部安全區適配。
	 * @tutorial https://www.uvui.cn/components/safeAreaInset.html
	 * @property {type}		prop_name
	 * @property {Object}	customStyle	定義需要用到的外部樣式
	 *
	 * @event {Function()}
	 * @example <uv-status-bar></uv-status-bar>
	 */
	export default {
		name: "uv-safe-bottom",
		mixins: [mpMixin, mixin],
		data() {
			return {
				safeAreaBottomHeight: 0,
				isNvue: false,
			};
		},
		computed: {
			style() {
				const style = {};
				// #ifdef APP-NVUE || MP-TOUTIAO || MP-LARK
				// nvue下，高度使用js計算填充
				style.height = this.$uv.addUnit(this.$uv.sys()?.safeAreaInsets?.bottom, 'px');
				// #endif
				return this.$uv.deepMerge(style, this.$uv.addStyle(this.customStyle));
			},
		},
		mounted() {
			// #ifdef APP-NVUE
			// 標識為是否nvue
			this.isNvue = true;
			// #endif
		},
	};
</script>

<style lang="scss" scoped>
	.uv-safe-bottom {
		/* #ifndef APP-NVUE */
		width: 100%;
		/* #endif */
	}
	/* #ifndef APP-NVUE */
	// 歷遍生成4個方向的底部安全區
	@each $d in top, right, bottom, left {
		.uv-safe-area-inset-#{$d} {
			padding-#{$d}: 0;
			padding-#{$d}: constant(safe-area-inset-#{$d});  
			padding-#{$d}: env(safe-area-inset-#{$d});  
		}
	}
	/* #endif */
</style>
