<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.pic"
				        mode="aspectFill"
				        style="width: 188rpx;height: 168rpx;"
						
				      ></image>
					 
				    </view>
				    <view class="infoRight">
				      <text class="goodName">{{goodInfo.p_name}}</text>
				      <text class="remarks">支持7天无理由退货  顺丰发货</text>
				      <view class="priceBox">
				        <view class="price">￥{{skuItem.real_price || '暂无'}}</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" placeholder="请输入镜片宽度"/>
					  	</view>
					  	<view class="inputItem">
					  		<text class="text">鼻梁宽度</text>
					  		<input class="input" @input="glassInfoInput($event,1)" type="text" :value="glassInfo.norseWidth" placeholder="请输入鼻梁宽度"/>
					  	</view>
					  	<view class="inputItem">
					  		<text class="text">镜腿长度</text>
					  		<input class="input" @input="glassInfoInput($event,2)" type="text" :value="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,
			pid: Number,
			sk_id:String,
			propMpId:String,
			goodInfo:Object,
			isCart:Number,
			cart_id:Number,
			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:{
				norseWidth:Number,//鼻宽
				glassWidth: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.sk_id
					const skuValue = this.skuItem.sku_value
					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.skuList
		  },
		  skuItem(){
			  // if(this.isCart == 3){
				  const skuList =  this.$store.state.read.goodInfo.skuList
				  const skuItem = skuList.filter(item => item.sk_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
		  },
		},
		created() {
			this.skuValueArray = this.skuList[0].sku_value.split("_")
			// console.log(this.sk_id)
			this.mp_id = this.propMpId
		  const pid = this.pid
		  if(this.isCart!==3){
			this.skId = this.skuList[0].sk_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.sk_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: {
			checkGlassInfo(){
				const glassInfoArr = Object.values(this.glassInfo)
				// console.log(glassInfoArr)
				if(glassInfoArr.find(item => item == '0') !=='undefind'){
					uni.showToast({
						title:'请完善镜框数据~'
					})
				}
			},
			updateMylove(){
				const loveItem = this.loveList[this.loveCurrent]
				const glassWidth = this.glassInfo.glassWidth
				const norseWidth = this.glassInfo.norseWidth
				const legWidth = this.glassInfo.legWidth
				console.log(loveItem.glassWidth)
				console.log(glassWidth)
				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){
				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 sku_value = this.skuValueArray.join('_')
				//根据sku_value获取对应的sk_id
				const itemSk_id =  this.skuList.filter(item=>item.sku_value == sku_value)[0].sk_id
				//修改sk_id
				this.skId = itemSk_id
			  if (this.current[index] !== i) {
			    this.current[index] = i
			  }
			  this.$forceUpdate()
			},
			comfirmChoose(){
				this.checkGlassInfo()
				this.updateMylove()
				const price = this.skuList.filter(item=>item.sk_id == this.skId)[0].real_price
				this.$emit("chooseCartModi",this.mp_id,this.skId,price,this.pid,this.count,this.cart_id,this.index)//添加购物车
				this.$emit("closeBottom")
			},
			addCart(){
				this.checkGlassInfo()
				this.updateMylove()
				const that = this
				const checkedSKUName = [that.goodInfo.attrList[0].meta_name,that.goodInfo.attrList[1].meta_name]
				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 = this.skuList.filter(item=>item.sk_id == this.skuList[j].sk_id)[0].real_price
				let sk_id = this.skuList[j].sk_id
				// console.log('选择的商品sk_id',sk_id,'选择的商品参数',checkedSKU)
				// console.log('mp_id',this.mp_id,'数量',this.count)
				this.$emit("addCart",this.mp_id,this.count,checkedSKU,sk_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) {
			  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) {
			  // 只能输入正浮点数或正数
			  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.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) {
			        // 添加用户验光单
			        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/",
			            }).then(({ mp_id: mpId }) => {
			              this.mp_id = mpId
			            })
			            flag = 1
			          } else {
			            uni.showToast({
			              title: '请确认您的验光数据',
			              icon: 'none',
			              duration: 3000,
			            })
			          }
			        }
			      }
			      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,
			            })
			          }
			          if (flag !== 0) {
			            store.dispatch('myLoveList/getLoveList', {
			              uid: this.$store.state.user.userInfo.uid,
			            })
			          }
			        } 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', {
			      sk_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?pid=${this.pid}&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>