<template>
  <div class="conditionDivAllC" v-if="show" @click='clickEmpty()'>
    <div @click='stopClickEmpty'>
      <div class="bgTitleDiv" :style="styleDataNew.bgTitleDiv">
        <div>活动获奖条件</div>
        <div><img class="closeDiv" @click="closeClick()" src="//img10.360buyimg.com/imgzone/jfs/t1/133343/17/19838/1158/5fd5c798E72ccdde6/51194de08ba1e3dc.png" /></div>
      </div>
      <div class="contentDivAll">
        <div class="itemDiv" :style="styleDataNew.itemDiv">活动的首购规则：</br>
        <div>
          参与资格：
          <span class="contentSpan" :style="styleDataNew.contentSpan">
           {{joinData.notBuyTime | filterDate  }} 至{{joinData.orderStartTime | filterDate}}内,
           {{ joinData.firstBuyType == 0 ? '若以会员身份完成过任意订单，不可参与本次活动;':'无任何购买记录;' }}
           <!-- 无订单完成记录； -->
          </span>
        </div>
        <div>
          订单条件：
          <span class="contentSpan" :style="styleDataNew.contentSpan">
            用户
            <b style="color:#000">{{ joinData.firstBuyType == 0 ? '【成功入会后】下单并确认收货（需订单完成）' : '【在本店铺内】下单并确认收货（需订单完成）'}}</b>
            <!-- 产生的完成状态订单； -->
          </span>
        </div>
        <div>
          订单时间：
          <span class="contentSpan" :style="styleDataNew.contentSpan">
            在{{joinData.orderStartTime | filterDate}} - {{joinData.orderEndTime | filterDate}}内下单
          </span>
        </div>
        <div>
          领奖说明：
          <span class="contentSpan" :style="styleDataNew.contentSpan" v-if="joinData.grantType == 0">
            需在活动结束前{{joinData.activityEndTime | filterDate}}完成确认收货并<b style="color:#000">返回活动页手动领取</b>奖品（实物奖品需填写有效收货地址）。
            <!-- 满足活动条件的订单 <b style="color:#000">确认收货后</b>，请<b style="color:#000">返回活动页面领取奖品</b>（实物奖品需填写收货地址）。 -->
          </span>
          <span class="contentSpan" :style="styleDataNew.contentSpan" v-if="joinData.grantType == 1">
           订单完成后需<b style="color:#000">回到活动领取奖品</b>（实物奖品需填写收货地址），<b style="color:#000">在确认收货{{joinData.confirmDay}}天后</b>，系统将自动发奖，若有延迟请耐心等待，或咨询客服。
          </span>
        </div>
        <!-- <span class="contentSpan" :style="styleDataNew.contentSpan">近{{joinData.day}}天在店铺未有购买订单，可参与活动</span> -->
        <!-- <div class="contentSpan" :style="styleDataNew.contentSpan" v-if="joinData.grantType == 0">当参与活动订单（满足活动条件）确认收货后，需回到活动领取奖品（实物奖品需填写收货地址），领取奖励。</div> -->
        <!-- <div class="contentSpan" :style="styleDataNew.contentSpan" v-if="joinData.grantType == 1">回到活动领取奖品（实物奖品需填写收货地址），在确认收货{{joinData.confirmDay}}天后，系统将自动发奖，若有延迟请耐心等待，或咨询客服。</div> -->
        </div>
        
        <!-- <div class="itemDiv" :style="styleDataNew.itemDiv">订单完成时间：</br><span class="contentSpan" :style="styleDataNew.contentSpan">在{{joinData.orderStartTime | filterDate}} - {{joinData.orderEndTime | filterDate}}</span></div> -->

        <div class="itemDiv" :style="styleDataNew.itemDiv" v-if="joinData.orderState == '1'">订单笔数：</br><span class="contentSpan" :style="styleDataNew.contentSpan">大于等于{{joinData.orderStateNum}}笔</span></div>
        <div class="itemDiv" :style="styleDataNew.itemDiv" v-if="joinData.orderState == '0'">订单笔数：单笔</div>

        <div class="itemDiv" :style="styleDataNew.itemDiv">{{joinData.orderState == '0' ? '任意单笔金额：' : '总订单金额：'}}</br><span class="contentSpan" :style="styleDataNew.contentSpan">大于等于{{joinData.orderState == '0' ? joinData.orderPriceOne : joinData.orderPriceTotal}}元{{remark}}</span></div>

        <div class="itemDiv" :style="styleDataNew.itemDiv">订单商品：</br><span class="contentSpan" :style="styleDataNew.contentSpan">购买在活动页面展示的指定商品，或者通过底部按钮进入店铺挑选心动好物</span></div>
        <div class="itemDiv" :style="styleDataNew.itemDiv">其他限制：</br>
          <span class="contentSpan" :style="styleDataNew.contentSpan">1，整个活动期间，每人只可领取奖品一次</span></br>
          <span class="contentSpan" :style="styleDataNew.contentSpan">2，奖品先到先得，发完为止</span></br>
          <div class="contentSpan" :style="styleDataNew.contentSpan">
            3，订单需确认收货
            <span v-if="joinData.grantType == 1">
              <span style="color:red">{{joinData.confirmDay}}天</span>
              后才能领奖</span>
            </br>
            <span v-if="joinData.grantType == 0">(订单状态为完成时)才能领奖</span>
          </div>
          <span class="contentSpan" :style="styleDataNew.contentSpan">4，退货、实物奖品未填写地址等行为失去领奖资格</span></br>
          <span class="contentSpan" :style="styleDataNew.contentSpan">5，实物奖品需要点击领奖后2小时内填写地址，否则视为放弃奖品。</span></br>
          <span class="contentSpan" :style="styleDataNew.contentSpan">6，虚拟订单没有物流信息，暂不支持参与活动</span></br>
       </div>

      </div>
    </div>
  </div>
</template>

<script>
  import apis from '../../../util/apis1.js';
let { getActivityBasic } = apis;
export default {
  data() {
    return {
      joinData:{
        day:0,
        orderEndTime:null,
        orderStartTime:null,
        orderState:'',// 0 单笔 1多笔
        orderStateNum:0,
        orderPriceOne:0,
        orderPriceTotal:0,
        priceType:0, // 1成交价0京东价
        grantType:0,
        confirmDay:0,
        notBuyTime:''
      },
      remark:"京东价"
    };
  },
  created() {
    this.initData();
  },
  methods: {
    initData(){
      getActivityBasic((responseData)=>{
        console.log(responseData,'responseData');
        this.joinData = responseData.data;
        this.joinData.notBuyTime = this.joinData.orderStartTime - this.joinData.day * 24 * 60 * 60 * 1000;
        if(this.joinData.priceType == 0){
          this.remark = "京东价"
        } else {
          this.remark = "实付价"
        }

       

      })
    },
    closeClick() {
      this.canScroll();
      this.submit();
    },
    //点击空白处关闭弹框
    clickEmpty(){
      this.closeClick();
    },
    //阻止冒泡
    stopClickEmpty(event){
      event.stopPropagation();
    },
  }
};
</script>

<style lang="scss">
.conditionDivAllC {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 200;
  display: flex;
  justify-content: center;
  align-items: center;

  .closeDiv {
    position: absolute;
    top: 0.3rem;
    right: 0.26rem;
    width: 0.22rem;
    height: 0.22rem;
  }
  .contentDivAll{
    margin-top: -0.1rem;
    width: 5rem;
    // height: 6.02rem;
    background: #FFFFFF;
    border-radius: 0.1rem;
    position: relative;
    padding: 0.34rem 0.34rem 0.45rem 0.34rem;

  }
}
</style>

