<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="pChange(pIsoPen)">
						<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="item.cart_id" 
				@longpress="delCart(item.cart_id,index)">
					<view v-bind:class="childIsOpen[index]? 'partentChecked':'partentCheck'" 
					@click="Change(childIsOpen[index],index)">
						<span class="correct"></span>
					</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.pid,item.p_root_index)">{{item.p_name}}</view>
							<view class="describ" @tap="toshop(item.pid,item.p_root_index)">
								<text>
									<block v-for="tag in item.tag.prod_tag_fun" :key="tag.value">
										{{tag.label+`&nbsp;&nbsp;`}}
									</block>
								</text>
							<view class="icon"></view>
							</view>
							<view class="priceBox">
								<view class="price">￥{{item.nowPrice*item.num}}</view>
								<text>(限购{{maxCount}}副)</text>
								<view class="counter">
									<view class="btn" disabled="this.addDisabled" type="default" 
									@click="counter(index,false,item.mp_id,item.sk_id,item.num,item.cart_id)">-</view>
									<text>{{item.num}}</text>
									<view class="btn" disabled="this.desDisabled" type="default" 
									@click="counter(index,true,item.mp_id,item.sk_id,item.num,item.cart_id)">+</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</block>
		<view class="footer">
			<view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view>
			<view class="footerRight">
				<navigator url="/pages/confirmOrder/confirmOrder" hover-class="navigator-hover">
					<view class="paybtn" >立即结算</view>
				</navigator>
			</view>
		</view>
		
	</view>
</template>

<script>
	import store from '@/store';
	
	export default {

		data() {
			return {
				totalPrice: 0,
				pIsoPen:false,
				// childIsOpen:[],
				maxCount:20,
			}
		},
		computed:{

			cartList() {
			    // console.log('cart-list', this.$store.state.cart.cartList);
			    return this.$store.state.cart.cartList;
			},
			childIsOpen(){
				let temp=[];
				temp.length=this.$store.state.cart.cartList.length;
				for (let i = 0; i < temp.length; i++) {
					temp[i]= false
				}
				console.log('this.childisOPne===>',temp)
				return temp
			}
		},
		onLoad: function() {
			// 判断是否授权
			// uni.getSetting({
			// 	success(res) {
			// 		console.log('authSetting',res.authSetting)
			// 		if(res.authSetting['scope.userInfo'] !== true) {
						
			// 			uni.switchTab({
			// 				url:'/pages/user/user'
			// 			})
			// 		}else {
			// 		}
			// 	}
			// })

			// console.log('usr-my',this.$store.state.user.userInfo)
			// store.dispatch('cart/addCart',{
			// 	"num":1,
			// 	"pid": 7,//产品id
			// 	"uid":1,
			// 	"sk_id": 72,
			// 	"price": 120,
			// 	"mp_id":1,
			// 	"checkedSKU":{
			// 		 "discount": "45",
			// 		 "in_price": "6000",
			// 		 "kc": "0",
			// 		 "model_pic": null,
			// 		 "out_price": 191.8,
			// 		 "pic": "https://glass.xiuyetang.com//upload_jk/7/7_22AE0C.jpg",
			// 		 "pid": "7",
			// 		 "real_price": 99,
			// 		 "sk_id": "89",
			// 		 "sku_name": "1.56非球面防蓝光_黑",
			// 		 "sku_shop_value": "",
			// 		 "sku_value": "58_61",
			// 		 "status": "1",
			// 	},	
			// });
			store.dispatch('cart/getCartList',{
				uid: 1, //用户id
			});
		},

		methods: {
			// 跳转到对应的选购页面
			toshop(id,type){
				console.log('===',id,type)
				switch(type){
					case 1:
						uni.navigateTo({
							url:  `../detailsChoiceArgs/detailsChoiceArgs?oderId=`+id+`&goodType=`+type,
							success: res => {},
							fail: () => {},
							complete: () => {}
						});
					break;
					case 2:
						uni.navigateTo({
							url: `../detailStandard/detailStandard_k?oderId=`+id+`&goodType=`+type,
							success: res => {},
							fail: () => {},
							complete: () => {}
						});
					break;
					case 3||4:
						uni.navigateTo({
							url: `../detailStandard/detailStandard_sun?oderId=`+id+`&goodType=`+type,
							success: res => {},
							fail: () => {},
							complete: () => {}
						});
					break;
					// case 4:
					// 	uni.navigateTo({
					// 		url: `../detailStandard/detailStandard_sun?oderId=`+id+`&goodType=`+type,
					// 		success: res => {},
					// 		fail: () => {},
					// 		complete: () => {}
					// 	});
					case 5:
						uni.navigateTo({
							url: `../purchaseLenses/purchaseLenses?oderId=`+id+`&goodType=`+type,
							success: res => {},
							fail: () => {},
							complete: () => {}
						});
					break;
					default :
						break
				}
			},
			toGoods(id,type){
					uni.navigateTo({
						url: `../frameDetail/frameDetail?oderId=`+id,
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
					console.log('toGoods =====> id:'+id +"======>type:"+type)
					switch(type){
						case 1:
							uni.navigateTo({
								url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,
								success: res => {},
								fail: () => {},
								complete: () => {}
							});
						break;
						case 2:
							uni.navigateTo({
								url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,
								success: res => {},
								fail: () => {},
								complete: () => {}
							});
						break;
						case 3:
							uni.navigateTo({
								url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,
								success: res => {},
								fail: () => {},
								complete: () => {}
							});
						break;
						case 4:
							uni.navigateTo({
								url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,
								success: res => {},
								fail: () => {},
								complete: () => {}
							});
						break;
						default :
							break
					}
				},
			
			counter(index,isadd,mp_id,sk_id,num,cart_id){
				// console.log('===>>counter ===>num',num)
				// console.log('===>>counter ===>isadd',isadd)
				num=parseInt(num);
				if(isadd){
					if(num>=this.maxCount){
						this.addDisabled = true
					} else{
						this.addDisabled= true
						// 修改num
						store.dispatch('cart/modiCart',{
							uid: 1,
							// openid: '',
							mp_id: mp_id,
							sk_id: sk_id,
							cart_id:cart_id,
							num:num+1,
							args:{
								index:index,
								isadd:isadd,
							}
						})
						this.addDisabled= false
					}
				}else{
					if(num<=1){
						this.desDisabled = true
					} else{
						this.desDisabled = false
						// post 请求修改相关参数
						store.dispatch('cart/modiCart',{
							uid: 1,
							// openid: '',
							mp_id: mp_id,
							sk_id: sk_id,
							cart_id:cart_id,
							num:num-1,
							args:{
								index:index,
								isadd:isadd,
							}
						})
						this.desDisabled = true
					}
				}
			},

			Change(isopen,indexC){
				// console.log('lalla===>',isopen)
				this.childIsOpen[indexC]=!isopen
				if(!isopen){
					this.totalPrice=this.totalPrice+(this.$store.state.cart.cartList[indexC].num*this.$store.state.cart.cartList[indexC].nowPrice)
				}else{
					this.totalPrice=this.totalPrice-(this.$store.state.cart.cartList[indexC].num*this.$store.state.cart.cartList[indexC].nowPrice)
				}
				let m=true;
				for (let i = 0; i < this.childIsOpen.length; i++) {
					m=m&this.childIsOpen[i]
				}
				if(m==1){
					this.pIsoPen=true
				} else{
					this.pIsoPen=false
				}
			},
			pChange(isopen){
				this.pIsoPen=!isopen
				for (let i = 0; i < this.childIsOpen.length; i++) {
					this.childIsOpen[i]=!isopen
				}
				if(this.pIsoPen){
					// 计算总价逻辑
					if(this.childIsOpen.length!=0){
						for (let i = 0; i < this.childIsOpen.length; i++) {
							if(this.childIsOpen[i]){
								this.totalPrice= this.totalPrice+(this.$store.state.cart.cartList[i].num*this.$store.state.cart.cartList[i].nowPrice)
							}
						}
					} 
				} else{
					this.totalPrice=0
				}
			
			},
			delCart(cart_id,index){
				// console.log('userInfo',this.$store.state.user.userInfo)
				cart_id=parseInt(cart_id)
				// console.log('delcart------>cart_id',cart_id)
				// console.log('cartlist====>delcart',this.$store.state.cart.cartList)
				// console.log('delcart======>index',index)
				uni.showModal({
					title: "是否删除该商品",
					// content: '是否删除该商品',
					success: function (res) {
						if (res.confirm) {
							// this.$store.state.cart.cartList.splice(index,1)
							store.dispatch('cart/delCart',{
								uid: 1, //用户id
								openid: "",
								cart_id: cart_id, // 要修改的购物车id
								arg:index, // 由于action 传参是能接收两参数，因此将index放入对象
							});
							console.log('用户点击确定');
						} 
					}
				});

			}
		}
	}
</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: 18px;
			border: 1px solid #CFCFCF;
			background-color: #FFFFFF;
		}
		.partentChecked{
			width: 18px;
			height: 18px;
			border-radius: 18px;
			background-color: #FF6B4A;
			.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;
			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;
				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%;
				height: 300rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.goodInfo{
					width: 95%;
					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;
						height: 240rpx;
						.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%;
							height: 80rpx;
							box-sizing: border-box;
							padding: 10rpx;
							font-size: 20rpx;
							letter-spacing: -0.23px;
							text-align: justify;
							color: #999999;
							background: #F9F9F9;
							display: flex;
							justify-content: center;
							align-items: center;
							text{
								 text-overflow: -o-ellipsis-lastline;
								  overflow: hidden;
								  text-overflow: ellipsis;
								  display: -webkit-box;
								  -webkit-line-clamp: 2;
								  line-clamp: 2;
								  -webkit-box-orient: vertical;
							}
							// .icon{
							// 	transform: rotate(90deg);
							// 	height: 13px;
							// 	width: 20px;

							// }
							.icon{
							width: 0;
							height: 0;
							border-left: 5px transparent;
							border-right: 5px transparent;
							border-top: 5px #979797;
							border-bottom: 0 transparent;
							border-style: solid;
							position: relative;
							margin-left: 10px;
							// transform: scaleY(-1);
							}
							.icon::after{
							    content: '';
							    position: absolute;
							    top: -6.5px;
							    left: -5px;
								border-left: 5px transparent;
								border-right: 5px transparent;
								border-top: 5px #FFFFFF;
								border-bottom: 0 transparent;
								border-style: solid;
							}
						}
						.priceBox{
							display: flex;
							justify-content: space-between;
							align-items: center;
							// margin-top: 26px;
							width: 100%;
							font-size: 14px;
							color: #999999;
							.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: 0px;
			height: 112rpx;
			width: 100%;
			background-color: #FFFFFF;
			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;
				}
			}
				
		}
	}
	
	
	
</style>
