<template>
	<view class="detail-container">
		<u-navbar id="uNavbarId" title="商品详情" :background="{background: 'transparent' }" :border-bottom="false"
			back-icon-color="#000" title-color="#000">
			<template v-slot:right>
				<image class="collection" src="/static/icon/Settings.png" mode=""></image>
			</template>
		</u-navbar>
		<scroll-view scroll-y="true" :style="'height:'+scrollHeight+'px'">
			111
		</scroll-view>

		<view class="bottom-view" id="bottomViewId">
			<view class="icon-btn">
				<view class="item">
					<u-image width="100%" :fade="false" src="/static/mall/Home.png" mode="widthFix"></u-image>
					店铺
				</view>
				<view class="item">
					<u-image width="100%" :fade="false" src="/static/mall/Twitch.png" mode="widthFix"></u-image>
					客服
				</view>
				<view class="item">
					<u-image width="100%" :fade="false" src="/static/mall/Star.png" mode="widthFix"></u-image>
					收藏
				</view>
			</view>
			<view class="text-btn">
				<u-button class="add-car common" :hair-line="false" hover-class="none">加入购物车</u-button>
				<u-button class="buy common" :hair-line="false" hover-class="none">领券购买</u-button>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onMounted, ref, getCurrentInstance } from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import { mallAPI } from '../../api/mall';

	const instance = getCurrentInstance();
	const scrollHeight = ref(0)
	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()
				uni.createSelectorQuery().in(instance.proxy).select("#bottomViewId").boundingClientRect((data : any) => {
					scrollHeight.value = scrollHeight.value - data.height
				}).exec()
			}
		})
	}

	const dataId = ref()

	const loadData = () => {
		mallAPI.getMallDetail(dataId.value).then(res => {
			console.log(res);
		})
	}

	onLoad((val) => {
		dataId.value = val.id
	})

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

<style scoped lang="scss">
	.detail-container {
		width: 100%;
		height: 100vh;
		background: linear-gradient(180deg, #2F75F9 0%, #F0F3FF 34.13%);


		.collection {
			width: 48rpx;
			height: 48rpx;
			margin-right: 24rpx;
		}

		.bottom-view {
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 116rpx;
			background: #F5F8FF;
			padding: 0 29rpx;

			display: flex;
			flex-wrap: nowrap;
			justify-content: space-between;
			align-items: center;

			.icon-btn {
				display: flex;
				width: 228rpx;
				width: 30%;
				flex-wrap: nowrap;

				.item {
					margin-right: 20rpx;
					white-space: nowrap;

					font-family: Work Sans;
					font-weight: 400;
					font-style: Regular;
					font-size: 26rpx;
					leading-trim: NONE;
					line-height: 100%;
					letter-spacing: -2%;
				}
			}

			.text-btn {
				display: flex;
				flex: 1;
				justify-content: flex-end;

				.common {
					border: none;
					width: 200rpx;
					height: 70rpx;
					margin: 0;
					color: #fff;
					font-family: Work Sans;
					font-weight: 400;
					font-style: Regular;
					font-size: 26rpx;
					leading-trim: NONE;
					line-height: 100%;
					letter-spacing: -2%;
				}

				.buy {
					background: #6287FF;
					border-top-right-radius: 12rpx;
					border-bottom-right-radius: 12rpx;
					border-top-left-radius: 0;
					border-bottom-left-radius: 0;
				}

				.add-car {
					background: #A8BCFF;
					border-top-right-radius: 0rpx;
					border-bottom-right-radius: 0rpx;
					border-top-left-radius: 12rpx;
					border-bottom-left-radius: 12rpx;
				}
			}
		}
	}
</style>