<template>
	<view class="BottomSheetContent">
		<view class="sheet" :class="{sheetShow:isShowBottom,sheeHide:!isShowBottom}"
			@touchmove.stop.prevent="moveHandle" @click="closeSheet()">
			<scroll-view scroll-y="true" class="sheetView" :class="{sheetView_active:isShowBottom}"
				@click.stop="stopEvent()">
				<view class="BottomSheetContent">
					<view class="goodInfo">
						<view class="imageWrap">
							<!-- <image :src="skuItem.sku_pic_http" mode="aspectFill" style="width: 188rpx;height: 168rpx;">
							</image> -->

						</view>
						<view class="infoRight">
							<!-- <text class="goodName">{{goodInfo.shop_wood_name}}-{{skuItem.wsp_sku_name}}</text> -->
							<text class="goodName">{{goodInfo.shop_wood_name}}</text>
							<text class="remarks">支持7天无理由退货 顺丰发货</text>
							<view class="priceBox">
								<!-- <view class="price">￥{{skuItem.wsp_wood_price || '暂无'}}</view> -->
								<view class="price">￥{{0 || '暂无'}}</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="peopleChoose">
						<view class="title">选择使用人</view>
						<view class="loveList">
							<view class="peopleName" v-for="(item,index) in loveList" :key='index'
								:class="{ active2: loveCurrent === index }" @click="onClickLoveItem(index,item.name)">
								{{item.name}}
							</view>
						</view>
					</view>
					<view class="goods-data" v-if="isCart !== 3">
						<view class="opCollapse">
							<view class="body">
								<template v-if="opIsOpen">
									<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" @blur="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="ipts">
											<view class="inputItem">
												<text class="text">镜片宽度</text>
												<input class="input" @input="glassInfoInput($event,0)" type="text"
													:value="glassInfo.glassWidth!=='0'?glassInfo.glassWidth:''"
													placeholder="请输入镜片宽度" />
											</view>
											<view class="inputItem">
												<text class="text">鼻梁宽度</text>
												<input class="input" @input="glassInfoInput($event,1)" type="text"
													:value="glassInfo.norseWidth!=='0'?glassInfo.norseWidth:''"
													placeholder="请输入鼻梁宽度" />
											</view>
											<view class="inputItem">
												<text class="text">镜腿长度</text>
												<input class="input" @input="glassInfoInput($event,2)" type="text"
													:value="glassInfo.legWidth!=='0'?glassInfo.legWidth:''"
													placeholder="请输入镜腿长度" />
											</view>

										</view>
										<!--  <view class="confirm">
				        <image class="image1" :src="confirm ? tabicon[0] : tabicon[1]" @tap="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>
					</view>
					<view class="choose">
						<view class="chooseItem_1_content" v-for="(item,index) in attrList" :key="index">
							<UniCollapse @change="changeShow(index)">
								<UniCollapseItem :open="show[index]" :title="item.meta_name" showAnimation=false>
									<view class="chooseItem_1_content">
										<view class="itemsWrap" v-if="isCart ==3">
											<view class="item2" v-for="(one,i) in item.attr" :key="i"
												:class="{ active2: current[index] === i}"
												@click="cartOnClickItem(index, i,one.aid)">{{one.name}}</view>
										</view>
										<view class="itemsWrap" v-else>
											<view class="item2" v-for="(one,i) in item.attr" :key="i"
												:class="{ active2: current[index] === i }"
												@click="cartOnClickItem(index, i,one.aid)">{{one.name}}</view>
										</view>
									</view>
								</UniCollapseItem>
							</UniCollapse>
							<view class="chooseRes" v-show="!show[index]">*
								{{attrList[index].attr[current[index]].name}}</view>
						</view>
					</view>
					<view class="button" @click.native="addCart" v-if="isCart == 1">
						加入购物车
					</view>
					<view class="button" @click="toComfirmOrder" v-if="isCart == 2">
						立即结算
					</view>
					<view class="button" @click="comfirmChoose" v-if="isCart == 3">
						确定
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>
<script>
	import UniCollapse from '@/components/UniCollapse/UniCollapse.vue'
	import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue'
	import store from '@/store'
	export default {
		components: {
			UniCollapse,
			UniCollapseItem,
		},
		props: {
			isShowBottom: Boolean,
			shop_wood_id: String,
			wsp_id: String,
			propMpId: String,
			goodInfo: Object,
			isCart: Number,
			cart_id: String,
			index: Number
		},
		data() {
			return {
				loveCurrent: Number,
				count: 1,
				// pid: 0,
				maxCount: 20,
				dataName: '', // 验光数据人员名称
				isDataName: false, // 是否是已存在的人员数据
				dataConfirm: false, // 已确认所输入验光数据
				opIsOpen: true,
				addDisabled: false,
				desDisabled: false,
				current: [],
				show: [true, true],
				checkedData: {},
				// 度数相关数据
				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,
					},
				},
				glassInfo: {
					glassWidth: Number, //镜片宽度
					norseWidth: Number, //鼻宽
					legWidth: Number //镜腿长度
				},
				pd: '', // 瞳距
				oldpd: '', // 用于判断用户是否改变瞳距
				kinds: 1, // kinds=1，提交为新增验光，2为修改
				mp_id: Number,
				skuValueArray: [],
				skId: String
			}
		},
		computed: {
			//进购物车选择的人的index
			p_current() {
				const getLoveItemIndex = (item) => item.mp_id == this.propMpId
				const p_current = this.$store.state.myLoveList.loveList.findIndex(getLoveItemIndex)
				if (this.isCart == 3) {
					this.loveCurrent = p_current
				}
				return p_current
			},
			arr_current() {
				if (this.isCart == 3) {
					const skId = this.wsp_id
					const skuValue = this.skuItem.wsp_sku_name
					const skuValueArray = skuValue.split('_')
					this.skuValueArray = skuValueArray
					const attrList = this.$store.state.read.goodInfo.attrList
					for (let i = 0; i < attrList.length; i++) {
						const getArrIndex = (item) => item.aid == skuValueArray[i]
						const arr_current = this.$store.state.read.goodInfo.attrList[i].attr.findIndex(getArrIndex)
						// console.log('arr_current',arr_current)
						this.current.push(arr_current)
					}
				} else {
					return null
				}
			},
			loveList() {
				return this.$store.state.myLoveList.loveList || []
			},
			attrList() {
				// console.log('attrList',this.$store.state.read.goodInfo.attrList)
				let attrList = this.$store.state.read.goodInfo.attrList
				if (attrList !== undefined) {
					return attrList
				} else {
					return []
				}
			},
			skuList() {
				// console.log('skuList',this.$store.state.read.goodInfo.skuList)
				return this.$store.state.read.goodInfo.sku
			},
			skuItem() {
				// if(this.isCart == 3){
				const skuList = this.$store.state.read.goodInfo.sku
				// console.log('skuItemskuItemskuItemskuItemskuItem', this.$store.state.read.goodInfo);	
				const skuItem = skuList.filter(item => item.wsp_id === this.skId)[0]
				return skuItem
				// }else{  
				//  const skuList =  this.$store.state.read.goodInfo.skuList
				//  const skuItem = skuList[0]
				//  return skuItem	
				// }
			},
			mpList() {

				return this.$store.state.myLoveList.loveList
			},
			glassInfoRight() {
				const glassInfoArr = Object.values(this.glassInfo)
				// console.log('glassInfoArr',glassInfoArr.find(item => item == '0'))
				return glassInfoArr.find(item => item == '0') == undefined
			}
		},
		created() {
			this.skuValueArray = this.skuList[0].wsp_sku_name.split("_")
			// console.log(this.wsp_id)
			this.mp_id = this.propMpId
			const pid = this.shop_wood_id
			if (this.isCart !== 3) {
				this.skId = this.skuList[0].wsp_id
				const current = []
				const show = []
				for (let index = 0; index < this.attrList.length; index++) {
					current.push(0)
					show.push(true)
				}
				this.current = current
				this.show = show
			} else {
				this.skId = this.wsp_id
			}
			//获取关心的人列表
			store.dispatch('myLoveList/getLoveList', {
				uid: this.$store.state.user.userInfo.uid,
			});
			// 初始化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)
			}
			// 初始化年份前后五年
			const myDate = new Date()
			const nowYear = myDate.getFullYear()
			for (let i = 0; i < 5; i++) {
				this.pickerInfoList[3].nameArray1.push(nowYear - i)
			}
		},
		name: "bottomSheet",
		methods: {
			//判断眼镜数据是否为0
			checkGlassInfo() {
				// const glassInfoArr = Object.values(this.glassInfo)
				// console.log(this.glassInfoRight)
				if (!this.glassInfoRight) {
					uni.showToast({
						title: '请完善镜框数据~',
						icon: 'none'
					})
				}
			},
			updateMylove() {
				const loveItem = this.loveList[this.loveCurrent]
				const glassWidth = this.glassInfo.glassWidth
				const norseWidth = this.glassInfo.norseWidth
				const legWidth = this.glassInfo.legWidth
				if (loveItem.glassWidth !== glassWidth) {
					store.dispatch('myLoveList/updateMylove', {
						uid: this.$store.state.user.userInfo.uid,
						openid: this.$store.state.user.userInfo.openid,
						mp_id: this.mp_id,
						keyname: 'glassWidth',
						keyvalue: glassWidth
					});
				}
				if (loveItem.norseWidth !== norseWidth) {
					store.dispatch('myLoveList/updateMylove', {
						uid: this.$store.state.user.userInfo.uid,
						openid: this.$store.state.user.userInfo.openid,
						mp_id: this.mp_id,
						keyname: 'norseWidth',
						keyvalue: norseWidth
					});
				}
				if (loveItem.legWidth !== legWidth) {
					store.dispatch('myLoveList/updateMylove', {
						uid: this.$store.state.user.userInfo.uid,
						openid: this.$store.state.user.userInfo.openid,
						mp_id: this.mp_id,
						keyname: 'legWidth',
						keyvalue: legWidth
					});
				}
			},
			glassInfoInput(e, type) {
				console.log('glassInfoInput', e);
				switch (type) {
					case 0:
						this.glassInfo.glassWidth = e.detail.value
						break;
					case 1:
						this.glassInfo.norseWidth = e.detail.value
						break;
					case 2:
						this.glassInfo.legWidth = e.detail.value
						break;
					default:
						break;
				}
			},
			//参数点击事件==》改变对应图片
			cartOnClickItem(index, i, aid) {
				//根据aid拼接skuValue
				this.skuValueArray[index] = aid
				const wsp_sku_name = this.skuValueArray.join('_')
				//根据wsp_sku_name获取对应的wsp_id
				const itemSk_id = this.skuList.filter(item => item.wsp_sku_name == wsp_sku_name)[0].wsp_id
				//修改wsp_id
				this.skId = itemSk_id
				if (this.current[index] !== i) {
					this.current[index] = i
				}
				this.$forceUpdate()
			},
			comfirmChoose() {
				this.checkGlassInfo()
				if (this.glassInfoRight) {
					this.updateMylove()
					const price = this.skuList.filter(item => item.wsp_id == this.skId)[0].real_price
					this.$emit("chooseCartModi", this.mp_id, this.skId, price, this.shop_wood_id, this.count, this.cart_id,
						this.index) //添加购物车
					this.$emit("closeBottom")
				}
			},
			addCart() {
				this.checkGlassInfo()
				if (this.glassInfoRight) {
					this.updateMylove()
					const that = this
					console.log('that.goodInfo.attrList------------>', that.goodInfo);
					const checkedSKUName = '1111'
					const checkedSKU = []
					// let j;
					// for (let i = 0; i < that.current.length; i++) {
					// 	// checkedSKU.push(that.goodInfo.attrList[i].attr[that.current[i]])
					// 	// // console.log('i', i, j, i !== this.current.length - 1)
					// 	//   if (i !== this.current.length - 1) {
					// 	//     // 后续需修改算法：目前暂定只有两个参数选择，后续若有多个参数需要修改实现自适应
					// 	//     j = this.current[i] * this.attrList[1].attr.length
					// 	//   } else {
					// 	//     j += this.current[i]
					// 	//   }
					// }
					const price = 11
					// let wsp_id = this.sku[j].wsp_id
					// console.log('选择的商品wsp_id',wsp_id,'选择的商品参数',checkedSKU)
					// console.log('mp_id',this.mp_id,'数量',this.count)
					this.$emit("addCart", this.mp_id, this.count, checkedSKU, this.wsp_id, price) //添加购物车
					this.$emit("closeBottom") //关闭弹窗
				}
			},
			onClickLoveItem(index, name) {
				const loveList = this.loveList
				this.glassInfo.glassWidth = loveList[index].glassWidth
				this.glassInfo.norseWidth = loveList[index].norseWidth
				this.glassInfo.legWidth = loveList[index].legWidth
				for (let index = 0; index < loveList.length; index++) {
					if (name === loveList[index].name && name !== this.name) {
						this.isDataName = true
						this.kinds = 2
						this.name = loveList[index].name
						this.pd = loveList[index].pd
						this.mp_id = loveList[index].mp_id
						this.oldname = loveList[index].name
						this.oldpd = loveList[index].pd
						this.pickerInfoList[0].nameArray1.unshift(loveList[index].leftSph)
						this.pickerInfoList[0].nameArray2.unshift(loveList[index].rightSph)
						this.pickerInfoList[1].nameArray1.unshift(loveList[index].leftCyl)
						this.pickerInfoList[1].nameArray2.unshift(loveList[index].rightCyl)
						this.pickerInfoList[2].nameArray1.unshift(loveList[index].leftAxi)
						this.pickerInfoList[2].nameArray2.unshift(loveList[index].rightAxi)
						this.pickerInfoList[3].nameArray1.unshift(loveList[index].in_time.toString().slice(0, 4))
						if (loveList[index].in_time.toString().slice(5, 6) === 0) {
							this.pickerInfoList[3].nameArray2.unshift(loveList[index].in_time.toString().slice(6, 7))
						} else {
							this.pickerInfoList[3].nameArray2.unshift(loveList[index].in_time.toString().slice(5, 7))
						}
						if (loveList[index].in_time.toString().slice(8, 9) === 0) {
							this.pickerInfoList[3].nameArray3.unshift(loveList[index].in_time.toString().slice(9, 10))
						} else {
							this.pickerInfoList[3].nameArray3.unshift(loveList[index].in_time.toString().slice(8, 10))
						}
					}
				}
				this.name = name;
				this.loveCurrent = index;
			},
			closeSheet() {
				this.$emit('closeBottom');
			},
			stopEvent() { //@click.stop防止事件冒泡

			},
			moveHandle() { //不让页面滚动

			},
			// picker相关功能
			handleInput(e) {
				console.log('handleInputhandleInputhandleInput', e);
				this.name = e.target.value
				this.isDataName = false
				const mpList = this.mpList
				// console.log('mpList===>', mpList)
				for (let index = 0; index < mpList.length; index++) {
					if (e.detail.value === mpList[index].name) {
						this.isDataName = true
						uni.showModal({
							title: '提示',
							content: `是否填充已有的"${e.detail.value}"的数据`,
							success: (res) => {
								if (res.confirm) {
									this.kinds = 2
									// console.log('args===>', index)
									// const mpList=Object.assign({},this.$store.state.mympList.mpList)
									this.name = mpList[index].name
									this.pd = mpList[index].pd
									this.mp_id = mpList[index].mp_id
									this.oldname = mpList[index].name
									this.oldpd = mpList[index].pd
									// 将kinds =2时的值传到该页面
									this.pickerInfoList[0].nameArray1.unshift(mpList[index].leftSph)
									this.pickerInfoList[0].nameArray2.unshift(mpList[index].rightSph)
									this.pickerInfoList[1].nameArray1.unshift(mpList[index].leftCyl)
									this.pickerInfoList[1].nameArray2.unshift(mpList[index].rightCyl)
									this.pickerInfoList[2].nameArray1.unshift(mpList[index].leftAxi)
									this.pickerInfoList[2].nameArray2.unshift(mpList[index].rightAxi)
									this.pickerInfoList[3].nameArray1.unshift(mpList[index].in_time.toString()
										.slice(0, 4))
									if (mpList[index].in_time.toString().slice(5, 6) === 0) {
										this.pickerInfoList[3].nameArray2.unshift(mpList[index].in_time
											.toString().slice(6, 7))
									} else {
										this.pickerInfoList[3].nameArray2.unshift(mpList[index].in_time
											.toString().slice(5, 7))
									}
									if (mpList[index].in_time.toString().slice(8, 9) === 0) {
										this.pickerInfoList[3].nameArray3.unshift(mpList[index].in_time
											.toString().slice(9, 10))
									} else {
										this.pickerInfoList[3].nameArray3.unshift(mpList[index].in_time
											.toString().slice(8, 10))
									}
									// this.checkedData = mpList[index]
									// console.log('checkedData', this.checkedData)
								} else if (res.cancel) {
									this.kinds = 2
								}
							},
						})
					}
				}
			},
			handleInputPd(e) {
				// 只能输入正浮点数或正数
				console.log('handleInputPdhandleInputPd', e);
				if (/^\d+(\.\d+)?$/.test(e.target.value)) {
					this.pd = e.target.value
				} else {
					uni.showToast({
						title: '请输入有效数据;示例:89',
						icon: 'none',
						duration: 2000,
					})
					this.pd = ''
				}
			},
			// 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]
			},
			changeShow(num) {
				this.show[num] = !this.show[num]
				this.$forceUpdate()
			},
			counter(isadd) {
				if (isadd) {
					this.count >= this.maxCount ? this.addDisabled = true : this.count++
				} else {
					this.count <= 1 ? this.desDisabled = true : this.count--
				}
			},
			toComfirmOrder() {
				this.checkGlassInfo()
				this.updateMylove()
				// 先处理验光部分的逻辑，如果ok在跳转
				let flag = 0
				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) {
							// 添加用户验光单
							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/",
								}).then(({
									mp_id: mpId
								}) => {
									this.mp_id = mpId
								})
								flag = 1
							}
						}
						if (this.kinds === 2) {
							// 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
							}
							//  先验证是否输入有无空
							let q = true
							for (let k = 0; k < 3; k++) {
								q = q && (this.pickerInfoList[k].nameArray1[this.pickerInfoList[k].nameIndex1] !== '' &&
									this.pickerInfoList[k].nameArray2[this.pickerInfoList[k].nameIndex2] !== '')
							}
							if (q) {
								for (let j = 0; j < 3; j++) {
									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,
								})
							}

							// } else {
							//   uni.showToast({
							//     title: '请确认您的验光数据',
							//     icon: 'none',
							//     duration: 3000,
							//   })
							// }
						}
					}
				}
				if (flag !== 0) {
					// 如果数据验证无误，那么更新验光单的数据
					store.dispatch('myLoveList/getLoveList', {
						uid: this.$store.state.user.userInfo.uid,
					})
					let i = 0
					// 判断出是哪一个sku被选中
					for (let index = 0; index < this.current.length; index++) {
						// console.log('index', index, i, index !== this.current.length - 1)
						if (index !== this.current.length - 1) {
							// 后续需修改算法：目前暂定只有两个参数选择，后续若有多个参数需要修改实现自适应
							i = this.current[index] * this.attrList[1].attr.length
						} else {
							i += this.current[index]
						}
					}
					// 判断是否其输入的人员数据是否已存在
					store.dispatch('order/saveParams', {
						wsp_id_arr: this.skuList[i],
						current: this.current,
						mp_id: this.mp_id,
						attrList: this.attrList,
					})
					this.$store.state.cart.buyItem = this.skuItem
					// 跳转到确认订单页面
					uni.navigateTo({
						url: `../confirmOrder/confirmOrder?shop_wood_id=${this.shop_wood_id}&count=${this.count}&name=${this.name}&isCart=false`,
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	.BottomSheetContent {
		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;
			position: sticky;
			top: 0rpx;
			left: 0rpx;
			z-index: 99999;

			.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;
				width: 100%;

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

		.peopleChoose {
			width: 100%;
			min-height: 200rpx;
			border-radius: 16rpx;
			background-color: #ffffff;
			box-sizing: border-box;
			padding: 36rpx;
			margin: 10px 0;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;

			.title {
				font-size: 16px;
				color: #333333;
				letter-spacing: -0.3px;
				text-align: justify;
				line-height: 24px;
				margin: 4px 0;
			}

			.loveList {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				justify-content: flex-start;
				align-items: center;
				padding-top: 24rpx;
				width: 100%;

				.peopleName {
					padding: 0 30rpx;
					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;
				}

				.active2 {
					background: rgba(255, 107, 74, 0.15);
					color: #ff6b4a;
				}
			}
		}

		.goods-data {
			width: 100%;
			box-sizing: border-box;
			padding: 37rpx 40rpx 0 40rpx;
			background: #ffffff;
			border-radius: 12rpx;

			.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-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-size: 12px;
					color: #666666;
					letter-spacing: 0;

					.bodyBox {
						margin-top: 15px;

						.names {
							font-size: 12px;
							color: #151515;
							letter-spacing: 0;
							text-align: justify;
							line-height: 17px;
							margin-left: 5px;
							margin-right: 10px;
						}

						text {
							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;
								}
							}

						}
					}

					.ipts {
						width: 100%;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: flex-start;
						// padding: 20rpx 36rpx;
						box-sizing: border-box;

						.inputItem {
							display: flex;
							flex-direction: row;
							justify-content: center;
							align-items: center;
							margin-bottom: 36rpx;

							.text {
								margin-right: 100rpx;
							}

							.input {
								border-bottom: 1px solid #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;
					padding: 0 30rpx;
					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: sticky;
			bottom: 0rpx;
			left: 0rpx;
			z-index: 9999;
		}
	}

	/* sheet弹窗 */
	.sheet {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 150%;
		left: 0upx;
		bottom: 0upx;
		right: 0upx;
		background: rgba(0, 0, 0, 0.3);
		z-index: 10000;
	}

	/* 显示时候的动画默认0.5s */
	.sheetView {
		width: 100%;
		height: 0upx;
		position: absolute;
		bottom: 0upx;
		background: white;
		z-index: 10001;
		transition: all 0.5s;
	}

	.sheetShow {
		top: 0upx !important;
	}

	/* 关闭时的动画，时间自己可以设置0.5s*/
	.sheeHide {
		top: 120% !important;
		transition: all 0.5s;
	}

	/* 项目需求根据设计稿要展示的高度,超出这个高度就自动滚动*/
	.sheetView_active {
		height: 1042upx;
	}
</style>