<template>
	<view class="pages">
		<!-- head -->
		<view class="scrollPage-header">
			<view :style="{height:statusBarHeight+'px'}"></view>
			<view class="header-title">
				<view class="header-left" @click="goBack">
					<image style="width: 16px; height: 16px;margin-right:3px;" mode="aspectFit" src="../static/arrow-left.png"></image>
					<text>返回</text>
				</view>
				<view class="header-right"></view>
			</view>
		</view>
		<!-- 内容 -->
		<view class="scrollPage-content">
			<view class="product-info">
				<view :style="{height:statusBarHeight+'px'}"></view>
				<u-swiper mode="number" :border-radius="0" bg-color="#000" img-mode="heightFix" :interval="3000" :height="450" :list="imgList"></u-swiper>
				<view class="product-info-text">
					<view class="product-info-text-title">【新品】Apple iPhone 13 Pro Max (A2644) 256GB 金色 支持移动联通电信5G 双卡双待手机</view>
					<view class="product-info-text-attr">
						<view class="product-info-price">
							￥<text class="price-red">45.8</text>
						</view>
						<view class="product-info-nums">
							<view class="share">
								<button open-type="share"><u-icon :size='24' name="zhuanfa"></u-icon> 分享</button>
							</view>
						</view>
					</view>
				</view>
			</view>
			<u-divider bg-color="">商品详情</u-divider>
			<view class="product-info-guige">
				<view class="row">品牌：<text>箭冠</text></view>
				<view class="row-ban">原厂编码：<text>128/79 R78 </text></view>
				<view class="row-ban">产品编码：<text>Y123</text></view>
				<view class="row-ban">单位：<text>箱</text></view>
				<view class="row-ban">包装数：<text>5/个</text></view>
				<view class="row-ban">尺寸：<text>16cm</text></view>
				<view class="row-ban">内盒尺寸：<text>15cm</text></view>
				<view class="row-ban">重量：<text>1.5KG</text></view>
				<view class="row-ban">颜色：<text>箭冠</text></view>
			</view>
			<view class="product-info-content"></view>
		</view>
		<!-- 底部栏 -->
		<view class="scrollPage-footer">
			<view class="scrollPage-footer-box">
				<view class="footer-left">
					<view class="footer-left-item" @click="toCart">
						<u-icon :size='50' name="shopping-cart"></u-icon>
						<text class="footer-left-item-text">购物车</text>
						<text class="badge" v-if="totalNum">{{totalNum>99?'99+':totalNum}}</text>
					</view>
				</view>
				<view class="footer-right">
					<view class="footer-right-item" @click="addCart">
						<text>加入购物车</text>
					</view>
					<view class="footer-right-item" @click="toBuy">
						<text>立即购买</text>
					</view>
				</view>
			</view>
			<view :style="{height:safeAreaBottom+'px'}"></view>
		</view>
		<!-- 立即购买 -->
		<page-container
		:show="showPopu" 
		:round="true"
		:z-index="100"
		position="bottom" 
		custom-style="height:30%"
		@afterleave="closePopu">
			<view class="popu-content">
				<view class="popu-close" @click="showPopu=false">
					<uni-icons size="26" type="closeempty"></uni-icons>
				</view>
				<view class="pupu-box">
					<view class="popu-content-img">
						<image style="width: 100px; height: 100px;" mode="aspectFit" src="https://cdn.uviewui.com/uview/swiper/1.jpg"></image>
					</view>
					<view class="popu-content-info">
						<view class="popu-content-info-title">【新品】Apple iPhone 13 Pro Max (A2644) 256GB 金色 支持移动联通电信5G 双卡双待手机</view>
						<view class="popu-content-box">
							<view class="popu-content-price">￥<text class="price-red">45.8</text></view>
							<view class="popu-content-num flex align_center">
								<text style="margin-right: 5px;">数量</text>
								<uni-number-box :min="1" :max="99"></uni-number-box>
							</view>
						</view>
					</view>
				</view>
				<view class="popu-content-btn">
					<view class="popu-content-btn-item" @click="toBuy">确定采购</view>
				</view>
				<view :style="{height:safeAreaBottom+'px'}"></view>
			</view>
		</page-container>
	</view>
</template>

<script>
	import { addCart, getCartCount } from '@/api/cart.js'
	export default {
		data() {
			return {
				showPopu: false, // 弹框
				statusBarHeight: 0, // 状态栏高度
				safeAreaBottom: 0, // 底部安全区域高度
				imgList: [
					'https://cdn.uviewui.com/uview/swiper/1.jpg',
					'https://cdn.uviewui.com/uview/swiper/2.jpg',
					'https://cdn.uviewui.com/uview/swiper/3.jpg',
					'https://cdn.uviewui.com/uview/swiper/1.jpg',
					'https://cdn.uviewui.com/uview/swiper/2.jpg',
				],
				totalNum: 0 ,// 购物车总数
				productSn: null,
				detail: null
			}
		},
		onLoad(option) {
			// 计算安全区域
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
			this.safeAreaBottom = uni.getSystemInfoSync().safeAreaInsets.bottom
			this.productSn = option.sn
			// 购物车数量
			this.cartCount()
			// 获取产品详情
			// this.getDetail()
		},
		// 分享
		onShareAppMessage(e){
			return {
			  title: '产品标题',
			  path: '/pagesB/shopiing/productDetail?sn='+this.productSn,
			  imageUrl:'https://cdn.uviewui.com/uview/swiper/1.jpg',
			  type: '1',
			}
		},
		methods: {
			// 返回
			goBack(){
				uni.navigateBack()
			},
			// 产品详情
			getDetail(){
				uni.showLoading({
					title: '加载中'
				})
				// 获取产品详情
				getDetail({
					productSn: this.productSn
				}).then(res => {
					if(res.status == 200){
					}
					uni.hideLoading()
				})
			},
			// 购物车数量
			cartCount(){
				getCartCount({}).then(res => {
					if(res.status == 200){
						this.totalNum = res.data?res.data.qty:0
					}
				})
	        },
			// 加入购物车
			addCart(){
				addCart({
					qty:19,
					price: 10,
					productSn:13
				}).then(res => {
					if(res.status == 200){
						this.cartCount()
						uni.showToast({
							title: '加入成功',
							icon: 'success'
						})
					}
				})
			},
			// 打开购物车
			toCart(){
				uni.switchTab({
					url: '/pages/cart/index'
				})
			},
			// 立即购买
			toBuy(){
				// 打开数量选择弹框
				if(!this.showPopu){
					this.showPopu = true
				}else{
					// 提交
					this.submitOk = true
				}
			},
			// 关闭后
			closePopu(){
				this.showPopu = false
				uni.hideLoading()
				
				// 提交成功
				if(this.submitOk){
					uni.navigateTo({
						url: "/pagesB/procureOrder"
					})
				}
			},
		}
	}
</script>

<style lang="less">
	.pages {
		height: 100vh;
		display: flex;
		flex-direction: column;
		.scrollPage-header{
			z-index: 1;
			width: 100%;
			position:fixed;
			left: 0;
			top: 0;
			.header-title{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 10px;
				height: 44px;
				.header-left{
					display: flex;
					align-items: center;
					text{
						font-size: 14px;
						color: #333333;
					}
					background-color: rgba(255,255,255,0.6);
					box-shadow: 0px 1px 0px 0px #E6E6E6;
					border-radius: 50px;
					padding: 3px 6px 3px;
				}
				.header-right{
					width: 50px;
				}
			}
		}
		.scrollPage-content{
				flex: 1;
				overflow-y: auto;
				.product-info{
					background:#fff;
					margin-bottom: 10px;
					.product-info-text{
						padding: 10px;
						.product-info-text-title{
							font-weight: bold;
							color: #333333;
							line-height: 22px;
							margin-bottom: 5px;
						}
						.product-info-text-attr{
							display: flex;
							align-items: center;
							justify-content: space-between;
							.product-info-price{
								font-size: 14px;
								color: #FF0000;
								.price-red{
									font-size: 24px;
								}
							}
							.product-info-nums{
								font-size: 12px;
								color: #999999;
								>view{
									display: flex;
									align-items: center;
								}
								.share{
									button{
										width: auto;
										padding: 0;
										border: 0;
										background: none;
										line-height: normal;
										margin: 0;
										display: inline;
										font-size: 12px;
										color: #999;
										&::after{
											border:none;
										}
										/deep/ .u-icon{
											margin-right: 3px;
										}
									}
								}
							}
						}
					}
				}
				.product-info-guige{
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					background:#fff;
					margin: 10px 0;
					padding: 10px;
					line-height: 28px;
					.row{
						width: 100%;
					}
					.row-ban{
						width: 50%;
					}
					>view{
						color: #999;
						text{
							color: #333333;
						}
					}
				}
				.product-info-content{
					background:#fff;
					margin-bottom: 10px;
					padding: 10px;
					line-height: 28px;
				}
		}
		.scrollPage-footer{
			background-color: #FFFFFF;
			width: 100%;
			position: fixed;
			left: 0;
			bottom: 0;
			.scrollPage-footer-box{
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 50px;
			}
			.footer-left{
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 35%;
				.footer-left-item{
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					padding: 0 15px;
					position: relative;
					.footer-left-item-text{
						font-size: 12px;
						color: #666666;
					}
					.badge{
						background: #f44336;
						color: #fff;
						position: absolute;
						right: 0;
						top: -8px;
						font-size: 12px;
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 50rpx;
						padding: 0 10rpx;
					}
				}
			}
			.footer-right{
				width: 60%;
				height: 100%;
				display: flex;
				align-items: center;
				.footer-right-item{
					height: 100%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 50%;
					font-size: 14px;
					color: #FFFFFF;
				}
				.footer-right-item:first-child{
					background-color: #FF9900;
				}
				.footer-right-item:last-child{
					background-color: #FF0000;
				}
			}
		}
		
		.popu-content{
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 10px;
				.popu-close{
					padding: 10px;
					position: absolute;
					right: 0;
					top: 0;
				}
				.pupu-box{
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 25px;
				}
				.popu-content-img{
					border-radius: 10px;
					border: 1px solid #eee;
				}
				.popu-content-info{
					padding: 0 0 0 10px;
					.popu-content-info-title{
						font-size: 14px;
						font-weight: bold;
					}
				}
				.popu-content-box{
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 10px;
					.popu-content-price{
						font-size: 14px;
						color: #eb0000;
						.price-red{
							font-size: 24px;
						}
					}
					.popu-content-num{
						font-size: 12px;
						color: #999999;
						padding: 0 10px;
					}
				}
				.popu-content-btn{
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-top: 20px;
					.popu-content-btn-item{
						width: 100%;
						height: 40px;
						background-color: #eb0000;
						color: #FFFFFF;
						font-size: 14px;
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 10px;
					}
				}
		}
	}
</style>