<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>
