<template>
	<view class="wrap">
		<view class="body">
			<template >
				<view class="goods-form">
					<view class="p1">
						<image src="../../static/img/myOpticsData/dataWrite.png" mode="aspectFit"></image>
						填写验光数据
					</view>
					<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>
			</view>
			
			
		<view class="footer">
			<button class="btn" type="default">提 交</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				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}
				],
				tablist: {
				        // read: true,
				        // seeLong: false,
				        confirm: false
				},
				tabicon:['/static/detail-button.png','/static/detail-button-unselected.png'],
			};
		},
		methods:{
			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">
	.wrap{
		min-height: 100vh;
		background-color: #F2F2F2;
		.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%;
		    padding: 40rpx 0;
			.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;
				}
		        
			}
		}
		}
		
		.footer{
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;
			.btn{
				width: 100%;
				height: 112rpx;
				line-height: 112rpx;
				background: #FF6B4A;
				font-size: 16px;
				color: #FFFFFF;
			}
		}
	}
</style>
