<template>
	<view class="content">
		<view class="goodInfo">
			<view class="imageWrap">
				<image src="../../static/img/detail/d1.png" mode="aspectFill" style="width: 188rpx;height: 168rpx;"></image>
			</view>
			<view class="infoRight">
				<text class="goodName">商品名称商品名称商品名称名称名称商品名称名商品名称名</text>
				<text class="remarks">支持7天无理由退货 顺丰发货</text>
				<view class="priceBox">
					<view class="price">￥198</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="goods-data">
      <view class="opCollapse">
        <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>
    </view>
		<view class="choose">
			<view class="chooseItem_1 chooseItem">
				<UniCollapse  @change="change(1)" >
          <UniCollapseItem open=true title="款式挑选" showAnimation=false>
            <view class="chooseRes" v-show="show[1]">* {{chooseRes1}}</view>
            <view class="chooseItem_1_content">
              <view class="itemsWrap">
                <view class="item1" 
                v-for="(item,index) in chooseItem1" 
                :key="index" 
                :style="item.style"
                :class="{ active1: current1 === index }"
                @click="onClickItem1(index)"
                ></view>
              </view>
            </view>
          </UniCollapseItem>
				</UniCollapse>
				<view class="chooseRes" v-show="show[1]">* {{chooseRes1}}</view>
			</view>
			<view class="chooseItem_2 chooseItem ">
				<UniCollapse  @change="change(2)" >
          <UniCollapseItem open=true title="直径" showAnimation=false>
            <view class="chooseItem_1_content">
              <view class="itemsWrap">
                <view class="item2"
                v-for="(item,index) in chooseItem2" 
                :key="index" 
                :class="{ active2: current2 === index }"
                @click="onClickItem2(index)"
                >{{item.num}}</view>
              </view>
            </view>
          </UniCollapseItem>
				</UniCollapse>
				<view class="chooseRes" v-show="show[2]">* {{chooseRes2}}</view>
			</view>
			<view class="chooseItem_3 chooseItem">
				<UniCollapse  @change="change(3)" >
          <UniCollapseItem open=true title="度数" showAnimation=false>
            <view class="chooseItem_1_content">
              <view class="itemsWrap">
                <view class="item2"
                v-for="(item,index) in chooseItem3" 
                :key="index" 
                :class="{ active2: current3 === index }"
                @click="onClickItem3(index)"
                >{{item}}</view>
              </view>
            </view>
          </UniCollapseItem>
				</UniCollapse>
				<view class="chooseRes" v-show="show[3]">* {{chooseRes3}}</view>
			</view>
		</view>
		<view class="button" @click="toComfirmOrder">
			立即结算
		</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,
		},
		data() {
			return {
				count: 1,
        maxCount: 20,
        opIsOpen: true, 
				addDisabled: false,
				desDisabled: false,
				current1: 0,
				current2: 0,
				current3: 0,
				actice: [-1, -1, -1],
				show: [0, 0, 0, 0],
				chooseRes1:{ 
          sku_name: 'Miss 黑二代【减龄自然】',
          sk_id: '128',
				},
				chooseRes2: '14.0',
				chooseRes3: 0,
				chooseItem1: [
          {style:"opacity: 0.7;background-image: radial-gradient(50% 148%, #ECEAEA 50%, #8D8C8C 100%);",describ:"Miss 黑1代【减龄自然】"},				
          {style:"background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);",describ:"Miss 黑二代【防紫外线】"},			
          {style:"background-image: radial-gradient(50% 148%, #FDF8F6 50%, #94380B 100%);",describ:"Miss 黑3代【防紫外线】"},			
          {style:"background-image: radial-gradient(50% 148%, #FFFFFF 50%, #324A05 100%);",describ:"Miss 黑4代【防紫外线】"},			
          {style:"background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);",describ:"Miss 黑5代【防紫外线】"},			
          {style:"opacity: 0.7;background-image: radial-gradient(50% 150%, #F0EEE7 50%, #6F0838 100%);",describ:"Miss 黑6代【防紫外线】"},			
          {style:"background-image: radial-gradient(50% 143%, #AEA8A8 45%, #370B4E 100%);",describ:"Miss 黑7代【防紫外线】"},		
          {style:"background-image: radial-gradient(50% 148%, #FFFFFF 50%, #324A05 100%);",describ:"Miss 黑4代【防紫外线】"},			
          {style:"background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);",describ:"Miss 黑5代【防紫外线】"},			
          {style:"opacity: 0.7;background-image: radial-gradient(50% 150%, #F0EEE7 50%, #6F0838 100%);",describ:"Miss 黑6代【防紫外线】"},			
          {style:"background-image: radial-gradient(50% 143%, #AEA8A8 45%, #370B4E 100%);",describ:"Miss 黑7代【防紫外线】"},		
          {style:"background-image: radial-gradient(50% 148%, #FFFFFF 50%, #324A05 100%);",describ:"Miss 黑4代【防紫外线】"},			
          {style:"background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);",describ:"Miss 黑5代【防紫外线】"},			
          {style:"opacity: 0.7;background-image: radial-gradient(50% 150%, #F0EEE7 50%, #6F0838 100%);",describ:"Miss 黑6代【防紫外线】"},			
          {style:"background-image: radial-gradient(50% 143%, #AEA8A8 45%, #370B4E 100%);",describ:"Miss 黑7代【防紫外线】"},
				],
				chooseItem2:[
          {num:"14.0"},
          {num:"14.2"},
          {num:"14.4"},
          {num:"14.5"},
				],
				chooseItem3:[0,100,125,150,175,200,225,250,275,300,325,350,375,400,425,450,470,500,525,550,575,600,1000],
        // 度数相关数据                
				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}
				],
			};
		},
		computed: {
			attrList() {
				return this.$store.state.read.goodInfo.attrList;
			},
			skuList() {
				return this.$store.state.read.goodInfo.skuList;
			},
		},
		onLoad() {
			store.dispatch('read/fetch', {
				pid: 9,
			});
		},
		methods:{
			change(num) {
        this.show[num] = this.show[num] ? false : true;
			},
			onClickItem1(index) {
        if (this.current1 !== index) {
				this.current1 = index;
				this.chooseRes1 =this.chooseItem1[index].describ
        }
			},
			onClickItem2(index) {
        if (this.current2 !== index) {
				this.current2 = index;
				this.chooseRes2 =this.chooseItem2[index].num
        }
			},
			onClickItem3(index) {
        if (this.current3 !== index) {
				this.current3 = index;
				this.chooseRes3 =this.chooseItem3[index]
        }
			},
			counter(isadd){
				if (isadd) {
          this.count >= this.maxCount? this.addDisabled = true:this.count++;
				} else {
          this.count <= 1? this.desDisabled = true:this.count--;
				}
			},
			toComfirmOrder(){
				uni.navigateTo({
          url:'../confirmOrder/confirmOrder'
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		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;
			.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;
				.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;
            }
          }
        }
      }
    }
    .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-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;
              }
              .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;
            }
          }
        }
			}
		}
	}
		.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;
					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: fixed;
			bottom: 0;
			left: 0;
		}
	}
	
</style>
