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

<script>
	import MyCollapse from './compoents/MyCollapse.vue'
	import store from '@/store'

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

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

			}
		}

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