<template>
  <div class="newMemberPromoBox">
    <!-- 正常进入 -->
    <div class="canEnter" v-if="actStatus == 0 || actStatus == 1 || actStatus == 2 || actStatus == 7 || actStatus == 9">
      <div class="warnMsg" :style="styleData.warnMsg">
        <div class="msg1" :style="styleData.msg1">新会员入会后{{limits}}小时内，可购买以下专享价商品</div>
        <div class="msg2" :style="styleData.msg2">数量有限！以实际购买为准</div>
      </div>
      <div class="countdown" v-if="actStatus == 1 || actStatus == 9" :style="styleData.countdown">
        <van-count-down :time="endTime - new Date().getTime()" format="DD 天 HH 时 mm 分 ss 秒" @finish="refresh">
          <template #default="timeData">
            距离限时价结束：
            <span class="block" :style="styleData.block">{{
            timeData.days >= 10 ? timeData.days : "0" + timeData.days
          }}</span>
            <span class="colon">天</span>
            <span class="block" :style="styleData.block">{{
            timeData.hours >= 10 ? timeData.hours : "0" + timeData.hours
          }}</span>
            <span class="colon">时</span>
            <span class="block" :style="styleData.block">{{
            timeData.minutes >= 10 ? timeData.minutes : "0" + timeData.minutes
          }}</span>
            <span class="colon">分</span>
            <span class="block" :style="styleData.block">{{
            timeData.seconds >= 10 ? timeData.seconds : "0" + timeData.seconds
          }}</span>
            <span class="colon">秒</span>
          </template>
        </van-count-down>
      </div>
      <div class="countdown" :style="styleData.countdown" v-if="actStatus == 2 || actStatus == 7">
        距离限时价结束：
        <span class="block" :style="styleData.block">00</span>
        <span>天</span>
        <span class="block" :style="styleData.block">00</span>
        <span>时</span>
        <span class="block" :style="styleData.block">00</span>
        <span>秒</span>
      </div>
      <div class="goods" :style="styleData.goods">
        <div v-if="actStatus == 1 || actStatus == 0 || actStatus == 9" class="goodMsg1" :style="styleData.goodMsg1">
          注意：同一账号在本活动内，仅可下单1次专享价订单，您可将以下心仪商品加购后一起购买哦！
        </div>
        <div v-if="actStatus == 2 || actStatus == 7" class="goodMsg2" :style="styleData.goodMsg2">
          您的优惠时间已结束，可以看看其他活动哦~
        </div>
        <div class="exclusiveList" :style="styleData.exclusiveList">
          <div class="exclusiveItem" :style="styleData.exclusiveItem"
          v-for="item in exclusivePriceVOList" @click="goToSku(item)" v-lz-click="'5'" 
          v-lz-skuid="item.skuId">
            <div class="icon" :style="styleData.icon" v-if="actStatus == 0 || actStatus == 1 || actStatus == 9"></div>
            <div class="topArea" :style="styleData.topArea">
              <div class="prizeImg" :style="styleData.prizeImg">
                <img :style="styleData.picImg" :src="item.productImg" alt="">
              </div>
              <div class="prizeCount" :style="styleData.prizeCount">
                <span v-if="item.limitMax == item.limitMin">购买{{item.limitMin}}件可享专享价</span>
                <span v-else>购买{{item.limitMin}}-{{item.limitMax}}件可享专享价</span>
              </div>
            </div>
            <div class="prizeName" :style="styleData.prizeName">
              {{item.productName}}
            </div>
            <div class="goodPrice" :style="styleData.goodPrice">
              <div v-if="actStatus == 1 || actStatus == 0 || actStatus == 9" class="status" :style="styleData.status">
                <div class="promotionalPrice" :style="styleData.promotionalPrice">
                  限时价:¥{{item.promotionalPrice}}
                </div>
                <div class="jdprice" :style="styleData.jdprice">
                  京东价:¥
                  <span :style="styleData.del">{{item.jdprice}}</span>
                </div>
              </div>
              <div v-if="actStatus == 2 || actStatus == 7" class="status" :style="styleData.status">
                <div class="jdprice2" :style="styleData.jdprice2">
                  京东价:¥{{item.jdprice}}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 场景三 -->
    <div class="noEnter" v-if="actStatus == 3 || actStatus == 8">
      <div class="mainCenter">
        <div class="title"></div>
        <div class="bodyContent">
          <img :src="userImg" />
          <div class="userId">
            用户<span style="margin-left: 6px">{{
            nickName
          }}</span>
            <div class="condition" v-if="actStatus == 3">
              本活动需要
              <span>首次入会{{limits}}小时以内的新会员参与，</span>
              您不符合参与条件哦~请看看别的活动吧！
            </div>
            <div class="condition" v-if="actStatus == 8">
              本活动仅限未入会的用户参与，您不符合参与条件，请看看别的活动吧~
            </div>
          </div>
          <div class="one-button">
            <button class="button" v-lz-click="'4'" @click="goToShop">
              前往店铺首页
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import Vue from "vue";
  import { CountDown } from "vant";
  Vue.use(CountDown);
  import store from '../../../store/store';
  import apis1 from '../../../util/apis1.js';
  import { goToShopPage, newToSkuPage } from '../../../util/tools.js';
  let { storeGoodsPoint, newMemberPromoApi } = apis1;
  export default {
    props: ['datas', 'styleData', 'keyData', 'isTemplate', 'templateData', 'modifyContent', 'isWebClick'],
    data() {
      return {
        actStatus: null,
        limits: '',
        activationDate: '',
        endTime: null,
        exclusivePriceVOList: [],
        stime:'',
        etime:'',
        nickName:'',
        userImg:''
      }
    },
    created() {
      this.nickName = store.state.nickName;
      this.userImg = store.state.userImg;
      this.publicData.$on("bargainTime", (startTime, endTime) => {
            this.stime = startTime;
            this.etime = endTime;
          });
      this.initData();
    },
    methods: {
      initData() {
        if (this.isTemplate) {
          var datasAll = this.templateData;
          if (datasAll){
            this.actStatus = 1
            this.limits = datasAll.newMemberPromo.limits
            this.activationDate = new Date().getTime();
            this.endTime = this.activationDate + (this.limits * 60 * 60 * 1000)
            this.exclusivePriceVOList = datasAll.exclusivePrice.exclusivePriceList
            this.exclusivePriceVOList.map(item=>{
              item.productImg = item.imagePath
              item.productName = item.name
              item.jdprice = item.price
              item.limitMin = datasAll.exclusivePrice.limitMin
              item.limitMax = datasAll.exclusivePrice.limitMax
            })
          }else{
            this.actStatus = 2
            this.limits = '72'
            this.exclusivePriceVOList = [{
              awardStatus:'1',
              jdprice:'239.00',
              limitMax:'1',
              limitMin:'1',
              skuId:'10097246839573',
              promotionalPrice:'238.00',
              productName:'广博联名酷企鹅A6手帐本礼盒套装手账本送礼笔记本子礼盒文具生日礼物 A6手帐套装-酷企鹅',
              productImg:'http://img13.360buyimg.com/n0/jfs/t1/234504/18/13946/52081/65e199cdF58b837c0/45b10688b0976b07.png',
            }]
          }
        } else {
          newMemberPromoApi(res => {
            if (res.resp_code == 0) {
              this.actStatus = res.data.actStatus
              this.activationDate = res.data.activationDate
              this.limits = res.data.limits
              this.exclusivePriceVOList = res.data.exclusivePriceVOList
              // if((this.activationDate + (this.limits * 60 * 60 * 1000)) > this.etime){
              //   this.endTime = this.etime
              // }else{
                this.endTime = this.activationDate + (this.limits * 60 * 60 * 1000)
              // }
            }
          })
        }
      },
      refresh() {
        window.location.reload()
      },
      goToShop() {
        if (this.isTemplate) {
          this.$toast('活动预览，仅供查看');
          return;
        }
        let shopId = store.state.shopId;
        storeGoodsPoint(4);
        goToShopPage(shopId);
      },
      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">
  .newMemberPromoBox {
    .noEnter {
      width: 100vw;
      height: 100vh;
      position: fixed;
      top: 0;
      background: #404040;
      .mainCenter {
        background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/176451/36/20711/68622/60f7fa7cE0e56aecf/aa8754102dc19767.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        height: 7.6rem;
        width: 6rem;
        position: fixed;
        top: 20%;
        left: calc(50% - 6rem / 2);
        text-align: center;
        .title {
          background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/164670/25/11163/37990/60483464E2bd908d2/3f222daa2b96b858.png);
          background-size: 100% 100%;
          background-repeat: no-repeat;
          height: 1.2rem;
          width: 3.6rem;
          margin: 0 auto;
          margin-top: -0.5rem;
          display: block;
        }
        .bodyContent {
          margin-top: 0.8rem;
          img {
            width: 1.8rem;
            height: 1.8rem;
            border: 3px solid #fcb83b;
            border-radius: 50%;
          }
          .userId {
            color: black;
            font-size: 0.2rem;
            font-weight: bold;
          }
          .condition {
            width: 4.8rem;
            margin: 0 auto;
            margin-top: 0.2rem;
            color: #000;
            font-size: 0.34rem;
            font-weight: bolder;
            span {
              color: #e2231a;
            }
          }
          .one-button {
            margin-top: 0.5rem;
            .button {
              font-size: 0.4rem;
              width: 4.9rem;
              height: 1rem;
              background-color: #e2231a;
              border-radius: 5px;
              color: #ffffff;
            }
          }
        }
      }
    }
    .canEnter {
      .warnMsg {
        // background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/57884/28/25964/8496/669fa1d1F0689a1e9/1dc9a897a6dfa0ae.png);
        // background-size: 100%;
        // background-repeat: no-repeat;
        // height: 0.74rem;
        // width: 6.61rem;
        // margin: 0 auto;
        .msg1 {
          // color: #442112;
          // font-size: 0.24rem;
          // width: calc(100% - 0.96rem);
          // margin-left: 0.96rem;
          // line-height: 0.44rem;
        }
        .msg2 {
          // color: #442112;
          // font-size: 0.16rem;
        }
      }
      .countdown {
        // margin: 0.3rem auto 0;
        // color: #442112;
        .block {
          // background: #c09e5e;
          // border-radius: 0.05rem;
          // height: 0.3rem;
          // padding: 0.06rem 0.06rem;
        }
      }
      .goods {
        // width: 6.9rem;
        // background: #d4b880;
        // border-radius: 0.2rem;
        // margin: 0.3rem auto 0;
        // border: 1px solid #c09e5e;
        // padding: 0.15rem 0rem 0.2rem 0rem;
        .goodMsg1 {
          // border-top: 1px solid #c09e5e;
          // border-bottom: 1px solid #c09e5e;
          // font-size: 0.16rem;
          // padding: 0rem 0.34rem;
          // text-align: left;
          // line-height: 0.28rem;
          // height: 0.56rem;
          // color: #442112;
          // background: #f1ddb8;
        }
        .goodMsg2 {
          // border-top: 1px solid #c09e5e;
          // border-bottom: 1px solid #c09e5e;
          // font-size: 0.16rem;
          // padding: 0rem 0.34rem;
          // text-align: center;
          // line-height: 0.56rem;
          // height: 0.56rem;
          // color: #442112;
          // background: #f1ddb8;
        }
        .exclusiveList {
          // width: calc(100% - 0.52rem);
          // display: flex;
          // flex-wrap: wrap;
          // justify-content: space-between;
          // margin: 0 auto;
          .exclusiveItem {
            // width: 3rem;
            // height: 4.16rem;
            // background: #f9f1dc;
            // border-radius: 0.2rem;
            // margin-top: 0.2rem;
            // padding: 0.12rem;
            // position: relative;
            .icon {
              // position: absolute;
              // background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/80023/3/27090/6851/66a06470Fd85cc4ba/7ac1b2614a342770.png);
              // background-size: 100%;
              // background-repeat: no-repeat;
              // width: 0.7rem;
              // height: 1.04rem;
              // top: -0.15rem;
              // left: -0.15rem;
            }
            .topArea {
              // width: 100%;
              // height: 2.5rem;
              // background: #fff;
              // border-radius: 0.2rem;
              // overflow: hidden;
              .prizeImg {
                // width: 100%;
                // height: calc(100% - 0.44rem);
                // display: flex;
                // align-items: center;
                // justify-content: center;
                img {
                  // width: 2rem;
                  // height: 1.7rem;
                }
              }
              .prizeCount {
                // width: 100%;
                // height: 0.44rem;
                // font-size: 0.16rem;
                // background: #9f938e;
                // line-height: 0.44rem;
                // color: #fff;
              }
            }
            .prizeName {
              // height: 0.74rem;
              // width: 100%;
              // font-size: 0.22rem;
              // color: #371e14;
              // display: -webkit-box; /* 显示多行文本容器 */
              // -webkit-box-orient: vertical;
              // -webkit-line-clamp: 2; /*显示行数*/
              // overflow: hidden; /*隐藏多出部分文字*/
              // text-overflow: ellipsis; /*用省略号代替多出部分文字*/
              // line-height: 0.37rem;
            }
            .goodPrice {
              // background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/26455/31/21724/5490/66a066b2F33e8e460/4a19f64887afcbe0.png);
              // background-size: 100%;
              // background-repeat: no-repeat;
              // width: 2.69rem;
              // height: 0.63rem;
              // display: flex;
              .status {
                // width: 1.75rem;
                // height: 100%;
                // padding-left: 0.1rem;
                .promotionalPrice {
                  // width: 100%;
                  // height: 0.38rem;
                  // font-size: 0.2rem;
                  // line-height: 0.38rem;
                  // color: #ef0707;
                  // text-align: left;
                }
                .jdprice {
                  // width: 100%;
                  // font-size: 0.14rem;
                  // color: #585858;
                  // text-align: left;
                  span {
                    // text-decoration: line-through;
                  }
                }
                .jdprice2{
                  // width: 100%;
                  // height: 100%;
                  // font-size: 0.22rem;
                  // color: #ef0707;
                  // text-align: left;
                  // line-height: .63rem;
                }
              }
            }
          }
        }
      }
    }
  }
</style>