<template>
	<view class="all" v-if="show">
		<uni-popup ref="popup" type="bottom">
			<view class="box">
				<view class="top">
					<view class="top-left">
						<view class="quan">
							<view class="qzq">

							</view>
						</view>
						<view class="top-font">
							已选商品
						</view>
					</view>
					<view class="top-right" @click="clearCart">
						<image src="../../../static/icon/clear.png" mode=""></image>
						<view class="right-clear">
							清空购物车
						</view>
					</view>
				</view>
				<scroll-view :key="item.id" scroll-y class="scoroll">
					<view v-for="(item, index) in cartList">
						<view class="cart-item" :class="{ 'b-b': index !== cartList.length - 1 }">
							<view class="image-wrapper">
								<image :src="item.productInfo.image" :class="[item.loaded]" mode="aspectFill" lazy-load
									@load="onImageLoad('cartList', index)" @error="onImageError('cartList', index)">
								</image>
							</view>
							<view class="item-right">
								<text class="clamp title">{{ item.productInfo.store_name }}</text>
								<text class="attr">{{ item.productInfo.attrInfo.suk }}</text>
								<text class="price"
									style="margin-top: 30rpx;">¥{{ item.productInfo.attrInfo.price }}</text>
							</view>
							<view class="item-num">
								<view class="munbox flex">
									<image src="../../../static/icon/reduce.png" mode="" @click="reduce(item, index)">
									</image>
									<input type="number" :value="item.cart_num" disabled />
									<image src="../../../static/icon/add.png" mode="" @click="add(item)"></image>
								</view>
							</view>
						</view>
					</view>
					<view class="db"></view>
				</scroll-view>

			</view>
		</uni-popup>
		<view class="action-section">
			<view class="total-box" @click.stop="showPopup">
				<view class="bg">
					<image src="../../../static/img/pay.png" mode=""></image>
					<view class="num" v-if="num != 0">{{ num }}</view>
				</view>

				<view class="total-price">
					￥
					<text>{{ total }}</text>
				</view>
			</view>
			<button type="primary" class="confirm-btn" @click.stop="createOrder">去结算</button>
		</view>
	</view>
</template>

<script>
	import {
		getCartList,
		getCartNum,
		cartDel
	} from '@/api/user.js';
	import {
		mapState
	} from 'vuex';
	import uniNumberBox from '@/components/uni-number-box.vue';
	import {
		saveUrl,
		interceptor
	} from '@/utils/loginUtils.js';
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	export default {
		components: {
			uniNumberBox,
			uniPopup
		},
		data() {
			return {
				total: 0, //总价格
				allChecked: false, //全选状态  true|false
				empty: false, //空白页现实  true|false
				cartList: [],
				num: '',
				show: false
			};
		},
		mounted() {
			this.loadData();
		},
		watch: {
			//显示空白页
			// cartList(e) {
			// 	let empty = e.length === 0 ? true : false;
			// 	if (this.empty !== empty) {
			// 		this.empty = empty;
			// 	}

			// }
			cartList: {
				deep: true, //深度监听
				immediate: true,
				handler(newValue, oldValue) {
					let empty = newValue.length === 0 ? true : false;
					if (this.empty !== empty) {
						this.empty = empty;
					}
				}
			}
		},
		computed: {
			...mapState('user', ['hasLogin'])
		},
		methods: {
			reduce(item, index) {
				if (item.cart_num == 1) {
					uni.showModal({
						content: '删除该商品？',
						success: e => {
							if (e.confirm) {
								this.deleteCartItem(index);
							}
						}
					});
				} else {
					item.cart_num--;
					getCartNum({
							id: item.id,
							number: item.cart_num
						})
						.then(e => {
							console.log(e);
						})
						.catch(function(e) {
							console.log(e);
						});
					this.calcTotal(item);
				}
			},
			add(item) {
				console.log(item);
				if (item.productInfo.stock > item.cart_num) {
					item.cart_num++;
					getCartNum({
							id: item.id,
							number: item.cart_num
						})
						.then(e => {
							console.log(e);
						})
						.catch(function(e) {
							console.log(e);
						});
					this.calcTotal(item);
				} else {
					return;
				}
			},
			//请求数据
			async loadData() {
				let obj = this;
				getCartList({})
					.then(function(e) {
						console.log(e, '111');
						// 获取当前购物车物品增加数量
						let nub = obj.cartList.length;
						// 获取之前对象数组
						let aArray = obj.cartList.reverse();
						// 获取返回数据对象数组
						let bArray = e.data.valid.reverse();
						obj.cartList = bArray
							.map((item, ind) => {
								// 设置返回数据默认为勾选状态
								item.checked = true;
								// 获取相同数组之前对象的数据
								let carlist = aArray[ind];
								// 判断之前是否已经加载完毕
								if (carlist && carlist.loaded == 'loaded') {
									item.loaded = 'loaded';
								}

								return item;
							})
							.reverse();
						obj.calcTotal(); //计算总价
						obj.show = true;
					})
					.catch(function(e) {
						console.log(e);
					});
			},
			//监听image加载完成
			onImageLoad(key, index) {
				// 修改载入完成后图片class样式
				this.$set(this[key][index], 'loaded', 'loaded');
			},
			//监听image加载失败
			onImageError(key, index) {
				this[key][index].image = '/static/error/errorImage.jpg';
			},
			showPopup() {
				this.$refs.popup.open();
			},
			// 跳转到登录页
			navToLogin() {
				// 保存地址
				saveUrl();
				// 登录拦截
				interceptor();
			},
			//数量
			numberChange(data) {
				let arr = this.cartList[data.index];
				arr.cart_num = data.number;
				getCartNum({
						id: arr.id,
						number: data.number
					})
					.then(e => {
						console.log(e);
					})
					.catch(function(e) {
						console.log(e);
					});
				this.calcTotal();
			},
			//删除
			deleteCartItem(index) {
				const obj = this;
				let list = this.cartList;
				let row = list[index];
				let id = row.id;
				cartDel({
					ids: id
				});
				this.cartList.splice(index, 1);
				uni.hideLoading();
				this.calcTotal();
				if (this.num == 0) {
					obj.$emit('delChoose');
				}
			},
			//清空
			clearCart() {
				const obj = this
				uni.showModal({
					content: '清空购物车？',
					success: e => {
						if (e.confirm) {
							let st = this.cartList.map(e => {
								return e.id;
							});
							cartDel({
								ids: st.join(',')
							}).then(e => {
								obj.$emit('delChoose');
								console.log(e);
							});
							this.cartList = [];
							this.$refs.popup.close();
							(this.total = 0), (this.num = 0);
						}
					}
				});
			},
			//计算总价
			calcTotal() {
				console.log('111111');
				let list = this.cartList;
				let total = 0;
				let num = 0;
				let checked = true;
				list.forEach(item => {
					console.log(item, '123123')
					num += item.cart_num;
					total += item.productInfo.attrInfo.price * item.cart_num;
				});
				this.num = num * 1;
				this.allChecked = checked;
				this.total = Number(total.toFixed(2));
			},
			//创建订单
			createOrder() {
				let list = this.cartList;
				let goodsData = [];
				list.forEach(item => {
					if (item.checked) {
						goodsData.push(item.id);
					}
				});
				this.$emit('createOrder', goodsData)

			}
		}
	};
</script>

<style lang="scss">
	.container {
		padding-bottom: 134rpx;
		background-color: $page-color-base;

		/* 空白页 */
		.empty {
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 100vh;
			padding-bottom: 100rpx;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			background: #fff;

			.emptyImg {
				width: 300rpx;
				height: 250rpx;
				margin-bottom: 30rpx;
			}

			.empty-tips {
				display: flex;
				font-size: $font-sm + 2rpx;
				color: $font-color-disabled;

				.navigator {
					color: $uni-color-primary;
					margin-left: 16rpx;
				}
			}
		}
	}

	.box {
		max-height: 700rpx;
		position: relative;
		background: #ffffff;
		border-radius: 20rpx 20rpx 0rpx 0rpx;

		.top {
			height: 90rpx;
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 30rpx 0 36rpx;

			.top-left {
				display: flex;
				justify-content: flex-start;
				align-items: center;

				.quan {
					width: 24rpx;
					height: 24rpx;
					border: 1px solid #901B21;
					border-radius: 50%;
					position: relative;
					flex-shrink: 0;

					.qzq {
						position: absolute;
						top: 50%;
						left: 50%;
						margin: -8rpx 0 0 -8rpx;
						width: 12rpx;
						height: 12rpx;
						background: #901B21;
						border-radius: 50%;
					}
				}

				.top-font {
					margin-left: 10rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}
			}

			.top-right {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
				display: flex;
				align-items: center;

				image {
					width: 28rpx;
					height: 28rpx;
				}

				.right-clear {
					margin-left: 6rpx;
				}
			}
		}

		.scoroll {
			max-height: 600rpx;
		}
	}

	.db {
		width: 750rpx;
		height: 100rpx;
	}

	/* 购物车列表项 */
	.cart-item {
		position: relative;
		display: flex;
		padding: 18rpx 29rpx 60rpx 30rpx;
		border-top: 1px solid #EEEEEE;

		.image-wrapper {
			width: 160rpx;
			height: 160rpx;
			flex-shrink: 0;
			position: relative;

			image {
				border-radius: 2rpx;
			}
		}

		.checkbox {
			position: absolute;
			left: -16rpx;
			top: -16rpx;
			z-index: 8;
			font-size: 44rpx;
			line-height: 1;
			padding: 4rpx;
			color: $font-color-disabled;
			background: #fff;
			border-radius: 50px;
		}

		.item-right {
			display: flex;
			flex-direction: column;
			flex: 1;
			overflow: hidden;
			position: relative;
			padding-left: 30rpx;

			.title,
			.price {
				font-size: $font-base + 2rpx;
				color: $font-color-dark;
				height: 40rpx;
				line-height: 40rpx;
			}

			.attr {
				font-size: $font-sm + 2rpx;
				color: $font-color-light;
				height: 50rpx;
				line-height: 50rpx;
			}

			.price {
				height: 50rpx;
				line-height: 50rpx;
			}

			.step {
				margin-top: 20rpx;
			}
		}

		.item-num {
			position: absolute;
			bottom: 60rpx;
			right: 30rpx;

			.munbox {
				width: 144rpx;
				height: 44rpx;

				input {
					display: inline-block;
					text-align: center;
				}

				image {
					flex-shrink: 0;
					width: 44rpx;
					height: 44rpx;
				}
			}
		}
	}

	/* 底部栏 */
	.action-section {
		/* #ifdef H5 */
		margin-bottom: 100rpx;
		/* #endif */
		position: fixed;
		bottom: 0;
		z-index: 1000;
		display: flex;
		align-items: center;
		width: 100%;
		height: 100rpx;
		background: #ffffff;

		.total-box {
			width: 490rpx;
			height: 100rpx;
			background: #ecd49e;
			padding-left: 50rpx;
			display: flex;
			align-items: center;

			.bg {
				position: relative;
				width: 56rpx;
				height: 58rpx;

				image {
					width: 100%;
					height: 100%;
				}

				.num {
					position: absolute;
					top: -10rpx;
					right: -10rpx;
					min-width: 30rpx;
					padding: 0 5rpx;
					display: inline-block;
					height: 30rpx;
					background: #f23030;
					border-radius: 50%;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #ffffff;
					text-align: center;
					line-height: 30rpx;
				}
			}

			.total-price {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #901b21;
				margin-left: 30rpx;

				text {
					font-size: 32rpx;
				}
			}
		}

		.confirm-btn {
			border-radius: 0;
			width: 260rpx;
			height: 100rpx;
			background: #901b21;
			text-align: center;
			line-height: 100rpx;
			font-size: 38rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ffffff;
		}
	}

	/* 复选框选中状态 */
	.action-section .checkbox.checked,
	.cart-item .checkbox.checked {
		color: $base-color;
	}
</style>
