<template>
  <div class="ruleMaskDiv" v-if="show">
    <basicPop :title="title" @closeClick="closeClick">
      <div class="order-content">
        <p class="order-text">在手动领取可以输入订单号进行参与条件查询确认</p>
        <div class="order-main">
          <div v-for="(item,index) in orderList">
            <div>
              <van-field v-model="orderList[index]" type="digit" maxlength="12" label="订单号:" input-align="right" placeholder="请输入"/>
            </div>
          </div>
          <div v-if="orderList.length<5" class="add-input" @click="addInput()">+</div>
          <p class="order-msg" @click="getOrderNum = true">如何获取订单号</p>
        </div>
        <div class="draw-rewards" @click="drawRewards()">参与报名</div>
      </div>
    </basicPop>
    <!--如何获取订单号-->
    <van-popup v-model="getOrderNum">
      <div class="getOrderNum">
        <img src="//img10.360buyimg.com/imgzone/jfs/t1/165632/7/5949/324932/601cb100E52c23633/3f07618319b6f4e0.jpg" alt="">
        <van-button type="danger" size="large" @click="getOrderNum = false">返回</van-button>
      </div>
    </van-popup>
  </div>
</template>

<script>
import basicPop from "./basicPop.vue";
import apis1 from "../../../util/apis1.js";
import { goToSkuPage } from '../../../util/tools.js';
import {OrderGiftPopComService , OrderSuccessPopService} from "../../../util/comCreate";

let { fansTaskList , orderCheckList } = apis1;
export default {
  props: [],
  components: {
    basicPop,
  },
  data() {
    return {
      title: '订单校验',
      orderList:['',],// 订单号数组
      getOrderNum:false,
      assignGoodsFlag:0,
      orderCnt:0,
      totalOrderAmount:0,
      lackOrderCnt:0,
      lackOrderAmount:0,
      shopId:'',
      orderCntFlag:0,
    };
  },
  created() {
    document
      .querySelector("body")
      .setAttribute(
        "style",
        "position:#fixed;top:0;height:100%;overflow:hidden"
      );

    this.initData();
  },
  methods: {
    initData() {

    },
    drawRewards(){
      if (this.isTemplate) {
        // 活动预览
        this.$toast("活动预览，仅供查看");
        return;
      }
      let actStatus = sessionStorage.getItem("actStatus");

      if (actStatus == 2) {
        this.$toast("活动已结束");
        return;
      }
      if (actStatus == 1) {
        this.$toast("活动尚未开始");
        return;
      }
      var arr = this.orderList.filter(item =>{
        return item !=='';
      });
      var orderstr= "";
      if(arr.length > 0){
        orderstr = arr.toString();
      }
      // 清空输入框
      this.orderList = ['',];
      orderCheckList(orderstr, data => {
        if (data.data.receivePrize == false) {
          this.orderCnt = data.data.orderCnt;
          this.totalOrderAmount = data.data.totalOrderAmount;
          this.lackOrderCnt = data.data.lackOrderCnt;
          this.lackOrderAmount = data.data.lackOrderAmount;
          this.shopId = data.data.shopId;
          this.orderCntFlag = data.data.orderCntFlag;
          this.assignGoodsFlag = data.data.assignGoodsFlag;
          this.closeClick();
          OrderGiftPopComService.create(this.totalOrderAmount, this.orderCnt, this.lackOrderCnt, this.lackOrderAmount, this.shopId,this.orderCntFlag,this.assignGoodsFlag, prizeRecordDetilClick => {
            OrderGiftPopComService.close();
          });
        } else {
          this.closeClick();
          OrderSuccessPopService.create(prizeRecordDetilClick => {
            OrderSuccessPopService.close();
          });
          return;
        }
      });
    },
    // 订单校验窗口增加订单输入框
    addInput(){
      this.orderList.push('');
    },

    closeClick() {
      document.querySelector("body").removeAttribute("style");
      this.submit();
    },
  },
};
</script>

<style lang="scss">
.ruleMaskDiv {
  .basicPopDiv {
    height: 9.13rem;
    .context1 {
      margin-top: 0.2rem;
      height: 100%;
      display: flex;
      // align-items: center;
      justify-content: center;
      font-size: 0.24rem;
      color: #333333;
    }
    .context {
      height: 7.5rem;
      overflow-y: scroll;
      padding-right: 0.15rem;
      padding-left: 0.15rem;
    }
  }
}
.order-content {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}
.order-text {
  margin-top: .2rem;
  font-size: .24rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #333333;
  text-align: center;
}
.order-main {
  padding: .3rem .3rem .3rem .3rem;
  font-size: .24rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #333333;
  overflow-y: scroll;
  height: 5.54rem;
}

.order-main .van-cell {
  padding: .2rem .21rem .2rem .21rem;
  line-height: .5rem;
  font-size: .24rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #333333;
  margin-bottom: .2rem;
}
.draw-rewards {
  width: 100%;
  height: 1rem;
  line-height: 1rem;
  text-align: center;
  background-color: #e2231a;
  font-size: .36rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #ffffff;
  position: fixed;
  bottom: 0;
}
.order-msg {
  font-size: .2rem;
  font-weight: normal;
  font-stretch: normal;
  line-height: .6rem;
  letter-spacing: 0px;
  color: #0083ff;
}
.getOrderNum {
  width: 100vw;
  height: 100vh;
  overflow-x: hidden;
}
.add-input {
  height: .9rem;
  background-color: #cae5ff;
  border-radius: .05rem;
  border: solid .01rem #0083ff;
  line-height: .9rem;
  text-align: center;
  color: #0083ff;
  font-size: .6rem;
  cursor: pointer;
}
.gray100{
  filter: grayscale(100);
}
</style>
