<template>
	<view class="wrap">
		<view class="body">
			<template >
				<view class="goods-form">
					<view class="p1">
						<image class="image2" 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="pd">验光单取名:</text>
							</view>
							<input type="text" @change="handleInput" class="input"
							placeholder="请输入名称" maxlength="20" :value="name" />
						</view>
					</view>
					<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">
								<view class="p14">
								{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}
								<image src="../../static/detail-tabicon.png" ></image>
								</view>
								<!-- <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">
								<view class="p14">
								{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}
								<image src="../../static/detail-tabicon.png" ></image>
								</view>
								<!-- <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">
								<view class="p14">
									{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}
									<image src="../../static/detail-tabicon.png" ></image>
								</view>
								<!-- <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">
								<view class="p14">
									{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}
									<image src="../../static/detail-tabicon.png" ></image>
								</view>
								<!-- <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>
							<picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1">
								<view class="p14">
									{{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}
									<image src="../../static/detail-tabicon.png" ></image>
								</view>
							</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">
								<view class="p14">
									{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}
									<image src="../../static/detail-tabicon.png" ></image>
								</view>
								<!-- <image src="../../static/detail-tabicon.png" ></image> -->
							</picker>
						</view>
					</view>
					<view class="picker">
						<view class="picker-choice">
							<view class="choice-left">
								<text class="pd">瞳距:</text>
							</view>
							<input type="digit" @change="handleInputPd" class="input"
							placeholder="请输入瞳距,单位cm" maxlength="20" :value="pd" />
						</view>
					</view>
					<view class="picker" >
						<view class="picker-choice">
							<view class="choice-left">
								<text class="p11">{{pickerInfoList[3].nameC}}</text>
							</view>
							<text class="p13-date">年&nbsp;&nbsp;&nbsp;(Y)</text>
							<picker @change="bindPickerChange41" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1">
								<view class="p14" style="width: 30px;">
									{{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}
									<image src="../../static/detail-tabicon.png" ></image>
								</view>
							</picker>
							<text class="p13-date">月&nbsp;&nbsp;&nbsp;(M)</text>
							<picker @change="bindPickerChange42" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2">
								<view class="p14" style="width: 30px;">
									{{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}
									<image src="../../static/detail-tabicon.png" ></image>
								</view>
							</picker>
							<text class="p13-date">日&nbsp;&nbsp;&nbsp;(D)</text>
							<picker @change="bindPickerChange43" :value="pickerInfoList[3].nameIndex3" :range="pickerInfoList[3].nameArray3">
								<view class="p14" style="width: 30px;">
									{{pickerInfoList[3].nameArray3[pickerInfoList[3].nameIndex3]}}
									<image src="../../static/detail-tabicon.png" ></image>
								</view>
							</picker>
						</view>
					</view>
					<view class="confirm">
						<image class="image1" :src="confirm ? tabicon[0] : tabicon[1]" @tap="changeConfirm"></image>
						<text>确认以上输入信息来源于我的验光数据!</text>
					</view>
				</view>
				
				</template>
			</view>
			
			
		<view class="footer" @click="handleSubmit">
			<button class="btn" type="default">提 交</button>
		</view>
	</view>
</template>

<script>
	import store from '@/store';
	
	export default {
		data() {
			return {
				pickerInfoList:[
				{nameC:"度数",nameE:"(SPH)",nameArray1:[''],nameIndex1:0,nameArray2:[''],nameIndex2:0,key:0},
				{nameC:"散光",nameE:"(CYL)",nameArray1:[''],nameIndex1:0,nameArray2:[''],nameIndex2:0,key:1},
				{nameC:"散光轴位",nameE:"(AXI)",nameArray1:[''],nameIndex1:0,nameArray2:[''],nameIndex2:0,key:2},
				{nameC:"验光日期",nameE:'',nameArray1:[''],nameIndex1:0,nameArray2:['',1,2,3,4,5,6,7,8,9,10,11,12],nameIndex2:0,nameArray3:[''],nameIndex3:0}
				],
				confirm: false, // 用户是否确认
				tabicon:['/static/detail-button.png','/static/detail-button-unselected.png'],
				name: '夏小花',
				oldname:'',// 用于判读用户是否改变名字
				pickerInfoChioce:{
					"leftSph": '',
					"rightSph": '',
					"leftCyl": '',
					"rightCyl": '',
					"leftAxi": '',
					"rightAxi": '',
					"time":{
						"year":0,
						"month": 0,
						"day":0 ,
					}
				},
				pd: '',// 瞳距
				oldpd: '',// 用于判断用户是否改变瞳距
				kinds:Number, // kinds=1,提交为新增验光,2为修改
				mp_id: Number
			};
		},
		onLoad: function (option) { 
			//option为object类型,会序列化上个页面传递的参数
			// 初始化SPL、CYL、AXI的值
			for (let j = 0; j < 3; j++) {
				for(let i=-12;i<6;i++){
					this.pickerInfoList[j].nameArray1.push(i)
					this.pickerInfoList[j].nameArray1.push(i+0.5)
					this.pickerInfoList[j].nameArray2.push(i)
					this.pickerInfoList[j].nameArray2.push(i+0.5)
					if(i>=-6){
						this.pickerInfoList[j].nameArray1.push(i+0.25)
						this.pickerInfoList[j].nameArray1.push(i+0.75)
						this.pickerInfoList[j].nameArray2.push(i+0.25)
						this.pickerInfoList[j].nameArray2.push(i+0.75)
					}
					if(i==5){
						this.pickerInfoList[j].nameArray1.push(i+1)
						this.pickerInfoList[j].nameArray2.push(i+1)
					}
				}
			}
			// 初始化日期值
			for (let i = 1; i < 32; i++){
				this.pickerInfoList[3].nameArray3.push(i)
			}
			// 初始化年份前后五年
			let myDate = new Date();
			let nowYear = myDate.getFullYear();
			for(let i=0;i<5;i++){
				this.pickerInfoList[3].nameArray1.push(nowYear-i)
			}
			
			this.kinds=option.kinds
			if(option.kinds==1){
				this.name= '';
				this.pd= '';
			} else{
				console.log('args===>',option.index)
				const loveList=Object.assign({},this.$store.state.myLoveList.loveList)
				console.log('args===>',loveList[option.index].in_time)
				console.log('args===>',loveList[option.index].in_time.toString().slice(0,4))
				console.log('args===>',loveList[option.index].in_time.toString().slice(5,6)==0)
				console.log('args===>',loveList[option.index].in_time.toString().slice(8,10))
				this.name=loveList[option.index].name
				this.pd=loveList[option.index].pd
				this.mp_id=loveList[option.index].mp_id
				this.oldname=loveList[option.index].name
				this.oldpd=loveList[option.index].pd
				// 将kinds =2时的值传到该页面
				this.pickerInfoList[0].nameArray1.unshift(loveList[option.index].leftSph)
				this.pickerInfoList[0].nameArray2.unshift(loveList[option.index].rightSph)
				this.pickerInfoList[1].nameArray1.unshift(loveList[option.index].leftCyl)
				this.pickerInfoList[1].nameArray2.unshift(loveList[option.index].rightCyl)
				this.pickerInfoList[2].nameArray1.unshift(loveList[option.index].leftAxi)
				this.pickerInfoList[2].nameArray2.unshift(loveList[option.index].rightAxi)
				
				this.pickerInfoList[3].nameArray1.unshift(loveList[option.index].in_time.toString().slice(0,4))
				if(loveList[option.index].in_time.toString().slice(5,6)==0){
					this.pickerInfoList[3].nameArray2.unshift(loveList[option.index].in_time.toString().slice(6,7))
				} else{
					this.pickerInfoList[3].nameArray2.unshift(loveList[option.index].in_time.toString().slice(5,7))
				}
				if(loveList[option.index].in_time.toString().slice(8,9)==0){
					this.pickerInfoList[3].nameArray3.unshift(loveList[option.index].in_time.toString().slice(9,10))
				} else{
					this.pickerInfoList[3].nameArray3.unshift(loveList[option.index].in_time.toString().slice(8,10))
				}
			}
		},
		methods:{
			handleInput(e){
				this.name=e.target.value
			},
			handleInputPd(e){
				// 只能输入正浮点数或正数
				if(/^\d+(\.\d+)?$/.test(e.target.value)){
					this.pd=e.target.value
				} else {
					uni.showToast({
						title:"请输入有效数据;示例:89",
						icon: "none",
						duration: 2000,
					})
					this.pd = ''
				}
				
			},
			// 用户提交
			handleSubmit(){
				if(this.name==''){
					uni.showToast({
						title:"请输入验光单取名",
						icon: "none",
						duration: 2000,
					})
				}else{
					
					if(this.pd==''){
							uni.showToast({
								title:"请输入瞳距",
								icon: "none",
								duration: 2000,
							})
					}else{
						
						if(this.kinds==1){
							// 添加用户验光单
							console.log('kinds====>',this.pickerInfoChioce.leftSph)
							console.log('kinds====>',this.pickerInfoChioce.leftSph==Number)
							console.log('kinds====>',this.pickerInfoChioce.rightSph==Number)
							if(this.pickerInfoChioce.rightSph==''||this.pickerInfoChioce.leftSph==''||
							this.pickerInfoChioce.leftCyl==''||this.pickerInfoChioce.rightCyl==''||
							this.pickerInfoChioce.leftAxi==''||this.pickerInfoChioce.rightAxi==''
							){
								uni.showToast({
									title:"请输入您的验光数据",
									icon: "none",
									duration: 2000,
								})
							}else{
								if(this.confirm){
									store.dispatch('myLoveList/addMylove', {
										
										uid: this.$store.state.user.userInfo.uid,
										openid: this.$store.state.user.userInfo.openid,
										// mp_name: this.$store.state.user.userInfo.mp_name,
										leftSph: this.pickerInfoChioce.leftSph,
										rightSph: this.pickerInfoChioce.rightSph,
										leftCyl: this.pickerInfoChioce.leftCyl,
										rightCyl: this.pickerInfoChioce.rightCyl,
										leftAxi: this.pickerInfoChioce.leftAxi,
										rightAxi: this.pickerInfoChioce.rightAxi,
										pd: this.pd,// 瞳距
										mp_name:this.name,
										// time: this.pickerInfoChioce.time,
										// img_url2: "http://localhost:8087/images/shop_1/1/",
									});
									store.dispatch('myLoveList/getLoveList', {
										uid: this.$store.state.user.userInfo.uid,
									}); 
									uni.navigateBack({
										delta:1,
										animationDuration:2000
									}) 
									
								} else{
									uni.showToast({
										title:"请确认您的验光数据",
										icon: "none",
										duration: 3000,
									})
								}

							}
												
						}
						if(this.kinds==2){
							// console.log('kinds====>',this.kinds)
							// console.log('pickerindex=====>',this.pickerInfoList[0].nameIndex1)
							// console.log('this.pickerInfoChioce====>',type(this.pickerInfoChioce))
							if(this.confirm){
								const leftList = ["leftSph","leftCyl","leftAxi"];
								const rightList = ["rightSph", "rightCyl", "rightAxi"];
								let flag=0;
								if(this.name!=this.oldname){
									store.dispatch('myLoveList/updateMylove', {
										uid: this.$store.state.user.userInfo.uid,
										openid: this.$store.state.user.userInfo.openid,
										mp_id: this.mp_id,
										keyname: 'name',
										keyvalue: this.name,
									});
									flag=1
								}
								if(this.pd!=this.oldpd){
									store.dispatch('myLoveList/updateMylove', {
										uid: this.$store.state.user.userInfo.uid,
										openid: this.$store.state.user.userInfo.openid,
										mp_id: this.mp_id,
										keyname: 'pd',
										keyvalue: this.pd,
									}); 
									flag=1
								}
								//  先验证是否有改动项,
								for (let j=0; j<3; j++) {
									if(this.pickerInfoList[j].nameIndex1!=0||this.pickerInfoList[j].nameIndex2!=0){
										if(this.pickerInfoList[j].nameArray1[this.pickerInfoList[j].nameIndex1]!=''&&
										this.pickerInfoList[j].nameArray2[this.pickerInfoList[j].nameIndex2]!=''){
											if(this.pickerInfoList[j].nameIndex1!=0){
												store.dispatch('myLoveList/updateMylove', {
													uid: this.$store.state.user.userInfo.uid,
													openid: this.$store.state.user.userInfo.openid,
													mp_id: this.mp_id,
													keyname: leftList[j],
													keyvalue: this.pickerInfoList[j].nameArray1[this.pickerInfoList[j].nameIndex1],
												}); 
											}
											if(this.pickerInfoList[j].nameIndex2!=0){
												store.dispatch('myLoveList/updateMylove', {
													uid: this.$store.state.user.userInfo.uid,
													openid: this.$store.state.user.userInfo.openid,
													mp_id: this.mp_id,
													keyname: rightList[j],
													keyvalue: this.pickerInfoList[j].nameArray2[this.pickerInfoList[j].nameIndex2]
												}); 
											}
											flag=1;
										} else{
											flag=0;
											uni.showToast({
												title:"请输入您的验光数据",
												icon: "none",
												duration: 2000,
											})
														
										}
									}

								}
								if(flag!=0){
									store.dispatch('myLoveList/getLoveList', {
										uid: this.$store.state.user.userInfo.uid,
									}); 
									uni.navigateBack({
										delta:1,
										animationDuration:2000
									}) 
								}

							} else{
								uni.showToast({
									title:"请确认您的验光数据",
									icon: "none",
									duration: 3000,
								})
							}
												
						}
						
						
					}
					
				}

			},
			changeConfirm() {
			    this.confirm = !this.confirm
			},
			
			bindPickerChange01: function(e) {
			    this.pickerInfoList[0].nameIndex1 = e.target.value 
				this.pickerInfoChioce.leftSph=this.pickerInfoList[0].nameArray1[e.target.value]
			},
			bindPickerChange02: function(e) {
			    this.pickerInfoList[0].nameIndex2 = e.target.value 
				this.pickerInfoChioce.rightSph=this.pickerInfoList[0].nameArray2[e.target.value]
			},
			
			bindPickerChange11: function(e) {
			    this.pickerInfoList[1].nameIndex1 = e.target.value 
				this.pickerInfoChioce.leftCyl=this.pickerInfoList[1].nameArray1[e.target.value]
			},
			bindPickerChange12: function(e) {
			    this.pickerInfoList[1].nameIndex2 = e.target.value 
				this.pickerInfoChioce.rightCyl=this.pickerInfoList[1].nameArray2[e.target.value]
			},
			
			bindPickerChange21: function(e) {
			    this.pickerInfoList[2].nameIndex1 = e.target.value 
				this.pickerInfoChioce.leftAxi=this.pickerInfoList[2].nameArray1[e.target.value]
			},
			bindPickerChange22: function(e) {
			    this.pickerInfoList[2].nameIndex2 = e.target.value
				 this.pickerInfoChioce.rightAxi=this.pickerInfoList[2].nameArray2[e.target.value]
			},
			
			bindPickerChange41: function(e) {
			    this.pickerInfoList[3].nameIndex1 = e.target.value 
				this.pickerInfoChioce.time.year=this.pickerInfoList[3].nameArray1[e.target.value]
			},
			bindPickerChange42: function(e) {
			    this.pickerInfoList[3].nameIndex2 = e.target.value
				 this.pickerInfoChioce.time.month=this.pickerInfoList[3].nameArray2[e.target.value]
			},         
			bindPickerChange43: function(e) {
			    this.pickerInfoList[3].nameIndex3 = e.target.value 
				this.pickerInfoChioce.time.day=this.pickerInfoList[3].nameArray3[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: 32rpx;
		    }
		    .image2{
		        width: 42rpx;
		        height: 34rpx;
				margin-right: 12rpx;
		    }
		    .confirm {
		        display: flex;
		        align-items: center;
		        font-size: 12px;
		        color: #666666;
		        letter-spacing: -0.23px;
		        width: 684rpx;
		        .image1{
		            margin-right:25rpx;
					width: 42rpx;
					height: 38rpx;
		        }
		    }
		    .picker{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 100%;

			.picker-choice{
				display: flex;
				width: 684rpx;
				align-items: center;
		        margin-bottom: 40rpx;
				.input{
					border-bottom: 1px solid #CFCFCF;
					height: 40rpx;
				}
				.choice-left{
					width: 210rpx;
					.pd{
						font-size: 14px;
						color: #333333;
						letter-spacing: -0.26px;
						text-align: justify;
						line-height: 24px;
						margin-right: 44rpx;
					}
					.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;
		        }
				picker{
					width: 144rpx;
					height: 40rpx;
					display: flex;
					position: relative;
					.p14 {
						font-size: 14px;
						color: #666666;
						letter-spacing: -0.26px;
						text-align: center;
						width: 124rpx;
						border-bottom: 1px solid #CFCFCF;
						height: 38rpx;
					}
					image{
						width: 20rpx;
						height: 20rpx;
						position: absolute;
						right: 20rpx;
						top: 8rpx;
					}
				}

		        
			}
		}
		}
		
		.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>