<template>
	<view class="cg-container">
		<view class="final-cart-list">
			<view class="final-cart-list-dialog-title">
				<view>商品名称</view>
				<view>售价</view>
				<view>数量</view>
			</view>
			<scroll-view class="final-cart-list-dialog-content" :scroll-top="0" :scroll-y="cartListScroll" :style="{ height:cartListFinalHeight, paddingBottom:cartListFinalPaddingBottom }">
				<view class="final-cart-list-dialog-content-for" :style="{ borderBottom:item.borderBottom }" v-for="item in cartListFinal" :key="item.id">
					<view class="final-cart-list-dialog-content-col1">
						<view>{{ item.erp_goods_name }}</view>
						<view>{{ item.erp_goods_specs }}</view>
					</view>
					<view class="final-cart-list-dialog-content-col2">
						<input v-if="isEdited" type="digit" :value="item.erp_goods_price" @confirm="cartInputConfirm($event, item.id)" @blur="cartInputConfirm($event, item.id)" />
						<view v-if="!isEdited">{{item.erp_goods_price}}</view>
						<view>元</view>
					</view>
					<view class="final-cart-list-dialog-content-col3">
						<image v-if="isEdited" mode="aspectFit" src="/static/images/icon/retail/sub.png" @click="cartCountClick('sub', item.id)"></image>
						<view>{{ item.erp_goods_sale_total }}</view>
						<image v-if="isEdited" mode="aspectFit" src="/static/images/icon/retail/add.png" @click="cartCountClick('add', item.id)"></image>
					</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-reedit" v-if="!isEdited" @click="cartReedit"><button hover-class="hover-active">重新编辑</button></view>
					<view class="cg-footer-btn-confirm" @click="cartConfirm"><button hover-class="hover-active">{{cartConfirmText}}</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';
	import retailApi from '../../js/retail_api';
	
	export default {
		data() {
			return {
				isEdited: false,		// 是否处于编辑模式
				curStore: null,			// 当前店铺信息
				cartListFinal: [],	// 购物车最终列表数据
				totalPrice: 0,			// 最终价格
				cartConfirmText: "收款出库",		// 收款出库 || 确认
				cartListScroll: false,				// 购物车列表是否能滚动
				cartListFinalHeight: "0rpx",	// 最终显示的列表高度
				cartListFinalPaddingBottom: "0rpx",	// 根据是否是异形屏来设置
			}
		},
		onLoad(option) {
			let data = JSON.parse(decodeURIComponent(option.data));
			
			this.curStore = data.curStore;
			this.cartListFinal = [];
			for (let i = 0; i < data.cartListFinal.length; ++i) {
				this.cartListFinal.push(tools.getNewObj(data.cartListFinal[i]));
				this.cartListFinal[i]["borderBottom"] = "1rpx solid rgb(216,216,216)";
			}
			
			// 最后一项默认不显示边框
			this.cartListFinal[this.cartListFinal.length - 1]["borderBottom"] = "0rpx solid rgb(216,216,216)";
			this.fixMainHeight();		// 适配主内容高度
			this.calcTotalPrice();	// 计算总价
			
			util.showLoad();
			setTimeout(util.hideLoad, 1000);
		},
		methods: {
			// 重新编辑
			cartReedit() {
				this.isEdited = true;
				this.cartConfirmText = "确认";
			},
			
			// 确认 || 收款出库
			cartConfirm() {
				if (this.cartConfirmText == "确认") {
					this.isEdited = false;
					this.cartConfirmText = "收款出库";
					return;
				}
				
				let _this = this;
				let data = [];
				for (let i = 0; i < this.cartListFinal.length; ++i) {
					if (this.cartListFinal[i].erp_goods_sale_total) {
						data.push({
							id: this.cartListFinal[i].id,
							name: this.cartListFinal[i].erp_goods_name,
							price: this.cartListFinal[i].erp_goods_price,
							nums: this.cartListFinal[i].erp_goods_sale_total,
							unit: this.cartListFinal[i].erp_goods_unit,
						});
					}
				}
				
				if (!data.length) {
					util.showNone("暂无商品数量！");
					return;
				}
				
				util.showLoad();
				retailServer.get({
					url: retailApi.assistantRetail,
					data: {
						store_id: _this.curStore.id,
						goods_data: data,
					},
					isDefaultGet: false,
					failMsg: '出库失败！'
				}).then(res => {
					if (res.data.code == 0) {
						util.hideLoad();
						uni.navigateBack({
						  delta: 1
						});
					}
					else {
						util.showNone(res.data.message || '操作失败！');
					}
				});
			},
			
			// 购物车输入确认
			cartInputConfirm(event, id) {
				// 修改购物车列表对应的价格
				let value = parseFloat(event.detail.value ? event.detail.value : 0).toFixed(2);
				for (let i = 0; i < this.cartListFinal.length; ++i) {
					if (this.cartListFinal[i].id == id) {
						this.cartListFinal[i].erp_goods_price = value;
					}
				}
				
				this.calcTotalPrice();	// 计算总价
			},
			
			// 购物车列表数量选项触发
			cartCountClick(type, id) {
				// 找点击的对应商品
				let item = null;
				for (let i = 0; i < this.cartListFinal.length; ++i) {
					if (this.cartListFinal[i].id == id) {
						item = this.cartListFinal[i];
						break;
					}
				}
				
				if (item) {
					switch (type) {
						case "add": {
							item.erp_goods_sale_total += 1;	
						} break;
						case "sub": {
							if (item.erp_goods_sale_total <= 0) {
								return;
							}
							
							item.erp_goods_sale_total -= 1;	
						} break;
					}
					
					this.calcTotalPrice();	// 计算总价
				}
			},
			
			// 计算总价
			calcTotalPrice() {
				let price = 0.0;
				
				for (let i = 0; i < this.cartListFinal.length; ++i) {
					price += (this.cartListFinal[i].erp_goods_sale_total * this.cartListFinal[i].erp_goods_price);
				}
				
				this.totalPrice = price.toFixed(2);
			},
			
			// 适配主内容高度
			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(90);	// 可用高度减去footer 再减去顶部标题项
							let contentHeight = sumHeight;
							
							query = uni.createSelectorQuery().select(".final-cart-list-dialog-content-for");
							query.boundingClientRect(data => {
								let itemSize = (data.height + uni.upx2px(30));	// 30是margin
								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">
	page {
		// background-color: rgb(237,237,245);
		background-color: rgb(255,255,255);
	}
	
	.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 */
		// border: 1px solid red;
		
		.final-cart-list {
			display: flex;
			flex-direction: column;
			// width: 100%;
			// height: 100%;
			flex-grow: 1;
			background-color: rgb(237,237,245);
			
			.final-cart-list-dialog-title {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				height: 90rpx;
				text-align: center;
				padding-left: 34rpx;
				padding-right: 36rpx;
				background-color: rgb(255,255,255);
				
				>view {
					font-size: 32rpx;
					color: rgb(51,51,51);
					
					&:first-child {
						width: 258rpx;
						
					}
					&:nth-child(2) {
						width: 166rpx;
					}
					&:nth-child(3) {
						width: 126rpx;
					}
				}
			}
			
			.final-cart-list-dialog-content {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: flex-start;
				// flex-grow: 1;
				// height: 428rpx;
				padding-left: 34rpx;
				padding-right: 36rpx;
				background-color: rgb(255,255,255);
				// 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 */
				
				.final-cart-list-dialog-content-for {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: flex-start;
					// flex-grow: 1;	
					height: 114rpx;
					border-bottom: 1rpx solid rgb(216,216,216);
					background-color: rgb(255,255,255);
					margin-top: 30rpx;
					
					.final-cart-list-dialog-content-col1 {
						// display: flex;
						flex-direction: column;
						justify-content: flex-start;
						align-items: center;
						width: 258rpx;
						
						>view {
							overflow: hidden;
							word-break: nowrap;
							text-overflow: ellipsis;  /* 超出部分省略号 */
							display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
							-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
							-webkit-line-clamp: 1; /** 显示的行数 **/
							
							&:first-child {
								font-size: 28rpx;
								color: rgb(51,51,51);
								margin-bottom: 8rpx;
							}
							&:nth-child(2) {
								font-size: 24rpx;
								color: rgb(154,154,157);
							}
						}
					}
					
					.final-cart-list-dialog-content-col2 {
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center;
						color: rgb(51,51,51);
						font-size: 28rpx;
						text-align: center;
						width: 166rpx;
						
						>input {
							width: 132rpx;
							height: 48rpx;
							border: 2rpx solid rgb(216,216,216);
							border-radius: 4rpx;
						}
						>view {
							&:first-child {
								
							}
							&:nth-child(2) {
								margin-left: 6rpx;
							}
						}
					}
					
					.final-cart-list-dialog-content-col3 {
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center;
						width: 126rpx;
						
						>image {
							width: 36rpx;
							height: 36rpx;
							
							&:first-child {
								
							}
							&:nth-child(3) {
								
							}
						}
						>view {
							margin-left: 12rpx;
							margin-right: 12rpx;
							color: rgb(51,51,51);
							font-size: 28rpx;
						}
					}
				}
			}
		}
	
		.cg-footer {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: flex-start;
			// flex-grow: 1;
			// opacity: 0.3;
			
			position: fixed;
			// bottom: 0rpx;
			bottom: calc( 0rpx + constant(safe-area-inset-bottom));
			bottom: calc( 0rpx + env(safe-area-inset-bottom));
			// padding-bottom: calc( 0rpx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
			// padding-bottom: calc( 0rpx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
			width: 100%;
			height: 188rpx;
			// border: 1rpx solid blue;
			background-color: rgb(255,255,255);
			
			>view {
				display: flex;
				flex-direction: column;
				// justify-content: flex-end;
				align-items: flex-start;
				width: 100%;
				height: 100%;
				
				.cg-footer-price {
					display: flex;
					flex-direction: row;
					justify-content: flex-end;
					align-items: center;
					height: 88rpx;
					width: 100%;
					padding-right: 40rpx;
					
					>view {
						&:first-child {
							font-size: 24rpx;
						}
						&:nth-child(2) {
							color: rgb(255,135,61);
							font-size: 32rpx;
							
							>text {
								font-size: 24rpx;
							}
						}
					}
				}
				
				.cg-footer-btn {
					display: flex;
					flex-direction: row;
					justify-content: flex-end;
					align-items: center;
					height: 88rpx;
					width: 100%;
					padding-right: 24rpx;
					font-size: 32rpx;
					
					> view {
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center;
					}
					
					.cg-footer-btn-reedit {
						>button {
							width: 242rpx;
							height: 88rpx;
							line-height: 88rpx;
							border-radius: 44rpx;
							padding: 0 0;
							color: rgb(0,152,116);
							background-color: rgb(255,255,255);
							border: 2rpx solid rgb(0,152,116);
							margin-right: 20rpx;
						}
					}
					
					.cg-footer-btn-confirm {
						>button {
							width: 242rpx;
							height: 88rpx;
							line-height: 88rpx;
							border-radius: 44rpx;
							padding: 0 0;
							color: rgb(255,255,255);
							background-color: rgb(0,152,116);
							border: 2rpx solid rgb(0,152,116);
						}
					}
				}
			}
		}
	}
</style>