<template>
  <div class="buyBackGift">
    <!-- 查看订单记录 -->
    <div :style="styleData.orderBtn" @click="seeOrder"></div>
    <!-- 进度 -->
    <div class="stepAll">
      <div class="xian"></div>
      <div class="stepBox">
        <div :style="styleData.step1">
          <div :style="styleData.okBtn" v-if="probationPrize.orderStatus == 1"></div>
          <div :style="styleData.noBtn" v-if="probationPrize.orderStatus == 0"></div>
          <div :style="styleData.stepContent">
            <div>
              <div :style="styleData.prizeBox">
                <div :style="styleData.tryImg"></div>
                <div :style="styleData.prizeImg">
                  <img :src="probationPrize.prizeInfo.showImg" alt="" :style="styleData.img">
                </div>
                <div :style="styleData.prizeMsg">
                  限量{{probationPrize.allNum}}份，数量有限。每个id仅可领取1次
                </div>
              </div>
              <div :style="styleData.warnMsg" v-if="probationPrize.hasNum == 0 && (probationPrize.status == 2 || probationPrize.status == 3 || probationPrize.status == 4 || probationPrize.status == 5 || probationPrize.status == 0)">
                温馨提示：当前奖品已发完，您可继续购买试用装，回购正装领取【回购礼】
              </div>
            </div>

            <div :style="styleData.stepRight">
              <div :style="styleData.prizeName">{{probationPrize.prizeInfo.prizeName}}</div>
              <div :style="styleData.stepMsg">指定时间购买指定试用商品，订单完成返回页面即有机会领取试用礼奖品</div>
              <div :style="styleData.timeMsg">
                下单时间：
                <span style="color:red">{{this.probationPrize.time1}}-{{this.probationPrize.time2}}</span>
                并在活动结束前确认收货
              </div>
              <div :style="styleData.stepBtnAll">
                <!-- 购买尝鲜装 -->
                <div :style="styleData.stepBtn1" v-if="probationPrize.status == 3 || probationPrize.status == 5" @click="tryJump"></div>
                <!-- 立即领取 -->
                <div :style="styleData.stepBtn2" v-if="probationPrize.status == 0" @click="drawDownFun()"></div>
                <!-- 已领取 -->
                <div :style="styleData.stepBtn3" v-if="probationPrize.status == 1"></div>
                <!-- 奖品发光 -->
                <div :style="styleData.stepBtn4" v-if="probationPrize.status == 4"></div>
                <div :style="styleData.stepBtn4" v-if="probationPrize.status == 2" @click="loseFun"></div>
                <!-- 超出订单时间 -->
                <div :style="styleData.stepBtn6" v-if="probationPrize.status == 6" @click="tryJump"></div>
              </div>
            </div>
          </div>
        </div>
        <div :style="styleData.step2">
          <div :style="styleData.okBtn" v-if="genuinePrize.orderStatus == 1"></div>
          <div :style="styleData.noBtn" v-if="genuinePrize.orderStatus == 0"></div>
          <div :style="styleData.stepContent">
            <div>
              <div :style="styleData.prizeBox">
                <div :style="styleData.genuineImg"></div>
                <div :style="styleData.prizeImg">
                  <img :src="genuinePrize.prizeInfo.showImg" alt="" :style="styleData.img">
                </div>
                <div :style="styleData.prizeMsg">
                  限量{{genuinePrize.allNum}}份，数量有限。每个id仅可领取1次
                </div>
              </div>
              <div :style="styleData.warnMsg" v-if="genuinePrize.hasNum == 0 && (genuinePrize.status == 2 || genuinePrize.status == 3 || genuinePrize.status == 4 || genuinePrize.status == 5 || genuinePrize.status == 0)">
                温馨提示：当前奖品已发完，回购正装后，将无法领取【回购礼】
              </div>
            </div>

            <div :style="styleData.stepRight">
              <div :style="styleData.prizeName">{{genuinePrize.prizeInfo.prizeName}}</div>
              <div :style="styleData.stepMsg">完成step1后，指定时间内回购正装商品，订单完成返回页面即有机会领取回购礼奖品</div>
              <div :style="styleData.timeMsg">
                下单时间：
                <span style="color:red">{{this.genuinePrize.time1}}-{{this.genuinePrize.time2}}</span>
                并在活动结束前确认收货
              </div>
              <div :style="styleData.stepBtnAll">
                <!-- 购买正装 -->
                <div :style="styleData.genuineBtn1" v-if="(genuinePrize.status == 3 || genuinePrize.status == 5) && probationPrize.orderStatus == 1" @click="genuineJump"></div>
               
                <!-- 立即领取 -->
                <div :style="styleData.stepBtn2" v-if="genuinePrize.status == 0 && probationPrize.orderStatus == 1" @click="genuineDownFun()"></div>
                <!-- 已领取 -->
                <div :style="styleData.stepBtn3" v-if="genuinePrize.status == 1 && probationPrize.orderStatus == 1"></div>
                <!-- 奖品发光 -->
                <div :style="styleData.stepBtn4" v-if="genuinePrize.status == 4 && probationPrize.orderStatus == 1"></div>
                <div :style="styleData.stepBtn4" v-if="genuinePrize.status == 2 && probationPrize.orderStatus == 1" @click="loseFun"></div>

                <div :style="styleData.stepBtn5" v-if="probationPrize.orderStatus == 0" @click="genuineJump"></div>
                <div :style="styleData.stepBtn5" v-if="(genuinePrize.status == 3 || genuinePrize.status == 5)  && probationPrize.orderStatus == null" @click="genuineJump"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="trySku" :style="styleData.trySku">
      <div :style="styleData.skuUl">
        <div :style="styleData.skuLi" v-for="item in probationSkuList" @click="goToSku(item)" v-lz-click="'5'" v-lz-skuid="item.skuId">
          <div :style="styleData.imgBox">
            <img :src="item.skuImg" alt="">
          </div>
          <div :style="styleData.skuName">{{item.skuName}}</div>
          <div :style="styleData.skuPrice">活动价格：
            <span :style="styleData.skuPriceSpan">¥{{item.skuPrice}}</span>
          </div>
          <div :style="styleData.btn"></div>
        </div>
      </div>
    </div>
    <div class="genuineSku" :style="styleData.genuineSku">
      <div :style="styleData.skuUl">
        <div :style="styleData.skuLi" v-for="item in genuineSkuList" @click="goToSku(item)" v-lz-click="'5'" v-lz-skuid="item.skuId">
          <div :style="styleData.imgBox">
            <img :src="item.skuImg" alt="">
          </div>
          <div :style="styleData.skuName">{{item.skuName}}</div>
          <div :style="styleData.skuPrice">活动价格：
            <span :style="styleData.skuPriceSpan">¥{{item.skuPrice}}</span>
          </div>
          <div :style="styleData.btn"></div>
        </div>
      </div>
    </div>
    <div class="pop" v-if="seeType">
      <div class="seeBox">
        <div class="closeBth" @click="closeFun"></div>
        <div class="title">订单记录</div>
        <div class="titleMsg">此处展示含指定sku且符合下单时间的订单状态哦～</div>
        <div class="orderUl">
          <div class="orderTitle">
            <div class="item">订单号</div>
            <div class="item">下单时间</div>
            <div class="item">订单状态</div>
          </div>
          <div class="orderBox">
            <div v-if="orders.length == 0" style="margin-top:.5rem">暂无数据～</div>
            <div class="orderLi" v-for="item in orders" >
              <div class="item">{{item.orderId}}</div>
              <div class="item">{{item.orderStartTime}}</div>
              <div class="item">{{item.orderStateStr}}</div>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import apis1 from '../../../util/apis1.js';
  import dateUtil from '../../../util/dateUtil.js';
  let { buyBackGiftApi, immediatelyDraw,storeGoodsPoint } = apis1;
  import { newToSkuPage } from '../../../util/tools.js';
  import { PrizeResultPopComService, NoPrizeResultPopComService } from '../../../util/hdzxtcomCreate.js';
  export default {
    props: ['datas', 'styleData', 'keyData', 'isTemplate', 'templateData', 'modifyContent', 'isWebClick'],
    data() {
      return {
        isPlayType: false,
        probationPrize: {}, //试用装奖品
        genuinePrize: {}, //z正装奖品
        probationSkuList: [],
        genuineSkuList: [],
        orders: [],
        seeType: false
      }
    },
    created() {
      this.initData();
    },
    methods: {
      loseFun(){
        this.$toast('发奖失败');
      },
      tryJump() {
        if (this.isTemplate) {
          this.$toast('活动预览，仅供参考');
          return;
        }
        let actStatus4 = sessionStorage.getItem('actStatus');
        if (actStatus4 == 1) {
          this.$toast('活动尚未开始');
          return;
        }
        if (actStatus4 == 2) {
          this.$toast("活动已结束");
          return;
        }
        console.log(new Date().getTime())
        console.log(this.probationPrize.orderEndTime)
        if(new Date().getTime() >this.probationPrize.orderEndTime ){
           this.$toast('抱歉，当前下单时间已过，无法参与～');
          return;
        }
        document.querySelector(".trySku").scrollIntoView({
          behavior: "smooth",
          block: "start",
          inline: "end"
        })
      },
      genuineJump() {
        if (this.isTemplate) {
          this.$toast('活动预览，仅供参考');
          return;
        }
        let actStatus4 = sessionStorage.getItem('actStatus');
        if (actStatus4 == 1) {
          this.$toast('活动尚未开始');
          return;
        }
        if (actStatus4 == 2) {
          this.$toast("活动已结束");
          return;
        }
        if(new Date().getTime() >this.genuinePrize.orderEndTime ){
           this.$toast('抱歉，当前下单时间已过，无法参与～');
          return;
        }
        if (this.probationPrize.orderStatus == 0) {
          this.$toast('请先下单试用装并确认收货哦～');
          return;
        }
        document.querySelector(".genuineSku").scrollIntoView({
          behavior: "smooth",
          block: "start",
          inline: "end"
        })
      },
      initData() {
        if (this.isTemplate) {
          var datasAll = this.templateData;
          if (datasAll) {
            console.log(this.templateData.buyBackGift,11111)
            this.probationPrize = {
              allNum:datasAll.buyBackGift.draw.prizeList[0].beanNum,
              hasNum:1,
              time1:dateUtil.dateChangeYYYY(new Date(datasAll.buyBackGift.probationStartTime), 1),
              time2:dateUtil.dateChangeYYYY(new Date(datasAll.buyBackGift.probationEndTime), 1),
              orderStatus:0,
              status:3,
              prizeInfo:{
                showImg:datasAll.buyBackGift.draw.prizeList[0].showImg,
                prizeName:datasAll.buyBackGift.draw.prizeList[0].prizeName
              }
            }
            this.genuinePrize = {
              allNum:datasAll.buyBackGift.draw.prizeList[0].beanNum,
              hasNum:1,
              time1:dateUtil.dateChangeYYYY(new Date(datasAll.buyBackGift.genuineStartTime), 1),
              time2:dateUtil.dateChangeYYYY(new Date(datasAll.buyBackGift.genuineEndTime), 1),
              orderStatus:0,
              status:3,
              prizeInfo:{
                showImg:datasAll.buyBackGift.draw.prizeList[0].showImg,
                prizeName:datasAll.buyBackGift.draw.prizeList[0].prizeName
              }
            }
            this.probationSkuList = datasAll.buyBackGift.probationSkuList
            this.probationSkuList.map(item=>{
              item.skuImg = item.imagePath
              item.skuName = item.name
              item.skuPrice = item.price
            })
            this.genuineSkuList = datasAll.buyBackGift.genuineSkuList
            this.genuineSkuList.map(item=>{
              item.skuImg = item.imagePath
              item.skuName = item.name
              item.skuPrice = item.price
            })
          } else {
            this.probationPrize = {
              allNum:1,
              hasNum:1,
              time1:'2024-09-19 20:14:38',
              time2:'2024-10-19 20:14:38',
              orderStatus:0,
              status:3,
              prizeInfo:{
                showImg:'//img10.360buyimg.com/imgzone/jfs/t1/172629/8/10529/9649/60a4cb50Edc2ee40a/b53b1246de5f2089.png',
                prizeName:'1积分'
              }
            }
            this.genuinePrize = {
              allNum:1,
              hasNum:1,
              time1:'2024-09-19 20:14:38',
              time2:'2024-10-19 20:14:38',
              orderStatus:0,
              status:3,
              prizeInfo:{
                showImg:'//img10.360buyimg.com/imgzone/jfs/t1/172629/8/10529/9649/60a4cb50Edc2ee40a/b53b1246de5f2089.png',
                prizeName:'1积分'
              }
            }
            this.probationSkuList = [
              {
                skuId: "10026801068734",
                skuImg: "http://img14.360buyimg.com/n0/jfs/t1/169951/15/7711/78570/6035a9deEef26f9bf/4a9164d44091941a.jpg",
                skuName: "广博（GuangBo）文件夹a4板夹横式资料册写字垫板a3试卷夹文具定制档案卷子试卷整理神器文件夹 横式资料夹-果粒橙",
                skuPrice: "12.80"
              }
            ]
            this.genuineSkuList = [
              {
                skuId: "10026801068734",
                skuImg: "http://img14.360buyimg.com/n0/jfs/t1/169951/15/7711/78570/6035a9deEef26f9bf/4a9164d44091941a.jpg",
                skuName: "广博（GuangBo）文件夹a4板夹横式资料册写字垫板a3试卷夹文具定制档案卷子试卷整理神器文件夹 横式资料夹-果粒橙",
                skuPrice: "12.80"
              }
            ]
          }
        } else {
          buyBackGiftApi(res => {
            this.probationPrize = res.data.probationPrize
            this.genuinePrize = res.data.genuinePrize
            this.probationSkuList = res.data.probationSkuList
            this.genuineSkuList = res.data.genuineSkuList
            this.orders = res.data.orders
            if(res.data.orders){
              this.orders.map(item => {
                item.orderStartTime = dateUtil.dateChangeYYYY(new Date(item.orderStartTime), 1);
              })
            }else{
              this.orders = []
            }
            this.probationPrize.time1 = dateUtil.dateChangeYYYY(new Date(this.probationPrize.orderStartTime), 1);
            this.probationPrize.time2 = dateUtil.dateChangeYYYY(new Date(this.probationPrize.orderEndTime), 1);

            this.genuinePrize.time1 = dateUtil.dateChangeYYYY(new Date(this.genuinePrize.orderStartTime), 1);
            this.genuinePrize.time2 = dateUtil.dateChangeYYYY(new Date(this.genuinePrize.orderEndTime), 1);
          })
        }
      },
      drawDownFun() {
        if (this.isTemplate) {
          this.$toast('活动预览，仅供参考');
          return;
        }
        let actStatus4 = sessionStorage.getItem('actStatus');
        if (actStatus4 == 1) {
          this.$toast('活动尚未开始');
          return;
        }
        if (actStatus4 == 2) {
          this.$toast("活动已结束");
          return;
        }
        if (this.isPlayType) {
          return;
        }
        this.isPlayType = true;
        immediatelyDraw(this.probationPrize.prizeInfo.id, receiveData => {
          if (receiveData.resp_code == 0) {
            this.isPlayType = false;
            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;
              obj.datas.probationPrize = true
              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.isPlayType = false;
            this.$toast('抱歉，奖品已发完~');
            setTimeout(() => {
              this.initData();
            }, 1000);
          }
        });
      },
      genuineDownFun() {
        if (this.isTemplate) {
          this.$toast('活动预览，仅供参考');
          return;
        }
        let actStatus4 = sessionStorage.getItem('actStatus');
        if (actStatus4 == 1) {
          this.$toast('活动尚未开始');
          return;
        }
        if (actStatus4 == 2) {
          this.$toast("活动已结束");
          return;
        }
        if (this.isPlayType) {
          return;
        }
        this.isPlayType = true;
        immediatelyDraw(this.genuinePrize.prizeInfo.id, receiveData => {
          if (receiveData.resp_code == 0) {
            this.isPlayType = false;
            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.isPlayType = false;
            this.$toast('抱歉，奖品已发完~');
            setTimeout(() => {
              this.initData();
            }, 1000);
          }
        });
      },
      seeOrder() {
        if (this.isTemplate) {
          this.$toast('活动预览，仅供参考');
          return;
        }
        let actStatus4 = sessionStorage.getItem('actStatus');
        if (actStatus4 == 1) {
          this.$toast('活动尚未开始');
          return;
        }
        if (actStatus4 == 2) {
          this.$toast("活动已结束");
          return;
        }
        this.seeType = true
        document.body.style.overflow = 'hidden'; // 阻止滚动
      },
      closeFun() {
        this.seeType = false
        document.body.style.overflow = ''; // 阻止滚动
      },
      goToSku(item) {
        if (this.isTemplate) {
          this.$toast("活动预览，仅供查看");
          return;
        }
        let actStatus = sessionStorage.getItem("actStatus");
        if (actStatus == 2) {
          this.$toast("活动已结束");
          return;
        }
        if (actStatus == 1) {
          this.$toast("活动未开始");
          return;
        }
        storeGoodsPoint(5)
        newToSkuPage(item);
      },
    }
  }

</script>
<style lang="scss">
  .buyBackGift {
    width: 100%;
    .stepAll {
      width: 100%;
      margin-top: 0.15rem;
      display: flex;
      align-items: center;
      .xian {
        width: 0.52rem;
        height: 4.59rem;
        background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/1060/36/25541/11741/66eb8f2fFac1e93be/2c626683a2f9d6b9.png);
        background-size: 100%;
        margin-left: 0.1rem;
      }
    }
  }
  .pop {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba($color: #000000, $alpha: 0.7);
    top: 0;
    bottom: 0;
    z-index: 200;
    .seeBox {
      width: 6.44rem;
      height: 6.1rem;
      border: 1px solid #fff;
      background: linear-gradient(#df385b, #fdf2f4); //从上到下
      position: absolute;
      border-radius: 0.2rem;
      top: calc(50% - 3rem);
      left: calc(50% - 3.22rem);
      padding: 0.2rem;
      .closeBth {
        width: 0.62rem;
        height: 0.62rem;
        background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/168045/32/33933/1197/66ec1df6F23adef3e/34ab34c67a3102d0.png);
        background-size: 100%;
        position: absolute;
        bottom: -1rem;
        left: calc(50% - 0.31rem);
      }
      .title {
        font-size: 0.5rem;
        color: #fff;
      }
      .titleMsg {
        font-size: 0.2rem;
        margin-top: 0.15rem;
        color: #fff;
      }
      .orderUl {
        margin-top: 0.15rem;
        width: 100%;
        height: 4.3rem;
        border-radius: 0.2rem;
        overflow: hidden;
        background: #fffcfd;

        .orderTitle {
          width: 100%;
          height: 0.6rem;
          background: #f4a1aa;
          display: flex;
          align-items: center;
          .item {
            width: 33.3%;
            font-size: 0.18rem;
          }
        }
        .orderBox {
          width: 100%;
          height: 3.7rem;
          overflow-y: scroll;
          padding: 0 0.1rem;
        }
        .orderLi {
          width: 100%;
          height: 0.6rem;
          display: flex;
          align-items: center;
          border-bottom: 1px solid #de3256;
          .item {
            width: 33.3%;
            font-size: 0.16rem;
          }
        }
      }
    }
  }
</style>