<template>
	<view class="content">
		<block v-if="cartList.length==0">

		</block>
		<block v-else>
			<view class="card">
				<view class="cardHeader">
					<view v-bind:class="pIsoPen? 'partentChecked' : 'partentCheck'" @click="pClick">
						<span class="correct"></span>
					</view>
					<image src="../../static/store.png" mode="aspectFill"></image>
					<text>非常戴镜</text>
				</view>
				<view class="cardBody" v-for="(item,index) in cartList" :key="index"
					@longpress="delCart(item.cart_id,index)">
					<view v-bind:class="cartList[index].isChecked? 'partentChecked':'partentCheck'"
						@click="childClick(cartList[index],index)">
						<span class="correct"></span>
					</view>
					<view class="imageWrap">
						<image :src="item.img" mode="aspectFit" style="width: 188rpx;height: 168rpx;"></image>
					</view>
					<view class="goodInfo">
						<!-- <view class="imageWrap">
              <image :src="item.img_index_url" mode="aspectFit" style="width: 188rpx;height: 168rpx;"></image>
            </view> -->
						<view class="infoRight">
							<view class="goodName" @tap="toGoods(item.shop_wood_id, item.wsp_id)">{{item.wsp_sku_name}}</view>
							<view class="describ"
								@click="showBottom(3, item.shop_wood_id, item.wsp_id, item.mp_id, item.cart_id, index)">
								<view class="desL">
									<view class="people">
										使用人：{{item.peopleName}}
									</view>
									<view class="skuInfo">
										{{item.wsp_sku_name}}
									</view>
								</view>
								<view class="desR">
									<image src="../../static/right.png" mode="aspectFit"
										style="width: 18rpx;height: 18rpx;"></image>
								</view>
							</view>
							<view class="priceBox">
								<view class="price">￥{{item.price*item.num}}</view>
								<text class="maxCount">(限购{{maxCount}}副)</text>
								<view class="counter">
									<view class="btn" disabled="this.addDisabled" type="default"
										@tap="counter(index,false,item)">-</view>
									<text>{{item.num}}</text>
									<view class="btn" disabled="this.desDisabled" type="default"
										@tap="counter(index,true,item)">+</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</block>
		<view class="footer">
			<view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view>
			<view class="footerRight">
				<view class="paybtn" @click="toComfirmOrder">立即结算</view>
			</view>
		</view>
		<BottomSheet v-if="isShowBottom" :isCart="isCart" @addCart="addCart" :wsp_id="wsp_id" :propMpId="mp_id"
			@chooseCartModi="chooseCartModi" :cart_id="cart_id" :index="cartIndex" :pid="pid" :goodInfo="goodInfo"
			:isShowBottom="isShowBottom" @closeBottom="closeBottom"></BottomSheet>
	</view>
</template>

<script>
	import store from '@/store'
	import BottomSheet from '../../components/BottomSheet/BottomSheet.vue'
	export default {
		components: {
			BottomSheet,
		},
		data() {
			return {
				pid: Number,
				isCart: Number,
				wsp_id: String,
				mp_id: String,
				isShowBottom: false, // 底部弹窗开关
				cart_id: Number,
				maxCount: 20,
				cartIndex: Number,
				cartList: [],
			}
		},
		computed: {
			pIsoPen() {
				if (this.cartList.length > 0) {
					const temp = !this.cartList.find(item => !item.isChecked)
					// console.log('temptemp', temp)
					return temp
				}
				return false
			},
			goodInfo() {
				return this.$store.state.read.goodInfo
			},
			totalPrice() {
				let totalPrice = 0
				this.cartList.forEach((item) => {
					if (item.isChecked) {
						totalPrice += item.price * item.num
					}
				})
				return totalPrice
			},
		},
		onShow: async function() {
			await this.$store.dispatch('cart/getCartList', {
				uid: this.$store.state.user.userInfo.uid, // 用户id
			})

			this.cartList = this.$store.state.cart.cartList
			this.cartList.forEach((item) => {
				item.isChecked = false
			})
		},
		// onLoad: async function() {
		// },
		methods: {
			// 全选按钮
			pClick() {
				const pStatus = !this.cartList.find(item => !item.isChecked)
				const oldList = this.cartList
				oldList.forEach((item, index) => {
					item.isChecked = !pStatus
					this.cartList.splice(index, 1, item)
				})
			},
			// 单选按钮
			childClick(type, index) {
				this.cartList[index].isChecked = !this.cartList[index].isChecked
				// vue没有办法监听数组内部值的变化，所以需要通过这个方法去触发
				this.cartList.splice(index, 1, this.cartList[index])
			},
			// 修改购物车
			chooseCartModi(mp_id, wsp_id, price, pid, num, cart_id, index) {
				// console.log('modi',mp_id,wsp_id,price,pid,num,cart_id)
				store.dispatch('cart/modiCart', {
					uid: this.$store.state.user.userInfo.uid,
					openid: this.$store.state.user.userInfo.openid,
					mp_id: mp_id,
					wsp_id: wsp_id,
					price: price,
					pid: pid,
					num: num,
					cart_id: cart_id,
					args: {
						index: index,
					},
				})
				this.$nextTick(function() {
					store.dispatch('cart/getCartList', {
						uid: this.$store.state.user.userInfo.uid, // 用户id
					}).then(() => {
						this.cartList = this.$store.state.cart.cartList
					})
				})
			},
			// 底部弹窗开关
			showBottom(isCart, pid, skId, mp_id, cart_id, index) {
				store.dispatch('read/fetch', {
					// shop_wood_id:pid,
					shop_wood_id:681,
					wsp_id: skId,
				}).then(() => {
					this.cartIndex = index
					this.wsp_id = skId
					this.shop_wood_id = pid
					this.mp_id = mp_id
					this.isCart = isCart
					this.cart_id = cart_id
					this.isShowBottom = true
				})
			},
			closeBottom() {
				this.isShowBottom = false
			},
			toGoods(id, skId) {
				uni.navigateTo({
					url: '../details/details?pid=' + id + '&wsp_id=' + skId,
					success: res => {},
					fail: () => {},
					complete: () => {},
				})
			},

			toComfirmOrder() {
				this.$store.state.cart.checkedCartLst = this.cartList.filter(item => item.isChecked)
				if (this.$store.state.cart.checkedCartLst.length > 0) {
					uni.navigateTo({
						url: '../confirmOrder/confirmOrder?isCart=true',
					})
				} else {
					uni.showToast({
						title: '您还没有选择宝贝哦~',
						icon: 'none',
					})
				}
			},
			counter(index, isadd, item) {
				// console.log('item=====>', item)
				// console.log('num=====>', item.num)
				const nums = parseInt(item.num)
				if (isadd) {
					if (nums >= this.maxCount) {
						this.addDisabled = true
					} else {
						this.addDisabled = true
						store.dispatch('cart/modiCart', {
							uid: this.$store.state.user.userInfo.uid,
							openid: this.$store.state.user.userInfo.openid,
							mp_id: item.mp_id,
							wsp_id: item.wsp_id,
							price: item.price,
							pid: item.shop_wood_id,
							num: nums + 1,
							cart_id: item.cart_id,
							args: {
								index: index,
								isadd: isadd,
							},
						})
						this.addDisabled = false
					}
				} else {
					if (nums <= 1) {
						this.desDisabled = true
					} else {
						this.desDisabled = false

						store.dispatch('cart/modiCart', {
							uid: this.$store.state.user.userInfo.uid,
							openid: this.$store.state.user.userInfo.openid,
							mp_id: item.mp_id,
							wsp_id: item.wsp_id,
							price: item.price,
							pid: item.shop_wood_id,
							num: nums - 1,
							cart_id: item.cart_id,
							args: {
								index: index,
								isadd: isadd,
							},
						})
						this.desDisabled = true
					}
				}
			},
			delCart(cart_id, index) {
				cart_id = parseInt(cart_id)
				uni.showModal({
					title: '是否删除该商品',
					success: function(res) {
						if (res.confirm) {
							store.dispatch('cart/delCart', {
								uid: this.$store.state.user.userInfo.uid,
								openid: this.$store.state.user.userInfo.openid,
								cart_id: cart_id, // 要修改的购物车id
								arg: index, // 由于action 传参是能接收两参数，因此将index放入对象
							})
						}
					}.bind(this),
				})
				// this.cartList.splice(index,1)
			},
		},
	}
</script>

<style lang="scss">
	.content {
		min-height: 100vh;
		background-color: #f2f2f2;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 40rpx;
		box-sizing: border-box;

		.partentCheck {
			width: 16px;
			height: 16px;
			border-radius: 22px;
			border: 1px solid #cfcfcf;
			background-color: #ffffff;
			margin: 24rpx 12rpx 24rpx 24rpx;
		}

		.partentChecked {
			width: 18px;
			height: 18px;
			border-radius: 22px;
			background-color: #ff6b4a;
			margin: 24rpx 12rpx 24rpx 24rpx;

			.correct {
				display: inline-block;
				position: relative;
				width: 10rpx;
				height: 2rpx;
				background: #ffffff;
				line-height: 0;
				font-size: 0;
				position: relative;
				top: -7px;
				left: 4px;
				-webkit-transform: rotate(45deg);
			}

			.correct:after {
				content: "/";
				display: block;
				width: 16rpx;
				height: 2rpx;
				background: #ffffff;
				-webkit-transform: rotate(-90deg) translateY(50%) translateX(50%);
			}
		}

		.card {
			background-color: #ffffff;
			border-radius: 16rpx;
			// border:1px #000 solid;
			box-sizing: border-box;
			padding: 36rpx 36rpx 36rpx 18rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 180rpx;

			.cardHeader {
				width: 100%;
				height: 36rpx;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				margin-bottom: 20rpx;

				image {
					height: 32rpx;
					width: 32rpx;
					padding-left: 6px;
					padding-right: 10px;
				}

				text {
					// font-family: PingFangSC-Regular;
					font-size: 14px;
					color: #333333;
					letter-spacing: -0.26px;
				}
			}

			.cardBody {
				width: 100%;
				// border:1px #000 solid;
				min-height: 300rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.goodInfo {
					width: 390rpx;
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					padding-left: 6px;

					.imageWrap {
						height: 188rpx;
						width: 188rpx;
						margin-right: 28rpx;

						image {
							border-radius: 4px;
							height: 188rpx;
							width: 188rpx;
						}
					}

					.infoRight {
						display: flex;
						flex-direction: column;
						align-items: flex-start;
						justify-content: space-between;
						min-height: 240rpx;
						width: 100%;

						.goodName {
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							text-align: justify;
							overflow: hidden;
							font-size: 28rpx;
							color: #333333;
						}

						.describ {
							width: 100%;
							min-height: 80rpx;
							background: #f9f9f9;
							border-radius: 2px;
							box-sizing: border-box;
							padding: 10rpx;
							font-size: 20rpx;
							letter-spacing: -0.23px;
							color: #999999;
							display: flex;
							justify-content: space-between;
							align-items: center;

							.desL {
								view {
									margin: 10rpx 0 10rpx 0;
								}
							}
						}

						.priceBox {
							display: flex;
							justify-content: space-between;
							align-items: center;
							// margin-top: 26px;
							width: 100%;
							font-size: 14px;
							color: #999999;

							.maxCount {
								color: #999999;
								font-size: 20rpx;
							}

							.price {
								color: #ff6b4a;
								font-size: 28rpx;
							}

							.counter {
								display: flex;
								flex-direction: row;
								justify-content: space-between;
								align-items: center;
								font-size: 28rpx;
								color: #333333;
								width: 122rpx;

								.btn {
									display: flex;
									justify-content: center;
									line-height: 32rpx;
									height: 32rpx;
									width: 32rpx;
									background-color: #f2f2f2;
									color: #cfcfcf;
								}
							}
						}
					}
				}
			}
		}

		.footer {
			position: fixed;
			left: 0;
			bottom: 90rpx;
			height: 112rpx;
			width: 100%;
			// border:1px #000 solid;
			background-color: #FFF;
			font-size: 16px;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.footerLeft {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 50%;
				color: #333333;

				text {
					color: #ff6b4a;
				}
			}

			.footerRight {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				width: 50%;
				margin-right: 26rpx;

				.paybtn {
					display: flex;
					justify-content: center;
					align-items: center;
					background: #ff6b4a;
					border-radius: 20px;
					border-radius: 20px;
					color: #ffffff;
					width: 204rpx;
					height: 80rpx;
				}
			}
		}
	}

	/* 隐藏滚动条 */
	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}
</style>