<template>
  <div class="purchaseDivAllNew">
    <div class="bgClass" ref="pruchasePrize" @click="styleClick('click', 'pruchasePrize')" @mousemove="styleClick('mousemove', 'pruchasePrize')" @mouseout="styleClick('mouseout')" :style="styleData.bgClass">
      <div :style="styleData.timeIcon"></div>
      <div v-if="timeType == 1" :style="styleData.timeMsg">距活动开始倒计时：</div>
      <div v-if="timeType == 2" :style="styleData.timeMsg">距下单结束倒计时：</div>
      <div v-if="timeType == 3" :style="styleData.timeMsg">距活动结束倒计时：</div>
      <div class="orderEndTimeDiv" :style="styleData.orderEndTimeDiv" :key="timer">
        <van-count-down class="countDownStyle1" :style="styleData.countDownStyle1" :time="orderEndTime - new Date().getTime()" format="DD 天 HH 时 mm 分 ss 秒">
          <template #default="timeData">
            <div class="block1">
              <div style="display: flex;">
                <div class="block" v-if="timeData.days >= 100" :style="styleData.block">{{ parseInt(timeData.days / 100) % 10 }}</div>
                <div class="block" v-if="timeData.days >= 10" :style="styleData.block">{{ parseInt(timeData.days / 10) % 10 }}</div>
                <div class="block" v-if="timeData.days < 10" :style="styleData.block">0</div>
                <div class="block" :style="styleData.block">{{ timeData.days % 10 }}</div>
              </div>
            </div>
            <div class="colon">天</div>
            <div class="block1">
              <div style="display: flex;">
                <div class="block" v-if="timeData.hours >= 100" :style="styleData.block">{{ parseInt(timeData.hours / 100) % 10 }}</div>
                <div class="block" v-if="timeData.hours >= 10" :style="styleData.block">{{ parseInt(timeData.hours / 10) % 10 }}</div>
                <div class="block" v-if="timeData.hours < 10" :style="styleData.block">0</div>
                <div class="block" :style="styleData.block">{{ timeData.hours % 10 }}</div>
              </div>
            </div>
            <div class="colon">时</div>

            <div class="block1">
              <div style="display: flex;">
                <div class="block" v-if="timeData.minutes >= 100" :style="styleData.block">{{ parseInt(timeData.minutes / 100) % 10 }}</div>
                <div class="block" v-if="timeData.minutes >= 10" :style="styleData.block">{{ parseInt(timeData.minutes / 10) % 10 }}</div>
                <div class="block" v-if="timeData.minutes < 10" :style="styleData.block">0</div>
                <div class="block" :style="styleData.block">{{ timeData.minutes % 10 }}</div>
              </div>
            </div>
            <div class="colon">分</div>
            <div class="block1">
              <div style="display: flex;">
                <div class="block" v-if="timeData.seconds >= 100" :style="styleData.block">{{ parseInt(timeData.seconds / 100) % 10 }}</div>
                <div class="block" v-if="timeData.seconds >= 10" :style="styleData.block">{{ parseInt(timeData.seconds / 10) % 10 }}</div>
                <div class="block" v-if="timeData.seconds < 10" :style="styleData.block">0</div>
                <div class="block" :style="styleData.block">{{ timeData.seconds % 10 }}</div>
              </div>
            </div>
            <div class="colon">秒</div>
          </template>
        </van-count-down>
      </div>
    </div>
    <!-- <div :style="styleData.topPic"></div> -->
    <div v-if="consumptionGiftPrizeVoList.length > 1" :style="styleData.previewBox">
      <div class="previewUl">
        <!-- :style="styleData.previewItem"  -->
        <!-- :class="currentIndex == index ? 'selectedBox':'ordinaryBox'" -->
        <div v-for="(item,index) in consumptionGiftPrizeVoList" :style="currentIndex == index ? styleData.selectedBox : styleData.previewItem" :data-index="index" @click="jumpIndex(index)">
          <div :style="currentIndex == index ? styleData.selectedPreviewImgBox : styleData.previewImgBox">
            <div v-if="item.status == 8 || (reservationType == 0 && item.status == 1)" :style="styleData.reservationSmall">已预约</div>
            <img :src="item.showImg" alt="" :style="styleData.previewImg" class="previewImg">
          </div>
          <div :style="styleData.previewName" v-if="item.prizeName.length <= 7">{{item.prizeName}}</div>
          <van-notice-bar v-if="item.prizeName.length > 7" :style="styleData.previewName" :speed="20" scrollable :text="item.prizeName" />
        </div>
      </div>
    </div>
    <div class="swipe_box" v-if="consumptionGiftPrizeVoList">
      <!-- :autoplay="5000" -->
      <van-swipe ref="swiper" class="my-swipe" indicator-color="white" :style="styleData.swiperAll" @change="onChange">
        <van-swipe-item v-for="(item,index) in consumptionGiftPrizeVoList" :key="index" :style="styleData.swiperItem">
          <div v-if="item.status == 8 || (reservationType == 0 && item.status == 1)" :style="styleData.reservation">已预约</div>
          <div :style="styleData.fillAddress" v-if="item.prizeType == 3 && reservationType == 0 && (item.status == 1 || item.status == 8)" 
          @click="fillAddressClick(item)">
            {{ item.isAddress == 0 ? '填写地址' : '修改地址' }}
          </div>
          <!-- 满足条件 -->
          <div v-if="orderType == '0'" :style="styleData.fullMsg">
            {{ computeType== '0' ? '累计' : '单次' }}满<span :style="styleData.fullSpan">{{item.num}}</span>元即送
          </div>
          <div v-if="orderType == '1'" :style="styleData.fullMsg">
            {{ computeType== '0' ? '累计' : '单次' }}满<span :style="styleData.fullSpan">{{item.num}}</span>单即送
          </div>
          <div v-if="orderType == '2'" :style="styleData.fullMsg">
            {{ computeType== '0' ? '累计' : '单次' }}满<span :style="styleData.fullSpan">{{item.num}}</span>件即送
          </div>

          <div :style="styleData.skuBox">
            <!-- 商品图片 -->
            <div :style="styleData.skuPicture">
              <van-image style="width: 85%;height: 85%;" :src="item.showImg" @click="previewImage(item.showImg)" />
            </div>
            <!-- 中间区域 -->
            <div :style="styleData.skuCenter">
              <!-- 奖品名称 -->
              <div :style="styleData.prizeName">
                {{item.prizeName}}
              </div>
              <!-- 奖品剩余 -->
              <div :style="styleData.stock">
                奖品剩余：
                <span :style="styleData.stockSpan">{{item.stock}}份</span>
              </div>
              <!-- 进度条 -->
              <div :style="styleData.progress" :class="keyData.progressLineClass">
                <van-progress v-if="orderType == '0' && computeType == 0" :percentage='(item.receivingPrice/item.num)*100 >= 100 ? 100 : (item.receivingPrice/item.num)*100' pivot-color="#FF7248" stroke-width="8" :color="keyData.color" track-color="#FEE46A" :show-pivot=false />
                <van-progress v-if="orderType == '1' && computeType == 0" :percentage='(item.receivingNum/item.num)*100 >= 100 ? 100 : (item.receivingNum/item.num)*100' pivot-color="#FF7248" stroke-width="8" :color="keyData.color" track-color="#FEE46A" :show-pivot=false />
                <van-progress v-if="orderType == '2' && computeType == 0" :percentage='(item.receivingSkuNum/item.num)*100 >= 100 ? 100 : (item.receivingSkuNum/item.num)*100' pivot-color="#FF7248" stroke-width="8" :color="keyData.color" track-color="#FEE46A" :show-pivot=false />
              </div>
              <!-- <div :style="styleData.giftBox"></div> -->
              <div :style="styleData.sureMsg" v-if="orderType == '0' && computeType == 0">
                <div>
                  已下单 <span :style="styleData.sureSpan">{{item.orderPrice}}元</span>|已确认<span :style="styleData.sureSpan">{{item.receivingPrice}}元</span>
                </div>
              </div>
              <div :style="styleData.sureMsg" v-if="orderType == '1' && computeType == 0">
                <div>
                  已下单 <span :style="styleData.sureSpan">{{item.orderNum}}单</span>｜已确认<span :style="styleData.sureSpan">{{item.receivingNum}}单</span>
                </div>
              </div>
              <div :style="styleData.sureMsg" v-if="orderType == '2' && computeType == 0">
                <div>
                  已下单 <span :style="styleData.sureSpan">{{item.orderSkuNum}}件</span>｜已确认<span :style="styleData.sureSpan">{{item.receivingSkuNum}}件</span>
                </div>
              </div>
              <div :style="styleData.sureMsg2" v-if="orderType == '0'">确认收货后订单金额计入活动有效金额</div>
              <div :style="styleData.sureMsg2" v-if="orderType == '1'">确认收货后订单计入活动有效笔数</div>
              <div :style="styleData.sureMsg2" v-if="orderType == '2'">确认收货后商家件数计入活动有效件数</div>
            </div>
            <!-- 按钮区域 -->
            <div :style="styleData.btnBox">
              <div v-if="actStatus == 1" :style="styleData.greyBtn">活动未开始</div>
              <div v-if="actStatus == 2" :style="styleData.greyBtn">活动已结束</div>
              <div v-if="actStatus == 3">
                <div v-if="item.status == 0" :style="styleData.greyBtn" @click="toastFun(0)">不满足条件</div>
                <div v-if="reservationType == 0 && item.status == 1" :style="styleData.highlightXianBtn" @click="reservationCancelFun(item)">取消预约</div>
                <div v-if="item.status == 1 && grantType == 0" :style="styleData.highlightBtn" @click="receiveClick(item)">领取奖品</div>
                <div v-if="item.status == 2" :style="styleData.greyBtn" @click="toastFun(2)">当前已领</div>
                <div v-if="item.status == 3" :style="styleData.greyBtn" @click="toastFun(3)">奖品已发完</div>
                <div v-if="item.status == 5" :style="styleData.greyBtn" @click="toastFun(5)">已达活动上限</div>
                <div v-if="item.status == 6" :style="styleData.greyBtn" @click="toastFun(6)">领取失败</div>
                <div v-if="item.status == 7" :style="styleData.highlightBtn" @click="reservationFun(item)">预约奖品</div>
                <div v-if="item.status == 8" :style="styleData.highlightXianBtn" @click="reservationCancelFun(item)">取消预约</div>
                <div v-if="item.status == 8">
                  <!-- 满额 -->
                  <div :style="styleData.greyBtn" v-if="orderType == '0' && item.receivingPrice < item.num" @click="toastFun(10)">不满足条件</div>
                  <!-- 满次 -->
                  <div :style="styleData.greyBtn" v-if="orderType == '1' && item.receivingNum < item.num" @click="toastFun(10)">不满足条件</div>
                  <!-- 满件 -->
                  <div :style="styleData.greyBtn" v-if="orderType == '2' && item.receivingSkuNum < item.num" @click="toastFun(10)">不满足条件</div>
                </div>
                <div v-if="item.status == 9" :style="styleData.greyBtn" @click="toastFun(9,item)">不可预约</div>
              </div>
            </div>
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 流程图 -->
    <div :style="styleData.processBox">
      <!-- grantType 0:手动 1:自动 -->
      <!-- reservationType 0：可预约，提前锁定库存 1:不可预约，先到先得 -->
      <!-- 手动领奖+不预约 -->
      <div :style="styleData.processPic1" v-if="grantType == 0 && reservationType == 1"></div>
      <!-- 手动领奖 + 预约 -->
      <div :style="styleData.processPic2" v-if="grantType == 0 && reservationType == 0"></div>
      <!-- 自动发奖 + 预约 -->
      <div :style="styleData.processPic3" v-if="grantType == 1 && reservationType == 0"></div>
    </div>
    <div :style="styleData.conditions" @click="conditionClick"></div>
  </div>
</template>

<script>

  import Vue from 'vue';
  import { CountDown, Progress, Dialog, ImagePreview, NoticeBar } from 'vant';
  import { Image as VanImage } from 'vant';
  Vue.use(CountDown);
  Vue.use(Progress);
  Vue.use(Dialog);
  Vue.use(VanImage);
  Vue.use(ImagePreview);
  Vue.use(NoticeBar);
  import apis1 from '../../../util/apis1.js';
  let { consumptionGift, immediatelyDraw, appointmentActivityApi, cancelAppointmentApi } = apis1;
  import { conditionPopService1 } from '../../../util/hdzxtcomCreate.js';
  import { PrizeResultPopComService, NoPrizeResultPopComService, commonNoticePopComService,AddressPopComService } from '../../../util/hdzxtcomCreate.js';
  export default {
    props: ['datas', 'styleData', 'keyData', 'isTemplate', 'templateData', 'modifyContent', 'isWebClick'],
    data() {
      return {
        timer: new Date().getTime(),
        orderEndTime: null,
        consumptionGiftPrizeVoList: [],
        orderType: '',
        basicData: {},
        receiveStatus: '0',
        currentIndex: 0,
        computeType: 0,
        grantType: 0,
        reservationType: 1,
        actStatus: 0,
        newAct:0,
        timeType:2
      };

    },
    created() {
      this.initData();
    },
    methods: {
      async initData() {
        if (this.isTemplate) {
          console.log(this.templateData,"this.templateData")
          if (this.templateData) {
            // let activityCommonRule = [{
            //   prizeName: this.templateData.consumptionGift.draw.prizeList[0].prizeName,
            //   showImg: this.templateData.consumptionGift.draw.prizeList[0].showImg,
            //   num: this.templateData.consumptionGift.draw.prizeList[0].num,
            //   stock: this.templateData.consumptionGift.draw.prizeList[0].totalPrizeNum,
            //   orderPrice: 0,
            //   receivingPrice: 0,
            //   orderNum: 0,
            //   receivingNum: 0,
            //   orderSkuNum: 0,
            //   receivingSkuNum: 0,
            //   status: '0' // 0 可以领取 1可以领取的置灰 2 以领取 3已领光 4 不满足条件（进店框框）
            // }]
            this.templateData.consumptionGift.draw.prizeList.map(item=>{
              item.stock = item.totalPrizeNum
              item.orderPrice = 0
              item.receivingPrice = 0
              item.orderNum = 0
              item.receivingNum = 0
              item.orderSkuNum = 0
              item.receivingSkuNum = 0
              item.status = '0'
            })
            this.orderEndTime = this.templateData.consumptionGift.rules.orderEndTime
            this.orderType = this.templateData.consumptionGift.rules.orderType
            this.grantType = this.templateData.consumptionGift.rules.grantType
            this.reservationType = this.templateData.consumptionGift.rules.reservationType
            this.consumptionGiftPrizeVoList = this.templateData.consumptionGift.draw.prizeList
            this.computeType = this.templateData.consumptionGift.rules.computeType
          } else {
            let activityCommonRule = [{
              prizeName: '积分',
              showImg: '//img10.360buyimg.com/imgzone/jfs/t1/172629/8/10529/9649/60a4cb50Edc2ee40a/b53b1246de5f2089.png',
              num: 20,
              stock: 5,
              orderPrice: 0,
              receivingPrice: 0,
              orderNum: 0,
              receivingNum: 0,
              orderSkuNum: 0,
              receivingSkuNum: 0,
              status: '0' // 0 可以领取 1可以领取的置灰 2 以领取 3已领光 4 不满足条件（进店框框）
            }]
            this.orderEndTime = 0

            this.consumptionGiftPrizeVoList = activityCommonRule
            let templateId = sessionStorage.getItem('templateId')
            if (templateId == '20210824190900zxjyx0111278' || templateId == '20210824190900zxjyx011127801' || templateId == "2022112501xfylme") {
              this.orderType = '0'
            } else if (templateId == '20220902xfylmj01' || templateId == '20220902xfylmj0101' || templateId == '20221125xfylmj') {
              this.orderType = '2'
            } else if (templateId == '20220902xfylmd01' || templateId == '20220902xfylmd0101' || templateId == "20221125xfylmc") {
              this.orderType = '1'
            } else {
              this.orderType = '0'
            }
          }
        } else {
          consumptionGift(res => {
            this.orderType = res.data.consumptionGiftCRuleVo.orderType
            this.receiveStatus = res.data.consumptionGiftCRuleVo.receiveStatus
            this.computeType = res.data.consumptionGiftCRuleVo.computeType
            this.grantType = res.data.consumptionGiftCRuleVo.grantType
            this.reservationType = res.data.consumptionGiftCRuleVo.reservationType
            this.newAct = res.data.consumptionGiftCRuleVo.newAct
            sessionStorage.setItem("newAct", res.data.consumptionGiftCRuleVo.newAct);
            this.consumptionGiftPrizeVoList = res.data.consumptionGiftPrizeVoList
            this.basicData = res.data
            this.publicData.$emit("skuType", res.data.consumptionGiftCRuleVo.skuType);
            this.publicData.$emit("priceType", res.data.consumptionGiftCRuleVo.priceType);
            // if (new Date().getTime() < res.data.consumptionGiftCRuleVo.activityStartTime) {
            //   this.orderEndTime = ''
            //   console.log(this.orderEndTime, "orderEndTime");
            // } else {
            //   this.orderEndTime = res.data.consumptionGiftCRuleVo.orderEndTime
            // }
            
            // 从接口数据计算actStatus，避免首次加载时sessionStorage尚未写入的时序问题
            var nowTime = new Date().getTime();
            var ruleVo = res.data.consumptionGiftCRuleVo;
            if (nowTime > ruleVo.activityEndTime) {
              this.actStatus = 2; // 活动已结束
            } else if (nowTime >= ruleVo.activityStartTime && nowTime <= ruleVo.activityEndTime) {
              this.actStatus = 3; // 活动进行中
            } else {
              this.actStatus = 1; // 活动未开始
            }
            this.timer = new Date().getTime();
            if(this.actStatus == 1){
              this.timeType = 1
              this.orderEndTime = res.data.consumptionGiftCRuleVo.activityStartTime
            }else{
              if(res.data.consumptionGiftCRuleVo.orderEndTime < res.data.consumptionGiftCRuleVo.activityStartTime){
                this.timeType = 1
                this.orderEndTime = res.data.consumptionGiftCRuleVo.activityStartTime
              }else if(res.data.consumptionGiftCRuleVo.orderEndTime == res.data.consumptionGiftCRuleVo.activityEndTime){
                this.timeType = 3
                this.orderEndTime = res.data.consumptionGiftCRuleVo.activityEndTime
              }else{
                this.timeType = 2
                this.orderEndTime = res.data.consumptionGiftCRuleVo.orderEndTime
              }
            }
          });
        }
      },
      receiveClick(item) {
        Dialog.confirm({
          cancelButtonText: '再想想',
          confirmButtonText: '确认领取',
          message: this.receiveStatus == 0 ? '本活动奖品仅限选择一件领取，一旦确认领取，将无法再领取其他奖品。请确认是否领取？' : '是否确认领取当前奖品？',
        })
          .then(() => {
            this.prizeStstusClick(item)
          })
          .catch(() => {

          });
      },
      toastFun(type,row) {
        if (type == 0) {
          if(this.reservationType == 0){
            this.$toast('未满足预约条件，请先下单付款并达到当前奖品门槛~');
          }else if(this.reservationType == 1){
            this.$toast('未满足领取条件，请先确认收货并达到当前奖品门槛~');
          }else {
            this.$toast('未满足当前奖品获取条件~');
          }
          return
        } else if (type == 2) {
          this.$toast('您已领取当前奖品~');
          return
        } else if (type == 3) {
          this.$toast('奖品已被领完，感谢参与~');
          return
        } else if (type == 5) {
          this.$toast('已达到活动奖品领取上限，感谢参与~');
          return
        } else if (type == 9) {
          this.$toast('您已预约其他奖品，需取消预约后再试~');
          return
        } else if (type == 10) {
          this.$toast('未满足领取条件，请先确认收货并达到当前奖品门槛~');
          return
        }
      },
      reservationFun(row) {
        Dialog.confirm({
          cancelButtonText: '再想想',
          confirmButtonText: '预约',
          message: this.receiveStatus == 0 ? `<div>预约后，将为您预留当前奖品份额，达到条件后${this.grantType == 0 ? '【需返回活动手动领取】':'【系统自动发奖】'}。本活动仅可预约<span style="color: red;">1份</span>奖品，是否确认预约？</div>` : 
          `<div>预约后，将为您预留当前奖品份额，达到条件后${this.grantType == 0 ? '【需返回活动手动领取】':'【系统自动发奖】'}，是否确认预约？</div>`,
        }).then(()=>{
          appointmentActivityApi(row.prizeInfoId, res => {
          if (res.data.appointmentResult) {
            sessionStorage.setItem("prizeInfoId",row.prizeInfoId)
            let obj = {
              type: 'success',
              title: '奖品预约成功',
              address: {
                show: row.prizeType == 3 ? true : false,
              },
              msg: "恭喜！您已成功预约" + "【" + row.prizeName + "】" + "，份额为你保留中~" +
                "\n提示：预约后如订单取消、退款，预约将自动取消" +
                (this.grantType == 1 && row.prizeType == 3
                  ? "\n注意：请在预约成功2小时内完成实物奖品收货信息填写，否则将导致发奖失败~~"
                  : "")
            }
            commonNoticePopComService.create(obj, this.styleData, submit => {
              commonNoticePopComService.close();
              if (submit) {
                this.initData();
              }
            });
          } else {
            let msg = ''
            if (res.data.status == 3) {
              msg = '该奖品已被领完，请关注其他可选奖品，或稍后再试。'
            } else if (res.data.status == 0) {
              msg = '暂无满足条件订单，请下单后再来吧。'
            } else if (res.data.status == 9) {
              msg = '本活动每位用户仅限预约1件奖品，您已预约过其他奖品。'
            } else {
              msg = '活动太拥挤，请稍后再试。'
            }
            let obj = {
              type: 'fail',
              title: '奖品预约失败',
              address: {
                show: false,
                prizeInfoId: row.prizeInfoId,
              },
              msg: msg
            }
            commonNoticePopComService.create(obj, this.styleData, submit => {
              commonNoticePopComService.close();
              if (submit) {
                this.initData();
              }
            });
          }
        })
        })
      },
      reservationCancelFun(row) {
        Dialog.confirm({
          cancelButtonText: '再想想',
          confirmButtonText: '确认取消',
          message: "取消后，您将释放当前奖品的预留资格，且无法保证后续还能领取该奖品。如仍需参与，请重新预约。",
        }).then(() => {
          cancelAppointmentApi(row.prizeInfoId, res => {
            if (res.data.appointmentResult) {
              let obj = {
                type: 'success',
                title: '取消预约成功 ',
                address: {
                  show: false,
                  prizeInfoId: row.prizeInfoId,
                },
                msg: res.data.message
              }
              commonNoticePopComService.create(obj, this.styleData, submit => {
                commonNoticePopComService.close();
                if (submit) {
                  this.initData();
                }
              });
            }else{
              let obj = {
              type: 'fail',
              title: '取消预约失败',
              address: {
                show: false,
                prizeInfoId: row.prizeInfoId,
              },
              msg: res.data.message
            }
            commonNoticePopComService.create(obj, this.styleData, submit => {
              commonNoticePopComService.close();
              if (submit) {
                this.initData();
              }
            });
            }
          })
        })
      },
      //奖品状态点击
      prizeStstusClick(item) {
        console.log(item);
        if (this.isTemplate) {
          this.$toast('活动预览，仅供参考');
          return;
        }
        let actStatus4 = sessionStorage.getItem('actStatus');
        if (actStatus4 == 1) {
          this.$toast('活动尚未开始');
          return;
        }
        if (actStatus4 == 2) {
          this.$toast("活动已结束");
          return;
        }
        if (item.status == 1) {
          sessionStorage.setItem("prizeInfoId",item.prizeInfoId)
          //正常领奖
          immediatelyDraw(item.prizeInfoId, receiveData => {
            if (receiveData.resp_code == 0) {
              if (receiveData.data.result == true) {
                this.initData();
                this.publicData.$emit('isNotyFiceWinnerReorrd', true, this.isTemplate);
                var obj = {
                  datas: {},
                  keyData: {
                    prizeUrl: 'showImg',
                    prizeName: 'prizeName',
                    prizeType: 'prizeType',
                    priceInfo: 'priceInfo',
                    discountType: 'discountType',
                    couponType: 'couponType'
                  }
                };
                obj.datas = receiveData.data;
                PrizeResultPopComService.create(obj, receiveData.data, this.styleData, submit => {
                  PrizeResultPopComService.close();
                });
              } else {
                NoPrizeResultPopComService.create(this.styleData, submit => {
                  NoPrizeResultPopComService.close();
                });
                this.initData();
              }
            } else if (receiveData.resp_code == 60010) {
              this.$toast('抱歉，奖品已发完~');
              setTimeout(() => {
                this.initData();
              }, 1000);

            }
          });
        }
      },
      //点击可修改位置的方法
      styleClick(type, refName) {
        if (this.isWebClick) {
          //传值给B端
          let byValue = {
            modifyContent: this.modifyContent,
            refName: refName,
            styleData: this.styleDataNew,
            isCustomSwitching: this.receive,
            c_this: this,
            styleDataOld: this.styleDataOld
          };
          this.$emit('opertaionCom', type, byValue);
        }
      },
      //查看获奖条件
      conditionClick() {
        if (this.isTemplate) {
          this.$toast('活动预览，仅供参考');
          return;
        }
        this.stopScroll();
        conditionPopService1.create(this.isTemplate, this.styleData, this.basicData, submit => {
          conditionPopService1.close();
        });
      },
      // 预览图片
      previewImage(img) {
        ImagePreview({
          images: [img],
          showIndex: false,
          loop: false,
          startPosition: 0
        });
      },
      onChange(index) {
        this.currentIndex = index;
        // 同样触发滚动到可视区域的逻辑
        this.$nextTick(() => {
          const previewUl = document.querySelector('.previewUl');
          const items = previewUl.querySelectorAll('[data-index]');
          const currentItem = items[index];

          if (currentItem && previewUl) {
            const containerWidth = previewUl.offsetWidth;
            const itemWidth = currentItem.offsetWidth;
            const itemLeft = currentItem.offsetLeft;

            // 计算需要滚动的位置，使当前项居中
            const scrollLeft = itemLeft - (containerWidth / 2) + (itemWidth / 2);
            previewUl.scrollTo({
              left: scrollLeft,
              behavior: 'smooth'
            });
          }
        });
      },
      jumpIndex(index) {
        this.currentIndex = index;
        this.$refs.swiper.swipeTo(index);
        // 在下一个DOM更新周期滚动到可视区域
        this.$nextTick(() => {
          const previewUl = document.querySelector('.previewUl');
          const items = previewUl.querySelectorAll('[data-index]');
          const currentItem = items[index];

          if (currentItem && previewUl) {
            const containerWidth = previewUl.offsetWidth;
            const itemWidth = currentItem.offsetWidth;
            const itemLeft = currentItem.offsetLeft;

            // 计算需要滚动的位置，使当前项居中
            const scrollLeft = itemLeft - (containerWidth / 2) + (itemWidth / 2);
            previewUl.scrollTo({
              left: scrollLeft,
              behavior: 'smooth'
            });
          }
        });
      },
      fillAddressClick(row){
        sessionStorage.setItem("prizeInfoId",row.prizeInfoId)
         var datas = {
          isEditAddress: true,
          isAlLookAddress: false,
        };
        AddressPopComService.create(datas, this.styleData, (submit) => {
          AddressPopComService.close();
          if (submit) {
            this.initData();
          }
        });
      }
    }
  };
</script>

<style lang="scss">
  .purchaseDivAllNew {
    .orderEndTimeDiv {
      font-size: 0.3rem;
      font-weight: bold;
      display: -webkit-box;
      display: -ms-flexbox;
      -webkit-box-align: center;
      -ms-flex-align: center;
      height: 100%;
      background: #8f3f37;
      height: 0.4rem;
      border-radius: 0.2rem;
      padding-left: 0.2rem;
      padding-right: 0.2rem;
    }
    .van-swipe__indicators {
      display: none;
    }
  }
  .previewUl {
    display: flex;
    overflow-x: auto;
    width: 6.9rem;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
    align-items: center;
  }
  .previewUl::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
  // .selectedBox {
  //   transform: scale(1);
  //   transform-origin: center;
  //   z-index: 10;
  //   position: relative;
  //   margin: 0 5px;
  //   width: 1.97rem !important;
  //   height: 2.25rem !important;
  //   .previewImgBox {
  //     width: 1.97rem !important;
  //     height: 1.3rem !important;
  //   }
  //   .previewImg {
  //     width: 1.2rem !important;
  //     height: 1.2rem !important;
  //   }
  //   .reservationSmall {
  //     right: 0.24rem !important;
  //     top: 0.08rem !important;
  //   }
  // }
  .ordinaryBox {
    //margin: 0 5px;
  }
</style>
