<template>
	<view class="content">
		
		<view class="card">
			<view class="cardHeader">
				<block v-if="pIsoPen">
					<view class="partentChecked" @click="pChange(pIsoPen)">
						<span class="status correct"></span>
					</view>
				</block>
				<block v-else>
					<view class="partentCheck" @click="pChange(pIsoPen)"></view>
				</block>
				<image src="../../static/store.png" mode="aspectFill"></image>
				<text>非常戴镜</text>
			</view>
			
			<view class="cardBody">
				<template v-if="childIsOpen.child1">
					<view class="partentChecked" @click="cChange(childIsOpen.child1,'child1')">
						<span class="status correct"></span>
					</view>
				</template>
				<template v-else>
					<view class="partentCheck" @click="cChange(childIsOpen.child1,'child1')"></view>
				</template>
				<view class="goodInfo">
					<view class="imageWrap">
						<image src="../../static/img/detail/d1.png" mode="aspectFill" style="width: 188rpx;height: 168rpx;"></image>
					</view>
					<view class="infoRight">
						<text class="goodName">眼镜名称眼镜名称眼镜名称眼镜名称</text>
						<view class="describ"><text>颜色 玫瑰金 /材质 钛合金 / 功能 防日光 / 配件 免费送 /折射 … </text>
						<view class="icon"></view>
						</view>
						<view class="priceBox">
							<view class="price">￥{{198}}</view>
							<text>(限购{{maxCount}}副)</text>
							<view class="counter">
								<view class="btn" disabled="this.addDisabled" type="default" @click="counter(false)">-</view>
								<text>{{count}}</text>
								<view class="btn" disabled="this.desDisabled" type="default" @click="counter(true)">+</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		<view class="cardBody">
			<!-- <MyCheckbox :isOpenProp="controlCheck.child1"></MyCheckbox> -->
			<template v-if="childIsOpen.child2">
				<view class="partentChecked" @click="cChange(childIsOpen.child2,'child2')">
					<span class="status correct"></span>
				</view>
			</template>
			<template v-else>
				<view class="partentCheck" @click="cChange(childIsOpen.child2,'child2')"></view>
			</template>
			<view class="goodInfo">
				<view class="imageWrap">
					<image src="../../static/img/detail/d1.png" mode="aspectFill" style="width: 188rpx;height: 168rpx;"></image>
				</view>
				<view class="infoRight">
					<text class="goodName">眼镜名称眼镜名称眼镜名称眼镜名称</text>
					<view class="describ"><text>颜色 玫瑰金 /材质 钛合金 / 功能 防日光 / 配件 免费送 /折射 … </text>
					<view class="icon"></view>
					</view>
					<view class="priceBox">
						<view class="price">￥198</view>
						<text>(限购{{maxCount}}副)</text>
						<view class="counter">
							<view class="btn" disabled="this.addDisabled" type="default" @click="counter(false)">-</view>
							<text>{{count}}</text>
							<view class="btn" disabled="this.desDisabled" type="default" @click="counter(true)">+</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		</view>
		
		<view class="footer">
			<view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view>
			<view class="footerRight">
				<navigator url="/pages/myOrderPaying/myOrderPaying" hover-class="navigator-hover">
					<view class="paybtn">立即支付</view>
				</navigator>
			</view>
		</view>
		
	</view>
</template>

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

		data() {
			return {
				totalPrice: 360,
				count:1,
				maxCount:20,
				pIsoPen: false,
				childIsOpen:{
					"child1":true,
					"child2":true
				},
			}
		},
		computed:{
			cartList() {
			  // 也可以从 getters 获取
			    console.log('cart-list', this.$store.state.cart.cartList);
			    return this.$store.state.cart.cartList;
			}
		},
		onLoad: function() {
			store.dispatch('cart/getCartList',{
				uid: 1, //用户id
			});
		},
		methods: {
			counter(isadd){
				if(isadd){
					this.count >= this.maxCount? this.addDisabled = true:this.count++;
				}else{
					this.count <= 1? this.desDisabled = true:this.count--;
				}
			},
			pChange(isopen){
				// console.log(isopen)
				this.pIsoPen=!isopen
				this.childIsOpen.child1=!isopen
				this.childIsOpen.child2=!isopen
			},
			cChange(isopen,child){
				// console.log(child)
				if(child==='child1'){
					this.childIsOpen.child1=!isopen
				}
				if(child==='child2'){
					this.childIsOpen.child2=!isopen
				}
			}
		}
	}
</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;
				width: 5px;
				height: 1px;
				background: #FFFFFF;
				line-height: 0;
				font-size: 0;
				position: relative;
				top: -6px;
				left: 4px;
				-webkit-transform: rotate(45deg);
			}
			.correct:after {
				content: '/';
				display: block;
				width: 8px;
				height: 1px;
				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;
			.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{
							font-size: 28rpx;
							color: #333333;
						}
						.describ{
							width: 100%;
							height: 80rpx;
							box-sizing: border-box;
							padding: 10rpx;
							font-size: 20rpx;
							color: #999999;
							background: #F2F2F2;
							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>