<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="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="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">
                <view
                  class="item2"
                  v-for="(one,i) in item.attr"
                  :key="i"
                  :class="{ active2: current[index] === i }"
                  @click="onClickItem(index, i)"
                >{{one.name}}</view>
              </view>
            </view>
          </UniCollapseItem>
        </UniCollapse>
        <view
          class="chooseRes"
          v-show="!show[index]"
        >* {{attrList[index].attr[current[index]].name}}</view>
      </view>
      <!-- <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,
      pid: 0,
      maxCount: 20,
      dataName: '', // 验光数据人员名称
      isDataName: false, // 是否是已存在的人员数据
      dataConfirm: false, // 已确认所输入验光数据
      opIsOpen: true,
      addDisabled: false,
      desDisabled: false,
      current1: 0,
      current2: 0,
      current3: 0,
      current: [],
      show: [],
      chooseRes1: {
        sku_name: 'Miss 黑二代【减龄自然】',
        sk_id: '128',
      },
      checkedData: {},
      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: [''], 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,
        },
      },
      pd: '', // 瞳距
      oldpd: '', // 用于判断用户是否改变瞳距
      kinds: 1, // kinds=1,提交为新增验光,2为修改
      mp_id: Number,
    }
  },
  computed: {
    attrList() {
      return this.$store.state.read.goodInfo.attrList
    },
    skuList() {
      return this.$store.state.read.goodInfo.skuList
    },
    mpList() {
      return this.$store.state.myLoveList.loveList
    },
  },
  onLoad({ pid }) {
    this.pid = pid
    store.dispatch('read/fetch', {
      pid,
    }).then(() => {
      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
    })
    store.dispatch('myLoveList/getLoveList')

    // 初始化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)
    }
  },
  methods: {
    // picker相关功能
    handleInput(e) {
      this.name = e.target.value
      this.isDataName = false
      console.log('e---->', e)
      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)
                console.log('mpList===>', 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()
    },
    onClickItem(index, i) {
      if (this.current[index] !== i) {
        this.current[index] = i
      }
      this.$forceUpdate()
    },
    // 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() {
      // 先处理验光部分的逻辑,如果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) {
          // console.log('kinds====>',this.kinds)
          // console.log('pickerindex=====>',this.pickerInfoList[0].nameIndex1)
          // console.log('this.pickerInfoChioce====>',type(this.pickerInfoChioce))
            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,
        })
        // 跳转到确认订单页面
        uni.navigateTo({
          url: `../confirmOrder/confirmOrder?pid=${this.pid}`,
        })
      }
    },
  },
}
</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;
      //       }
      //     }
      //   }
      // }
    .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;
          }
        }

      }
    }
    }
    }
  }
  .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: fixed;
    bottom: 0;
    left: 0;
  }
}
</style>