<template>
	<view class="content">
		<view class="goods-info">
			<image src="../../static/myorder-paying-pic.png"></image>
			<view class="box-right">
				<text class="p1">镜片名称型号功能镜片名称型镜片名称型号功能非球面…</text>
				<text class="p2">支持7天无理由退货  顺丰发货</text>
				<view class="priceBox">
					<view class="price">￥{{price*count}}</view>
					<view class="counter">
						<view class="btn" disabled="this.disabled" @click="counter(false)">-</view>
						<text>{{count}}</text>
						<view class="btn" @click="counter(true)">+</view>
					</view>
				</view>
			</view>
		</view>
		<view class="goods-data">
			<view class="opCollapse">
				<view class="head">
					<view v-if="!opIsOpen">填写验光数据</view>
					<view v-else></view>
					<view class="headRighted" v-if="opIsOpen" @click="myCollapseChange(opIsOpen)"></view>
					<view class="headRight" v-else @click="myCollapseChange(opIsOpen)" ></view> 
				</view>
				<view class="body">
					<template v-if="opIsOpen">
						
						<view class="goods-form">
						    <text class="p1">填写验光数据</text>
						    <text class="p2">没有验光数据？请到线下眼镜店验光哦～</text>
						    <view class="picker" >
						        <view class="picker-choice">
						                    <view class="choice-left">
						                        <text class="p11">{{pickerInfoList[0].nameC}}</text>
						                        <text class="p12">{{pickerInfoList[0].nameE}}</text>
						                    </view>
						                    <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
						                    <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text>
						                    <picker @change="bindPickerChange01" :value="pickerInfoList[0].nameIndex1" :range="pickerInfoList[0].nameArray1">
						                        <image src="../../static/detail-tabicon.png" ></image>
						                    </picker>
						                    <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
						                    <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text>
						                    <picker @change="bindPickerChange02" :value="pickerInfoList[0].nameIndex2" :range="pickerInfoList[0].nameArray2">
						                        <image src="../../static/detail-tabicon.png" ></image>
						                    </picker>
						        </view>
						    </view>
						    <view class="picker" >
						        <view class="picker-choice">
						                    <view class="choice-left">
						                        <text class="p11">{{pickerInfoList[1].nameC}}</text>
						                        <text class="p12">{{pickerInfoList[1].nameE}}</text>
						                    </view>
						                    <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
						                    <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text>
						                    <picker @change="bindPickerChange11" :value="pickerInfoList[1].nameIndex1" :range="pickerInfoList[1].nameArray1">
						                        <image src="../../static/detail-tabicon.png" ></image>
						                    </picker>
						                    <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
						                    <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text>
						                    <picker @change="bindPickerChange12" :value="pickerInfoList[1].nameIndex2" :range="pickerInfoList[1].nameArray2">
						                        <image src="../../static/detail-tabicon.png" ></image>
						                    </picker>
						        </view>
						    </view>
						    <view class="picker" >
						        <view class="picker-choice">
						                    <view class="choice-left">
						                        <text class="p11">{{pickerInfoList[2].nameC}}</text>
						                        <text class="p12">{{pickerInfoList[2].nameE}}</text>
						                    </view>
						                    <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
						                    <text class="p14">{{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}</text>
						                    <picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1">
						                        <image src="../../static/detail-tabicon.png" ></image>
						                    </picker>
						                    <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
						                    <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text>
						                    <picker @change="bindPickerChange22" :value="pickerInfoList[2].nameIndex2" :range="pickerInfoList[2].nameArray2">
						                        <image src="../../static/detail-tabicon.png" ></image>
						                    </picker>
						        </view>
						    </view>
						    <view class="picker" >
						        <view class="picker-choice">
						                    <view class="choice-left">
						                        <text class="p11">{{pickerInfoList[3].nameC}}</text>
						                        <text class="p12">{{pickerInfoList[3].nameE}}</text>
						                    </view>
						                    <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
						                    <text class="p14">{{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}</text>
						                    <picker @change="bindPickerChange31" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1">
						                        <image src="../../static/detail-tabicon.png" ></image>
						                    </picker>
						                    <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
						                    <text class="p14">{{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}</text>
						                    <picker @change="bindPickerChange32" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2">
						                        <image src="../../static/detail-tabicon.png" ></image>
						                    </picker>
						        </view>
						    </view>
						    <view class="picker" >
						        <view class="picker-choice">
						                    <view class="choice-left">
						                        <text class="p11">{{pickerInfoList[4].nameC}}</text>
						                    </view>
						                    <text class="p13-date">年&nbsp;&nbsp;&nbsp;(Y)</text>
						                    <text class="p14" style="width: 34px;">{{pickerInfoList[4].nameArray1[pickerInfoList[4].nameIndex1]}}</text>
						                    <picker @change="bindPickerChange41" :value="pickerInfoList[4].nameIndex1" :range="pickerInfoList[4].nameArray1">
						                        <image src="../../static/detail-tabicon.png" ></image>
						                    </picker>
						                    <text class="p13-date">月&nbsp;&nbsp;&nbsp;(M)</text>
						                    <text class="p14" style="width: 30px;">{{pickerInfoList[4].nameArray2[pickerInfoList[4].nameIndex2]}}</text>
						                    <picker @change="bindPickerChange42" :value="pickerInfoList[4].nameIndex2" :range="pickerInfoList[4].nameArray2">
						                        <image src="../../static/detail-tabicon.png" ></image>
						                    </picker>
						                    <text class="p13-date">日&nbsp;&nbsp;&nbsp;(D)</text>
						                    <text class="p14" style="width: 30px;">{{pickerInfoList[4].nameArray3[pickerInfoList[4].nameIndex3]}}</text>
						                    <picker @change="bindPickerChange43" :value="pickerInfoList[4].nameIndex3" :range="pickerInfoList[4].nameArray3">
						                        <image src="../../static/detail-tabicon.png" ></image>
						                    </picker>
						        </view>
						    </view>
						    <view class="confirm">
						        <image :src="tablist.confirm ? tabicon[0] : tabicon[1]" @click="changeConfirm"></image>
						        <text>确认以上输入信息来源于我的验光数据!</text>
						    </view>
						</view>
					
					</template>
					<template v-else>
						<view v-for="item in pickerInfoList" :key="item.key" class="bodyBox">
							<template v-if="item.nameC==='验光日期'">
								<text class="names">{{item.nameC}}</text>
								<text style="margin-right: 5px;">{{item.nameArray1[item.nameIndex1]}}年</text>
								<text style="margin-right: 5px;">{{item.nameArray2[item.nameIndex2]}}月</text>
								<text>{{item.nameArray3[item.nameIndex2]}}日</text>
							</template>
							<template v-else>
								<template v-if="item.nameC==='度数'">
									<text style="display: inline;">*</text>
								</template>
				
									<text class="names">{{item.nameC}}</text>
									<text style="margin-right: 10px;">左&nbsp;{{item.nameArray1[item.nameIndex1]}}</text>
									<text>右&nbsp;{{item.nameArray2[item.nameIndex2]}}</text>
							</template>
						</view>
					</template>
				</view>
			</view>
			<!-- 实用功能折叠框 -->
			<MyCollapse :isOpenProps="funIsOpen" :funListProp="funList"  :funContentProp="funContent" title="实用功能"></MyCollapse>
			<MyCollapse :isOpenProps="kindIsOpen" :funListProp="kindList1" :funList2Prop="kindList2"  :funContentProp="kindContent" title="镜片种类"></MyCollapse>
			<MyCollapse :isOpenProps="maIsOpen" :funListProp="maList1" :funList2Prop="maList2" :funContentProp="maContent" title="材质选择"></MyCollapse>
			<MyCollapse :isOpenProps="reIsOpen" :funListProp="reList1" :funList2Prop="reList2" :funContentProp="reContent" title="折射率"></MyCollapse>
		</view>
		<view class="submit">立即结算</view>
	</view>
</template>

<script>
	import MyCollapse from './compoents/MyCollapse.vue'
	export default {
		components: {
			MyCollapse
			},
		data() {
			return {
				count:1,
				disabled:false,
				price:180,
				// 实用功能参数
				funIsOpen:true, // 默认myCollapse开启
				funList: [
					{"name":"防紫外线","isChioce": false,"key":1,"type": "fun"},
					{"name":"防蓝光","isChioce": false,"key":2,"type": "fun"},
					{"name":"智能变色","isChioce": false,"key":3,"type": "fun"},
					{"name":"易清洁","isChioce": false,"key":4,"type": "fun"},
					{"name":"防辐射","isChioce": false,"key":5,"type": "fun"},
					{"name":"抗疲劳","isChioce": false,"key":6,"type": "fun"},
				],
				funContent:[],
				
				// 镜片种类参数
				kindIsOpen:true, 
				kindList1: [
					{"name":"染色","isChioce":false,key:1,"type": "kind"},
					{"name":"渐变","isChioce":false,key:2,"type": "kind"},
				],
				kindList2: [
					{"name":"JB234759","isChioce":false,key:3,"type": "kind"},
					{"name":"JB234759","isChioce":false,key:4,"type": "kind"},
					{"name":"JB234759","isChioce":false,key:5,"type": "kind"},
					{"name":"JB234759","isChioce":false,key:6,"type": "kind"},
					{"name":"JB234759","isChioce":false,key:7,"type": "kind"},
				],
				kindContent:[],
				// 材质选择
				maIsOpen:true,
				maList1: [
					{"name":"树脂镜片","isChioce":false,key:1,"range":"0-300度","isRange":true},
					{"name":"特殊镜片","isChioce":false,key:2},
				],
				maList2: [
					{"name":"玻璃镜片","isChioce":false,key:3,"range":"300-1000度","isRange":true},
					{"name":"玻璃镜片","isChioce":false,key:4},
				],
				maContent:[],
				// 折射率参数
				reIsOpen:true,
				reList1: [
					{"name":"1.56（推荐）","isChioce":false,key:1,"range":"0-300度","isRange":true},
					{"name":"1.60","isChioce":false,key:2},
				],
				reList2: [
					{"name":"1.71（推荐）","isChioce":false,key:3,"range":"300-1000度","isRange":true},
					{"name":"1.67","isChioce":false,key:4},
					{"name":"1.71","isChioce":false,key:5},
					{"name":"1.74","isChioce":false,key:6},
				],
				reContent:[],
				// 验光参数
				opIsOpen:true,
				tablist: {
				        // read: true,
				        // seeLong: false,
				        confirm: false
				},
				tabicon:['/static/detail-button.png','/static/detail-button-unselected.png'],
				    // 度数相关数据                
				pickerInfoList:[
				{nameC:"度数",nameE:"(SPH)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:0},
				{nameC:"散光",nameE:"(CYL)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:1},
				{nameC:"散光轴位",nameE:"(AXI)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:2},
				{nameC:"双眼瞳距",nameE:"(PD)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:3},
				{nameC:"验光日期",nameE:'',nameArray1:[2017,2018,2019,2020,2021],nameIndex1:0,nameArray2:[1,2,3,4,5,6,7],nameIndex2:0,nameArray3:[1,2,3,4,5,6],nameIndex3:0}
				],
				
			}
		},
		methods: {
			counter(isadd){
				if(isadd){
					this.count++
				}else{
					this.count <= 1? this.disabled = true:this.count--
				}
			},
			myCollapseChange(isopen){
				// console.log(isopen)
				this.opIsOpen = !isopen
			},
			changeConfirm() {
			    this.tablist.confirm = !this.tablist.confirm
			},
			
			bindPickerChange01: function(e) {
			    this.pickerInfoList[0].nameIndex1 = e.target.value 
			},
			bindPickerChange02: function(e) {
			    this.pickerInfoList[0].nameIndex2 = e.target.value 
			},
			
			bindPickerChange11: function(e) {
			    this.pickerInfoList[1].nameIndex1 = e.target.value 
			},
			bindPickerChange12: function(e) {
			    this.pickerInfoList[1].nameIndex2 = e.target.value 
			},
			
			bindPickerChange21: function(e) {
			    this.pickerInfoList[2].nameIndex1 = e.target.value 
			},
			bindPickerChange22: function(e) {
			    this.pickerInfoList[2].nameIndex2 = e.target.value 
			},
			
			bindPickerChange31: function(e) {
			    this.pickerInfoList[3].nameIndex1 = e.target.value 
			},
			bindPickerChange32: function(e) {
			    this.pickerInfoList[3].nameIndex2 = e.target.value 
			},   
			
			bindPickerChange41: function(e) {
			    this.pickerInfoList[4].nameIndex1 = e.target.value 
			},
			bindPickerChange42: function(e) {
			    this.pickerInfoList[4].nameIndex2 = e.target.value 
			},         
			bindPickerChange43: function(e) {
			    this.pickerInfoList[4].nameIndex3 = e.target.value 
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		width: 100%;
		background-color: #F2F2F2;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.goods-info{
		width: 100%;
		height: 272rpx;
		box-sizing: border-box;
		padding: 40rpx 40rpx 36rpx 36rpx;
		margin: 36rpx 0 18rpx 0;
		// margin-bottom: -18rpx;
		// margin-top: -36rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		display: flex;
		image{
			width: 94px;
			height: 94px;
			margin-right: 28rpx;
		}
		.box-right{
			width: 458rpx;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: space-between;
			.p1 {
				// font-family: PingFangSC-Regular;
				font-size: 14px;
				color: #333333;
				letter-spacing: -0.26px;
				text-align: justify;
				line-height: 18px;
			}
			.p2 {
				// font-family: PingFangSC-Regular;
				font-size: 10px;
				color: #999999;
				letter-spacing: -0.19px;
				margin-top: -20rpx;
			}
			.priceBox{
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				width: 100%;
				.price{
					color: #FF6B4A;
					font-size: 28rpx;
				}
				.counter{
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					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;
					}
				}
			}
		}
	}
	
	.goods-data{
		width: 100%;
		box-sizing: border-box;
		padding: 37rpx 40rpx 0 40rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		margin-bottom: 92px;
		.opCollapse{
			width: 100%;
			padding-bottom: 28rpx;
			margin-top: 7px;
			border-bottom: 1px solid #E9E9E9;
			.head{
				display: flex;
				justify-content: space-between;
				height: 24px;
				// font-family: PingFangSC-Medium;
				font-size: 16px;
				color: #333333;
				letter-spacing: -0.3px;
				text-align: justify;
				line-height: 24px;
				margin-bottom: 18rpx;
				.headRighted{
					width: 0;
					height: 0;
					border-left: 4px solid transparent;
					border-right: 4px solid transparent;
					border-bottom: 4px solid #CFCFCF;
					transform: scaleY(-1);
					margin-top: 10px;
				}
				.headMid{
					// font-family: PingFangSC-Regular;
					font-size: 10px;
					color: #999999;
					letter-spacing: -0.19px;
					margin-left: -120rpx;
				}
				.headRight{
					width: 0;
					height: 0;
					border-left: 4px solid transparent;
					border-right: 4px solid transparent;
					border-bottom: 4px solid #CFCFCF;
					margin-top: 10px;
				}
			}
			.body{
				// font-family: PingFangSC-Regular;
				font-size: 12px;
				color: #666666;
				letter-spacing: 0;
				.bodyBox{
					margin-top: 15px;
					.names{
						// font-family: PingFangSC-Regular;
						font-size: 12px;
						color: #151515;
						letter-spacing: 0;
						text-align: justify;
						line-height: 17px;
						margin-left: 5px;
						margin-right: 10px;
					}
					text{
						// font-family: PingFangSC-Regular;
						font-size: 12px;
						color: #666666;
						letter-spacing: 0;
						text-align: justify;
					}
				}

			}
		}

	}
	
	.goods-form {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #fff;
	    width: 100%;
	    
		.p1 {
	        font-size: 16px;
	        color: #333333;
	        letter-spacing: -0.3px;
	        text-align: justify;
	        line-height: 24px;
	        margin: 4px 0;
	
	    }
	    .p2 {
	        font-size: 12px;
	        color: #999999;
	        letter-spacing: -0.23px;
	        margin-bottom: 18rpx;
	    }
	    image{
	        width: 28rpx;
	        height: 26rpx;
	    }
	    .confirm {
	        display: flex;
	        align-items: center;
	        font-size: 12px;
	        color: #666666;
	        letter-spacing: -0.23px;
	        width: 684rpx;
	        image{
	            margin-right:25rpx;
	        }
	    }
	    .picker{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;
		image{
			width: 10px;
			height: 10px;
			margin-right: 5px;
		}
		.picker-choice{
			display: flex;
			width: 684rpx;
			align-items: center;
	        margin-bottom: 40rpx;
			.choice-left{
				width: 210rpx;
				.p11 {
					font-size: 14px;
					color: #333333;
					letter-spacing: -0.26px;
					text-align: justify;
					line-height: 24px;
					// margin-right: 10px;
				}
				.p12 {
					font-size: 10px;
					color: #3F3F3F;
					letter-spacing: -0.19px;
					text-align: justify;
					line-height: 24px;
				}
	            
	            
			}
			.p13 {
				font-size: 10px;
				color: #999999;
				letter-spacing: -0.19px;
				margin-right: 10px;
			}
	        .p13-date {
	            font-size: 10px;
				color: #999999;
				letter-spacing: -0.19px;
				margin-right: 5px;
	        }
			.p14 {
				font-size: 14px;
				color: #666666;
				letter-spacing: -0.26px;
				text-align: center;
				width: 124rpx;
				border-bottom: 1px solid #CFCFCF;
			}
	        
		}
	}
	}
	
	.submit{
		width: 100%;
		height: 112rpx;
		background: #FF6B4A;
		position: fixed;
		bottom: 0;
		text-align: center;
		line-height: 112rpx;
		// font-family: PingFangSC-Regular;
		font-size: 16px;
		color: #FFFFFF;
		letter-spacing: -0.3px;
	}
	
</style>
