<template>
	<view class="cg-container">
		<view class="cg-header">
			<view class="cg-header-title">
				<view class="icon-line">
					<image mode="aspectFit" src="/static/images/icon/retail/storeIcon.png"></image>
					<view>{{ curStore.name ? curStore.name : '' }}</view>
				</view>
			</view>
			<scroll-view class="cg-header-content" :scroll-top="0" :scroll-y="true" :style="{ height:cartListFinalHeight, paddingBottom:cartListFinalPaddingBottom }">
				<view class="main-list" v-for="item in cartListFinal" :key="item.id">
					<view class="item-left">
						<image mode="aspectFit" :src="item.goods_img"></image>
					</view>
					<view class="item-right">
						<view class="item-right-top">
							<view class="item-right-name">{{ item.goods_name }}</view>
							<view class="item-right-spec">
								<view>{{ `${item.erp_goods.erp_goods_specs}/${item.erp_goods.erp_goods_type}/${item.erp_goods.erp_goods_sku}` }}</view>
								<view>x{{ item.count }}</view>
							</view>
						</view>
						
						<view class="item-right-price-count">
							<view class="item-right-price-row">
								<view><text>￥</text>{{ item.assistant_price }}</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		
		<view class="cg-footer">
			<view>
				<view class="cg-footer-price">
					<view>实付款：</view>
					<view><text>￥</text>{{ totalPrice }}</view>
				</view>
				
				<view class="cg-footer-btn">
					<view class="cg-footer-btn-confirm" @click="cartConfirm"><button hover-class="hover-active">提交订单</button></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import util from '../../../../utils/util.js';
	import tools from '../../js/tools';
	import retailServer from '../../js/retail_server';
	
	export default {
		components: {},
		data() {
			return {
				curStore: {},				// 当前店铺信息
				cartListFinal: [],	// 购物车最终列表数据
				totalPrice: 0,			// 最终价格
				cartListScroll: false,				// 购物车列表是否能滚动
				cartListFinalHeight: "0rpx",	// 最终显示的列表高度
				cartListFinalPaddingBottom: "0rpx",	// 根据是否是异形屏来设置
			}
		},
		onLoad(option) {
			let data = JSON.parse(decodeURIComponent(option.data));
			this.curStore = data.curStore;
			this.cartListFinal = data.cartListFinal;
			this.totalPrice = data.totalPrice;

			this.fixMainHeight();		// 适配主内容高度
			util.showLoad();
			setTimeout(util.hideLoad, 500);
		},
		methods: {
			// 提交订单
			cartConfirm() {
				let data = { cartListFinal: this.cartListFinal, curStore: this.curStore, totalPrice: this.totalPrice };
				uni.navigateTo({
					url: `/subpackage/retail/pages/confirm_order/confirm_order?data=${encodeURIComponent(JSON.stringify(data))}`
				});
			},
			// 适配主内容高度
			fixMainHeight() {
				let _this = this;
				uni.getSystemInfo({
					success: res => {
						console.log(res);
						let sumHeight = res.windowHeight;	// 获取可用的总高度
						
						// 看看当前滚动框是否超出这个高度
						let query = uni.createSelectorQuery().select(".cg-footer");
						query.boundingClientRect(data => {
							sumHeight = sumHeight - data.height - uni.upx2px(100);	// 可用高度减去footer 再减去顶部标题项
							let contentHeight = sumHeight;
							
							query = uni.createSelectorQuery().select(".main-list");
							query.boundingClientRect(data => {
								let itemSize = data.height;
								let limitCount = Math.floor(contentHeight / itemSize);
								let height = _this.cartListFinal.length >= limitCount ? contentHeight : _this.cartListFinal.length * itemSize;
								_this.cartListFinalHeight = `${tools.px2rpx(height)}rpx`;
								
								// 可以滚动，并且设置safeArea,大于等于44的为iphoneX及以上
								if (height >= contentHeight) {
									_this.cartListScroll = true;
									_this.cartListFinalPaddingBottom = `${res.safeArea.top >= 44 ? tools.px2rpx(res.safeArea.top) : 0}rpx`;
								}
							}).exec();
						}).exec();
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	@import '~style/public.scss';
	$orange: #FF873D;
	page {
		background-color: white;
	}
	
	.cg-container {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;
		padding-bottom: 0rpx;
		padding-bottom: calc( 0rpx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
		padding-bottom: calc( 0rpx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
		
		.cg-header {
			display: flex;
			flex-direction: column;
			flex-grow: 1;
			background-color: #F2F2F7;
			
			.cg-header-title {
				width: 100%;
				height: 100rpx;
				background-color: white;
				padding: 0 24rpx;
				
				.icon-line {
					@include centerFlex(flex-start);
					width: 100%;
					height: 100%;
					font-weight: 500;
					border-bottom: 1rpx solid rgba(216, 216, 216, 0.3);
					
					>image {
						width: 32rpx;
						height: 30rpx;
						margin-right: 12rpx;
					}
				}
			}
			.cg-header-content {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: flex-start;
				padding: 0 24rpx;
				background-color: white;
				
				.main-list {
					display: flex;
					flex-direction: row;
					padding: 23rpx 0;
					
					.item-left {
						width: 140rpx;
						height: 140rpx;
						margin-right: 20rpx;
						position: relative;
						border-radius: 10rpx;
						@include centerFlex(center);
						flex-shrink: 0;
						
						>image {
							max-width: 100%;
							max-height: 100%;
						}
					}
					.item-right {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						flex-grow: 1;
						
						.item-right-top {
							display: flex;
							flex-direction: column;
							
							.item-right-name {
								font-size: 28rpx;
								word-break: break-all;
							}
							.item-right-spec {
								margin: 8rpx 0 14rpx 0;
								font-size: 24rpx;
								color: #9A9A9D;
								word-break: break-all;
								@include centerFlex(space-between);
							}
						}
						.item-right-price-count {
							@include centerFlex(space-between);
							
							.item-right-price-row {
								color: $orange;
								word-break: break-all;
								
								>view {
									&:first-child {
										font-size: 32rpx;
										line-height: 32rpx;
										
										>text {
											font-size: 24rpx;	
											line-height: 24rpx;
										}
									}
								}
							}
						}
					}
				}
			}
		}
		.cg-footer {
			display: flex;
			flex-direction: row;
			position: fixed;
			bottom: calc( 0rpx + constant(safe-area-inset-bottom));
			bottom: calc( 0rpx + env(safe-area-inset-bottom));
			width: 100%;
			height: 108rpx;
			background-color: white;
			
			>view {
				@include centerFlex(space-between);
				width: 100%;
				height: 100%;
				
				.cg-footer-price {
					@include centerFlex(flex-start);
					height: 88rpx;
					width: 100%;
					padding-left: 28rpx;
					
					>view {
						&:first-child {
							font-size: 28rpx;
						}
						&:nth-child(2) {
							color: $orange;
							font-size: 36rpx;
							
							>text {
								font-size: 28rpx;
							}
						}
					}
				}
				.cg-footer-btn {
					@include centerFlex(flex-end);
					height: 88rpx;
					padding-right: 24rpx;
					font-size: 32rpx;
					
					> view {
						@include centerFlex(center);
					}
					.cg-footer-btn-confirm {
						>button {
							width: 240rpx;
							height: 88rpx;
							line-height: 88rpx;
							border-radius: 44rpx;
							padding: 0 0;
							color: white;
							background-color: $themeColor;
							border: 2rpx solid $themeColor;
						}
					}
				}
			}
		}
	}
</style>