<template>
	<view
		:style="{
			paddingTop: seatHeight + 'px',
		}"
		class="layer"
	>
		<view
			:style="{
				...basePosition,
				width: '100%',
			}"
		>
			<view :style="{ position: 'absolute', ...baseBackground }"></view>
			<view class="fix-base-style" :style="baseStyle" :class="[`fix-base-style-${index}`]">
				<slot></slot>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup name="fix-base-style">
import { computed, watch, ref, nextTick, getCurrentInstance } from "vue";
import { baseProps } from "../../hooks";

const { proxy }: any = getCurrentInstance();
const { statusBarHeight = 0 } = uni.getSystemInfoSync();

// 定义属性，简化默认对象的写法
const props = defineProps({
	...baseProps,
	// 背景跟随子元素的间距圆角
	flowInner: {
		type: Boolean,
		default: true,
	},
	statusBar: {
		type: Boolean,
		default: false,
	},
	index: {
		type: Number,
		default: 0,
	},
});

// 计算 baseStyle，使用解构优化
const baseStyle = computed(() => {
	const { marginTop, marginBottom, marginLR, padding, borderTopLR, borderBottomLR } =
		props.styleSpacing;

	const { color } = props.styleColor;

	return {
		margin: `${marginTop}rpx ${marginLR}rpx ${marginBottom}rpx ${marginLR}rpx`,
		color: color,
		padding: `${padding}rpx`,
		borderRadius: `${borderTopLR}rpx ${borderTopLR}rpx ${borderBottomLR}rpx ${borderBottomLR}rpx`,
	};
});
const baseBackground = computed(() => {
	const { backgroundColor, opacity } = props.styleColor;
	const { marginTop, marginBottom, marginLR, borderTopLR, borderBottomLR } = props.styleSpacing;
	let flow: any = {
		left: 0,
		top: 0,
		right: 0,
		bottom: 0,
	};
	if (props.flowInner) {
		flow = {
			left: `${marginLR}rpx`,
			top: `${marginTop}rpx`,
			right: `${marginLR}rpx`,
			bottom: `${marginBottom}rpx`,
			borderRadius: `${borderTopLR}rpx ${borderTopLR}rpx ${borderBottomLR}rpx ${borderBottomLR}rpx`,
		};
	}
	return {
		backgroundColor: backgroundColor,
		opacity: opacity,
		zIndex: -1,
		...flow,
	};
});

const basePosition = computed(() => {
	const { top, mode, zIndex } = props.position;
	let topPos = top;
	if (props.statusBar) topPos = topPos + statusBarHeight;
	return {
		top: `${topPos}px`,
		position: mode,
		zIndex: zIndex,
	};
});
const seatHeight = ref(0);
watch(
	() => props.position,
	async (position) => {
		if (position.isSeat && position.mode === "fixed") {
			refreshSeat();
		}
	},
	{
		deep: true,
		immediate: true,
	},
);

function refreshSeat() {
	nextTick(() => {
		uni.createSelectorQuery()
			// #ifndef MP-ALIPAY
			.in(proxy)
			// #endif
			.select(`.fix-base-style-${props.index}`)
			.boundingClientRect((res: any) => {
				seatHeight.value = res.height;
			})
			.exec();
	});
}
</script>

<style lang="scss" scoped>
.layer {
	width: 100%;
	position: relative;
	.fix-base-style {
		height: auto;
		box-sizing: border-box;
	}
}
</style>
