<template>
	<view class="content">
            <scroll-view scroll-y class="sroll-view">
			<view class="goods-details">
                    <swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="4000" :duration="500" >
                        <swiper-item v-for="(item) in infos" :key="item.goods_id">
			                <image :src="item.img" mode="scaleToFill"></image>
		                </swiper-item>
                    </swiper>
                    <view class="goods-price">
                        <text class="now-price">¥120</text>
                        <text class="old-price">¥198</text>
                        <text class="buy-num">349人购买过</text>
                    </view>
                    <view class="goods-name">
                        <text>眼镜名称名称名称名称名眼镜名称眼镜名称眼镜名称眼镜名称眼镜名称</text>
                    </view>
                    <view class="goods-courier">
                        <text>支持7天无理由退货</text>
                        <text class="courier-support">顺丰发货</text>
                    </view>
			</view>
			<view class="goods-form">
                <text class="p1">填写验光数据</text>
                <text class="p2">没有验光数据?请到线下眼镜店验光哦~</text>
                <view class="choice-use">
                    <text class="p3">您一般用眼镜:</text>
                    <image :src="tablist.read ? tabicon[0] : tabicon[1]" @click="changeRead"></image>
                    <text class="p4">阅读</text>   
                    <image :src="tablist.seeLong ? tabicon[0] : tabicon[1]" @click="changeSeeLong"></image>  
                    <text class="p5">看远处</text>   
                </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">{{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">{{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">{{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>
            </scroll-view>
			<view class="goods-submit">
				<button>下一步</button>
			</view>
	</view>
</template>

<script>

	export default {
        components: {
            
            },
		data() {
			return {
                name: '眼镜名称名称',
                infos: [
                    { goods_id: 0, img: '/static/img/goods/p11.png', name: '商品名称', price: '¥168', slogan:'1235人付款' },
					{ goods_id: 1, img: '/static/img/goods/p12.png', name: '商品名称', price: '¥168', slogan:'1235人付款' },
					{ goods_id: 2, img: '/static/img/goods/p12.png', name: '商品名称', price: '¥168', slogan:'1235人付款' },
					{ goods_id: 3, img: '/static/img/goods/p11.png', name: '商品名称', price: '¥168', slogan:'1235人付款' },
                ],
                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: function (option) { //option为object类型,会序列化上个页面传递的参数

        },
		methods: {
            changeRead() {
                this.tablist.read = !this.tablist.read
            // this.current = e.detail.current;
            },
            changeSeeLong() {
                this.tablist.seeLong = !this.tablist.seeLong
            },
            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 {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

	}
	.header{
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #fff;
		width: 100%;
		height: 64rpx;
		z-index: 999;
		position: fixed;
		top: 0;
        .header-name {
            display: flex;
            width: 684rpx;
            text {
				font-size: 36rpx;
				color: #333333;
				letter-spacing: -0.34px;
                margin-left: 54rpx;
		    }
            image {
                width: 11px;
                height: 18px;
                border-radius: 16px;
            }
        }

	}

    .sroll-view{
        height: 1760rpx;
    }

	.goods-details{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #fff;
        margin-bottom: 40rpx;
            .swiper {
                width: 684rpx;
                height: 512rpx;
                image {
                    width: 100%;
                    height: 100%;
                    border-radius: 16rpx;
                }
            }
                .goods-price {
                    display: flex;
                    justify-content: space-between;
                    padding: 40rpx 0 30rpx 0;
                    align-items: center;
                    width: 684rpx;
                    .now-price {
                        font-size: 18px;
                        color: #EB5D3B;
                    }
                    .old-price {
                        font-size: 14px;
                        color: #999999;
                        letter-spacing: -0.26px;
                        margin-left: -156px;
                        text-decoration: line-through;
                    }
                    .buy-num {
                        font-size: 14px;
                        color: #999999;
                        letter-spacing: -0.26px;
                        text-align: justify;
                    }
            }
            .goods-name {
                font-size: 16px;
                color: #333333;
                letter-spacing: -0.3px;
                text-align: justify;
                width: 684rpx;
            }
            .goods-courier {
                width: 684rpx;
                font-size: 10px;
                color: #999999;
                letter-spacing: -0.19px;
                padding: 10rpx 0;
                .courier-support {
                    padding-left: 20rpx;
                }
            }
        
	}
	.goods-form {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #fff;
        width: 100%;
        .choice-use{
            display: flex;
            margin-bottom: 40rpx;
            width: 684rpx;
            align-items: center;
            .p3 {
                font-size: 14px;
                color: #333333;
                letter-spacing: -0.26px;
                text-align: justify;
                line-height: 24px;
                width: 164px;
            }
            .p4 {
                font-size: 14px;
                color: #666666;
                letter-spacing: -0.26px;
                margin: 0 71rpx 0 24rpx ;
            }
            .p5 {
                font-size: 14px;
                color: #666666;
                letter-spacing: -0.26px;
                margin-left: 24rpx;
            }
        }
        .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;
			}
            
		}
	}
	}
	.goods-submit{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: fixed;
		bottom: 0;
		z-index: 999;
		width: 100%;
		height: 120rpx;
        background-color: #fff;
        button{
            width: 540rpx;
            height: 80rpx;
            font-size: 32rpx;
            color: #fff;
            background: #FF6B4A;
            border-radius: 20px;
            border-radius: 20px;
        }
	}

</style>