<template>
	<view class="content">
		<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>
				<text class="remarks">支持7天无理由退货 顺丰发货</text>
				<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 class="choose">
			<view class="chooseItem_1 chooseItem">
				<UniCollapse  @change="change(1)" >
					<UniCollapseItem open=true title="款式挑选" showAnimation=false>
						<view class="chooseRes" v-show="!showChooseRes1">* {{chooseRes1}}</view>
						<view class="chooseItem_1_content">
							<view class="itemsWrap">
								<view class="item1" 
								v-for="(item,index) in chooseItem1" 
								:key="index" 
								:style="item.style"
								:class="{ active1: current1 === index }"
								@click="onClickItem1(index)"
								></view>
							</view>
						</view>
					</UniCollapseItem>
				</UniCollapse>
				<view class="chooseRes" v-show="showChooseRes1">* {{chooseRes1}}</view>
			</view>
			<view class="chooseItem_2 chooseItem ">
				<UniCollapse  @change="change(2)" >
					<UniCollapseItem open=true title="直径" showAnimation=false>
						<!-- <view class="chooseRes" v-show="!showChooseRes2">* {{chooseRes2}}</view> -->
						<view class="chooseItem_1_content">
							<view class="itemsWrap">
								<view class="item2"
								v-for="(item,index) in chooseItem2" 
								:key="index" 
								:class="{ active2: current2 === index }"
								@click="onClickItem2(index)"
								>{{item.num}}</view>
							</view>
						</view>
					</UniCollapseItem>
				</UniCollapse>
				<view class="chooseRes" v-show="showChooseRes2">* {{chooseRes2}}</view>
			</view>
			<view class="chooseItem_3 chooseItem">
				<UniCollapse  @change="change(3)" >
					<UniCollapseItem open=true title="度数" showAnimation=false>
						<!-- <view class="chooseRes" v-show="!showChooseRes3">* {{chooseRes3}}</view> -->
						<view class="chooseItem_1_content">
							<view class="itemsWrap">
								<view class="item2"
								v-for="(item,index) in chooseItem3" 
								:key="index" 
								:class="{ active2: current3 === index }"
								@click="onClickItem3(index)"
								>{{item}}</view>
							</view>
						</view>
					</UniCollapseItem>
				</UniCollapse>
				<view class="chooseRes" v-show="showChooseRes3">* {{chooseRes3}}</view>
			</view>
		</view>
		<view class="button" @click="toComfirmOrder">
			立即结算
		</view>
	</view>
</template>

<script>
	import UniCollapse from '@/components/UniCollapse/UniCollapse.vue'
	import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue'
	export default {
		components: {UniCollapse,UniCollapseItem},
		data() {
			return {
				count:1,
				maxCount:20,
				addDisabled:false,
				desDisabled:false,
				current1:0,
				current2:0,
				current3:0,
				showChooseRes1:false,
				showChooseRes2:false,
				showChooseRes3:false,
				chooseRes1:'Miss 黑二代【减龄自然】',
				chooseRes2:'14.0',
				chooseRes3:0,
				chooseItem1:[
					{style:"opacity: 0.7;background-image: radial-gradient(50% 148%, #ECEAEA 50%, #8D8C8C 100%);",describ:"Miss 黑1代【减龄自然】"},				
					{style:"background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);",describ:"Miss 黑二代【防紫外线】"},			
					{style:"background-image: radial-gradient(50% 148%, #FDF8F6 50%, #94380B 100%);",describ:"Miss 黑3代【防紫外线】"},			
					{style:"background-image: radial-gradient(50% 148%, #FFFFFF 50%, #324A05 100%);",describ:"Miss 黑4代【防紫外线】"},			
					{style:"background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);",describ:"Miss 黑5代【防紫外线】"},			
					{style:"opacity: 0.7;background-image: radial-gradient(50% 150%, #F0EEE7 50%, #6F0838 100%);",describ:"Miss 黑6代【防紫外线】"},			
					{style:"background-image: radial-gradient(50% 143%, #AEA8A8 45%, #370B4E 100%);",describ:"Miss 黑7代【防紫外线】"},		
					{style:"background-image: radial-gradient(50% 148%, #FFFFFF 50%, #324A05 100%);",describ:"Miss 黑4代【防紫外线】"},			
					{style:"background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);",describ:"Miss 黑5代【防紫外线】"},			
					{style:"opacity: 0.7;background-image: radial-gradient(50% 150%, #F0EEE7 50%, #6F0838 100%);",describ:"Miss 黑6代【防紫外线】"},			
					{style:"background-image: radial-gradient(50% 143%, #AEA8A8 45%, #370B4E 100%);",describ:"Miss 黑7代【防紫外线】"},		
					{style:"background-image: radial-gradient(50% 148%, #FFFFFF 50%, #324A05 100%);",describ:"Miss 黑4代【防紫外线】"},			
					{style:"background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);",describ:"Miss 黑5代【防紫外线】"},			
					{style:"opacity: 0.7;background-image: radial-gradient(50% 150%, #F0EEE7 50%, #6F0838 100%);",describ:"Miss 黑6代【防紫外线】"},			
					{style:"background-image: radial-gradient(50% 143%, #AEA8A8 45%, #370B4E 100%);",describ:"Miss 黑7代【防紫外线】"},
				],
				chooseItem2:[
					{num:"14.0"},
					{num:"14.2"},
					{num:"14.4"},
					{num:"14.5"},
				],
				chooseItem3:[0,100,125,150,175,200,225,250,275,300,325,350,375,400,425,450,470,500,525,550,575,600,1000]
			};
		},
		methods:{
			change(num){
				switch (num){
					case 1:
						if(this.showChooseRes1===true){
							this.showChooseRes1 = false
						}else{
							this.showChooseRes1 = true
						}
						break;
					case 2:
						if(this.showChooseRes2===true){
							this.showChooseRes2 = false
						}else{
							this.showChooseRes2 = true
						}
						break;
					case 3:
						if(this.showChooseRes3===true){
							this.showChooseRes3 = false
						}else{
							this.showChooseRes3 = true
						}
						break;	
					default:
						break;
				}
			},
			onClickItem1(index) {
			  if (this.current1 !== index) {
				this.current1 = index;
				this.chooseRes1 =this.chooseItem1[index].describ
			  }
			},
			onClickItem2(index) {
			  if (this.current2 !== index) {
				this.current2 = index;
				this.chooseRes2 =this.chooseItem2[index].num
			  }
			},
			onClickItem3(index) {
			  if (this.current3 !== index) {
				this.current3 = index;
				this.chooseRes3 =this.chooseItem3[index]
			  }
			},
			counter(isadd){
				if(isadd){
					this.count >= this.maxCount? this.addDisabled = true:this.count++;
				}else{
					this.count <= 1? this.desDisabled = true:this.count--;
				}
			},
			toComfirmOrder(){
				uni.navigateTo({
					url:'../confirmOrder/confirmOrder'
				})
			}
		}
	}
</script>

<style lang="scss">
	.content{
		min-height: 100vh;
		background-color: #F2F2F2;
		// padding-top: 20rpx;
		.goodInfo{
			width: 100%;
			height: 272rpx;
			border-radius: 16rpx;
			background-color: #FFFFFF;
			box-sizing: border-box;
			padding: 36rpx;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			.imageWrap{
				height: 188rpx;
				width: 188rpx;
					margin-right: 28rpx;
				image{
					height: 188rpx;
					width: 188rpx;
				}
			}
			.infoRight{
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: space-between;
				.goodName{
					font-size: 28rpx;
					color: #333333;
				}
				.remarks{
					font-size: 20rpx;
					color: #999999;
				}
				.priceBox{
					display: flex;
					justify-content: space-between;
					align-items: center;
					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;
						}
					}
				}
			}
		}
		.choose{
			width: 100%;
			background: #FFFFFF;
			border-radius: 12rpx;
			margin-top: 20rpx;
			padding: 40rpx 40rpx 112rpx 40rpx;
			box-sizing: border-box;
			.chooseItem{
				width: 100%;
				padding-bottom: 32rpx;
				border-bottom: 1px solid #E9E9E9;
				margin-bottom: 28rpx;
			}
			.chooseRes{
				font-size: 12px;
				color: #666666;
			}
			.itemsWrap{
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				justify-content: flex-start;
				align-items: center;
				padding-top: 24rpx;
				.item1{
					width: 64rpx;
					height: 64rpx;
					border-radius: 32rpx;
					margin: 0 36rpx 24rpx 0;
					transition: all 0.3s;
					border: 1px solid #FFFFFF;
				}
				.item2{
					width: 100rpx;
					height: 60rpx;
					margin: 0 20rpx 20rpx 0;
					transition: all 0.3s;
					background: #F2F2F2;
					border-radius: 2px;
					border-radius: 2px;
					line-height: 60rpx;
					text-align: center;
					color: #666666;
					font-size: 12px;
				}
				.active1{
					opacity: 0.7;
					border: 1px solid #FF6B4A;
				}
				.active2{
					background: rgba(255,107,74,0.15);
					color: #FF6B4A;
				}
			}
		}
		.button{
			width: 100%;
			height: 112rpx;
			background-color: #FF6B4A;
			font-size: 16px;
			color: #FFFFFF;
			line-height: 112rpx;
			text-align: center;
			position: fixed;
			bottom: 0;
			left: 0;
		}
	}
	
</style>