<template>
	<view class="shop">
		<!-- 		<view class="orderdetail_header p30">
			<view :style="{ height: statusBarHeight }"></view>
			<view style="height: 44px; display: flex; align-items: center" @click="">
				<up-icon name="arrow-left" bold color="#000" @click="back"></up-icon>
				<view @click="back" style="margin-left: 25rpx; transition: all 0.5s">商品详情</view>
			</view>
		</view> -->
		<up-swiper :list="[shop.cover]" height="759rpx"></up-swiper>
		<view class="p30">
			<view class="shop_info">
				<view class="shop_info_mon">￥ {{ shop.currentPrice }}</view>
				<view class="shop_info_tit">{{ shop.name }}</view>
				<view class="shop_info_note">
					库存：{{ shop.stock }}
					<view style="width: 50rpx"></view>
					销量：{{ shop.sales }}
				</view>
			</view>
		</view>
		<view style="margin: 30rpx 0; font-size: 30rpx; color: #333; text-align: center">详情介绍</view>
		<image style="width: 100%" mode="widthFix" :src="item" v-for="(item, index) in shop.detail.split(',')" :key="index"></image>
		<view style="height: 150rpx"></view>
		<view class="shop_btn">
<!-- 			<view>
				<view>首页</view>
			</view>
			<view>
				<view>客服</view>
			</view> -->
			<view class="shop_btn_btn" @click="navTo(`/pageInvest/shop/affirm?id=${shop.id}`)">立即下单</view>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive, computed } from 'vue';
import { useNav } from '@/hooks/useNav.js';
import { shopInfo } from '@/api/api.js';
let shop = ref({});

const { nav, navTo } = useNav();

const headerBg = ref(false);
const statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
import { onLoad, onPageScroll } from '@dcloudio/uni-app';

const list3 = ref(['/static/图层 979.png']);

onLoad(async (options) => {
	console.log(options);
	let _res = await shopInfo({
		goodId: options.id
	});
	shop.value = _res;
});

const back = () => {
	uni.navigateBack();
};

onPageScroll((e) => {
	if (e.scrollTop > uni.getSystemInfoSync().statusBarHeight + 44) {
		headerBg.value = true;
	} else {
		headerBg.value = false;
	}
});
</script>

<style>
page {
	background: #f7f7f7;
}
</style>

<style scoped lang="scss">
.orderdetail_header {
	width: 750rpx;
	transition: all 0.5s;
}

.shop_btn {
	position: fixed;
	bottom: 0;
	left: 0;
	padding: 20rpx 60rpx 30rpx;
	width: 750rpx;
	height: 120rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #fff;
	image {
		width: 40rpx;
		height: 40rpx;
		margin-right: 30rpx;
	}
	&_btn {
		width: 496rpx;
		// height: 64rpx;
		padding: 15rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 2rpx solid #002ea4;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		font-size: 28rpx;
		color: #002ea4;
	}
}

.shop_info {
	padding: 30rpx;
	background-color: #fff;
	border-radius: 8rpx;
	margin-top: 30rpx;
	&_mon {
		font-weight: bold;
		font-size: 44rpx;
		color: #ff1a1a;
	}
	&_tit {
		font-weight: bold;
		font-size: 34rpx;
		color: #232323;
		margin-bottom: 15rpx;
	}
	&_note {
		display: flex;
		align-items: center;
		font-weight: 400;
		font-size: 30rpx;
		color: #666666;
	}
}
</style>