<template>
  <view class="content">
    <view
      class="sheet"
      :class="{sheetShow:isShowBottom,sheeHide:!isShowBottom}"
      @touchmove.stop.prevent="moveHandle"
      @click="closeSheet()"
    >
      <scroll-view
        scroll-y="true"
        class="sheetView"
        :class="{sheetView_active:isShowBottom}"
        @click.stop="stopEvent()"
      >
        <view class="content">
          <view class="goodInfo">
            <view class="imageWrap">
              <image
                :src="goodInfo.img_index_url"
                mode="aspectFill"
                style="width: 188rpx;height: 168rpx;"
              ></image>
            </view>∂
            <view class="infoRight">
              <text class="goodName">{{goodInfo.p_name}}</text>
              <text class="remarks">支持7天无理由退货 顺丰发货</text>
              <view class="priceBox">
                <view class="price">¥{{goodInfo.priceArea.Min_Price || '暂无'}}</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="peopleChoose">
            <view class="title">选择使用人</view>
            <view class="loveList">
              <view
                class="peopleName"
                v-for="(item,index) in loveList"
                :key='index'
                :class="{ active2: loveCurrent === index }"
                @click="onClickLoveItem(index,item.name)"
              >
                {{item.name}}
              </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>
          <view
            class="button"
            @click.native="addCart"
            v-if="isCart"
          >
            加入购物车
          </view>
          <view
            class="button"
            @click="toComfirmOrder"
            v-else
          >
            立即结算
          </view>
        </view>
      </scroll-view>
    </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,
  },
  props: {
    isShowBottom: Boolean,
    pid: Number,
    goodInfo: Object,
    isCart: Boolean,
  },
  data() {
    return {
      loveCurrent: Number,
      count: 1,
      // pid: 0,
      maxCount: 20,
      dataName: '', // 验光数据人员名称
      isDataName: false, // 是否是已存在的人员数据
      dataConfirm: false, // 已确认所输入验光数据
      opIsOpen: true,
      addDisabled: false,
      desDisabled: false,
      current: [],
      show: [],
      checkedData: {},
      // 度数相关数据
      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: {
    loveList() {
      // console.log('**********loveList',this.$store.state.myLoveList.loveList)
      return this.$store.state.myLoveList.loveList || []
    },
    attrList() {
      const attrList = this.$store.state.read.goodInfo.attrList
      if (attrList !== undefined) {
        return attrList
      } else {
        return []
      }
    },
    skuList() {
      return this.$store.state.read.goodInfo.skuList
    },
    mpList() {
      return this.$store.state.myLoveList.loveList
    },
  },
  created() {
    const pid = this.pid
    console.log('this.goodInfo', this.goodInfo)
    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', {
      uid: this.$store.state.user.userInfo.uid,
    })
    // 初始化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)
    }
  },
  name: 'bottomSheet',
  methods: {
    addCart() {
      const that = this
      const checkedSKUName = [that.goodInfo.attrList[0].meta_name, that.goodInfo.attrList[1].meta_name]
      const checkedSKU = []
      let j
      for (let i = 0; i < that.current.length; i++) {
        checkedSKU.push(that.goodInfo.attrList[i].attr[that.current[i]])
        // console.log('i', i, j, i !== this.current.length - 1)
        if (i !== this.current.length - 1) {
          // 后续需修改算法:目前暂定只有两个参数选择,后续若有多个参数需要修改实现自适应
          j = this.current[i] * this.attrList[1].attr.length
        } else {
          j += this.current[i]
        }
      }
      const sk_id = this.skuList[j].sk_id
      console.log('选择的商品sk_id', sk_id, '选择的商品参数', checkedSKU)
      this.$emit('addCart', this.mp_id, this.count, checkedSKU, sk_id)// 添加购物车
      this.$emit('closeBottom')// 关闭弹窗
    },
    onClickLoveItem(index, name) {
      const loveList = this.loveList
      for (let index = 0; index < loveList.length; index++) {
        if (name === loveList[index].name && name !== this.name) {
          this.isDataName = true
          this.kinds = 2
          this.name = loveList[index].name
          this.pd = loveList[index].pd
          this.mp_id = loveList[index].mp_id
          this.oldname = loveList[index].name
          this.oldpd = loveList[index].pd
          this.pickerInfoList[0].nameArray1.unshift(loveList[index].leftSph)
          this.pickerInfoList[0].nameArray2.unshift(loveList[index].rightSph)
          this.pickerInfoList[1].nameArray1.unshift(loveList[index].leftCyl)
          this.pickerInfoList[1].nameArray2.unshift(loveList[index].rightCyl)
          this.pickerInfoList[2].nameArray1.unshift(loveList[index].leftAxi)
          this.pickerInfoList[2].nameArray2.unshift(loveList[index].rightAxi)
          this.pickerInfoList[3].nameArray1.unshift(loveList[index].in_time.toString().slice(0, 4))
          if (loveList[index].in_time.toString().slice(5, 6) === 0) {
            this.pickerInfoList[3].nameArray2.unshift(loveList[index].in_time.toString().slice(6, 7))
          } else {
            this.pickerInfoList[3].nameArray2.unshift(loveList[index].in_time.toString().slice(5, 7))
          }
          if (loveList[index].in_time.toString().slice(8, 9) === 0) {
            this.pickerInfoList[3].nameArray3.unshift(loveList[index].in_time.toString().slice(9, 10))
          } else {
            this.pickerInfoList[3].nameArray3.unshift(loveList[index].in_time.toString().slice(8, 10))
          }
        }
      }
      this.name = name
      this.loveCurrent = index
    },
    closeSheet() {
      this.$emit('closeBottom')
    },
    // @click.stop防止事件冒泡
    stopEvent() {},
    // 不让页面滚动
    moveHandle() {},
    // 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()
    },
    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) {
            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}&count=${this.count}&name=${this.name}`,
        })
      }
    },
  },
}
</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;
          }
        }
      }
    }
  }
  .peopleChoose {
    width: 100%;
    min-height: 200rpx;
    border-radius: 16rpx;
    background-color: #ffffff;
    box-sizing: border-box;
    padding: 36rpx;
    margin: 10px 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    .title {
      font-size: 16px;
      color: #333333;
      letter-spacing: -0.3px;
      text-align: justify;
      line-height: 24px;
      margin: 4px 0;
    }
    .loveList {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-items: center;
      padding-top: 24rpx;
      width: 100%;
      .peopleName {
        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;
      }
      .active2 {
        background: rgba(255, 107, 74, 0.15);
        color: #ff6b4a;
      }
    }
  }
  .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-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-size: 12px;
        color: #666666;
        letter-spacing: 0;
        .bodyBox {
          margin-top: 15px;
          .names {
            font-size: 12px;
            color: #151515;
            letter-spacing: 0;
            text-align: justify;
            line-height: 17px;
            margin-left: 5px;
            margin-right: 10px;
          }
          text {
            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%;
        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 {
    position: fixed;
    z-index: 10;
    width: 100%;
    height: 112rpx;
    background-color: #ff6b4a;
    font-size: 16px;
    color: #ffffff;
    line-height: 112rpx;
    text-align: center;
    // position: absolute;
    bottom: 0;
    left: 0;
  }
}
/* sheet弹窗 */
.sheet {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 150%;
  left: 0upx;
  bottom: 0upx;
  right: 0upx;
  background: rgba(0, 0, 0, 0.3);
  z-index: 10000;
}

/* 显示时候的动画默认0.5s */
.sheetView {
  width: 100%;
  height: 0upx;
  position: absolute;
  bottom: 0upx;
  background: white;
  z-index: 10001;
  transition: all 0.5s;
}
.sheetShow {
  top: 0upx !important;
}
/* 关闭时的动画,时间自己可以设置0.5s*/
.sheeHide {
  top: 120% !important;
  transition: all 0.5s;
}

/* 项目需求根据设计稿要展示的高度,超出这个高度就自动滚动*/
.sheetView_active {
  height: 942upx;
}
</style>