<template>
	<view class="shipping-container">
		<u-navbar id="uNavbarId" back-text="收货地址" :back-text-style="navBarTitle" :background="{background: 'transparent' }" :border-bottom="false"
			back-icon-color="#000" title-color="#000">
			<template v-slot:right>
				<view class="right-menu">
					<view class="">
						管理
					</view>
					<view class="u-m-l-10 add-text">
						新增地址
					</view>
				</view>
			</template>
		</u-navbar>
		<scroll-view scroll-y="true" :style="'height:'+scrollHeight+'px'">
			<view> </view>
		</scroll-view>
	</view>
</template>

<script setup lang="ts">
	import { getCurrentInstance, onMounted, ref } from 'vue'
	
	const navBarTitle = {
		fontWeight: '510',
		fontStyle: 'Medium',
		fontSize: '40rpx',
		lineHeight: '52px'
	}

	const scrollHeight = ref(0)
	const instance = getCurrentInstance();
	const loadHeight = () => {
		uni.getSystemInfo({
			success(res) {
				let screenHeight = res.screenHeight
				uni.createSelectorQuery().in(instance.proxy).select("#uNavbarId").boundingClientRect((data : any) => {
					scrollHeight.value = screenHeight - data.height
				}).exec()
			}
		})
	}

	onMounted(() => {
		loadHeight()
	})
</script>

<style scoped lang="scss">
	.shipping-container {
		width: 100%;
		height: 100vh;
		background: #B9D5FF;

		.right-menu {
			display: flex;
			margin-right: 24rpx;
			font-family: Work Sans;
			font-weight: 500;
			font-style: Medium;
			font-size: 32rpx;
			leading-trim: NONE;
			line-height: 100%;
			letter-spacing: -2%;
			.add-text{
				color: #305DEF;
			}
		}
	}
</style>