<template>
  <div class="ruleMaskDiv" v-if="show">
      <div class="not-satisfied">
        <div class="not-satisfied-bg">
          <div class="not-satisfied-close" @click="closeClick()">
          </div>
          <div class="not-satisfied-main">
            <div class="not-satisfied-item" v-if="data.orderStartTime && data.orderEndTime">
              <i class="not-satisfied-icon van-icon van-icon-warning-o">
                <span class="not-satisfied-text">
                 {{orderStartTime}}至
                 {{orderEndTime}}时间段在店铺内下单商品
                </span>
              </i>
            </div>
            <div class="not-satisfied-item" v-if="orderCntFlag == 1 && lackOrderCnt > 0">
              <i class="not-satisfied-icon van-icon van-icon-warning-o">
                <span class="not-satisfied-text">
                  活动期间内下单并付款{{orderCnt}}笔订单，还差
                  <span class="not-satisfied-num">
                    {{lackOrderCnt}}
                  </span>
                  笔
                </span>
              </i>
            </div>
            <div class="not-satisfied-item" v-if="lackOrderAmount > 0">
              <i class="not-satisfied-icon van-icon van-icon-warning-o">
                <span class="not-satisfied-text" v-if="orderCntFlag == 0">
                  单笔订单付款金额满足{{totalOrderAmount}}元（{{remark}}）及以上，还差
                  <span class="not-satisfied-num">
                    {{lackOrderAmount}}
                  </span>
                  元（{{remark}}）
                </span>
                <span class="not-satisfied-text" v-else-if="orderCntFlag == 1">
                  下单付款金额满足{{totalOrderAmount}}元（{{remark}}）及以上，还差
                  <span class="not-satisfied-num">
                    {{lackOrderAmount}}
                  </span>
                  元（{{remark}}）
                </span>
              </i>
            </div>
            <div class="not-satisfied-item1" v-if="assignGoodsFlag == 1">
              <i class="not-satisfied-icon van-icon van-icon-warning-o">
                <span class="not-satisfied-text">请购买指定活动商品</span>
              </i>
            </div>
             <div class="not-satisfied-item1">
              <i class="not-satisfied-icon van-icon van-icon-warning-o">
                <span class="not-satisfied-text">虚拟订单没有物流信息，暂不支持参与活动</span>
              </i>
            </div>
          </div>
          <div class="not-satisfied-btn">
              <div class="go-shop-order" v-lz-click="'4'" @click="goToShop()">进店逛逛</div>
              <div class="order-checke" @click="goToOrderCheck()">订单校验</div>
            </div>
        </div>
      </div>
  </div>
</template>

<script>
import apis1 from '../../../util/apis1.js'
let {storeGoodsPoint} = apis1
import {goToShopPage} from '../../../util/tools.js';
import {OrderCheckPopComService} from "../../../util/comCreate";
import dateUtil from '../../../util/dateUtil';
export default {
  props: [],
  components: {
  },
  data() {
    return {
      orderShopList:[],
      shopId:"",
      remark:'京东价',
      orderStartTime:'',
      orderEndTime:''
    };
  },
  created() {
    document.querySelector("body").setAttribute("style",
        "position:#fixed;top:0;height:100%;overflow:hidden"
      );
      if(sessionStorage.getItem('activityType') == 	10030){
        if(this.data.priceTypeFlag == 0){
        this.remark  ='京东价'
      } else {
         this.remark  ='成交价'
      }
      }
      this.dateTime()
      
     
  },
  methods: {
    //订单时间转换
    dateTime() {
      if (this.data.orderStartTime&&this.data.orderEndTime) {
        this.orderStartTime =  dateUtil.formatTime(this.data.orderStartTime, 'yyyy-MM-dd hh:mm:ss');
        this.orderEndTime =  dateUtil.formatTime(this.data.orderEndTime, 'yyyy-MM-dd hh:mm:ss');
      }
    },
    closeClick() {
      if(sessionStorage.getItem('startQuestion') == true){
        location.href = sessionStorage.getItem('activityUrl');
        sessionStorage.removeItem('startQuestion');
      }
      document.querySelector("body").removeAttribute("style");
      this.submit();
    },

    goToShop(){
      document.querySelector('body').removeAttribute('style')
      let shopId = this.shopId;
      storeGoodsPoint(4)
      goToShopPage(shopId);
    },
    goToOrderCheck(){
      this.closeClick();
      OrderCheckPopComService.create(prizeRecordDetilClick => {
        OrderCheckPopComService.close();
      });
    },
  },
};
</script>

<style lang="scss">
.not-satisfied {
  background: rgba(0, 0, 0, 0.7);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
}
.not-satisfied-bg {
  position: relative;
  width: 6rem;
  height: 6.6rem;
  background: url(//img10.360buyimg.com/imgzone/jfs/t1/123661/16/19232/10173/5fb65151E88dc89d3/aa222acfb31dc30f.png) no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
}
.not-satisfied-close {
  width: .24rem;
  height: .24rem;
  position: absolute;
  top: .2rem;
  right: .2rem;
}
.not-satisfied-main {
  width: 5.6rem;
  height: 3.9rem;
  background-color: #ffffff;
  //box-shadow: 0px 0.05rem 0.16rem 0px rgb(177 177 177 / 24%);
  border-radius: .1rem;
  margin-top: 1.4rem;
  position: relative;
  overflow-y: auto;
}
.not-satisfied-item {
  width: 4.8rem;
  border-bottom: solid .01rem #e6e6e6;
  margin: 0 auto;
  height: .93rem;
  display: flex;
  font-size: .32rem;
}
.not-satisfied-item1 {
  width: 4.8rem;
  margin: 0 auto;
  line-height: 1.1rem;
  height: 1.1rem;
  display: flex;
  font-size: .32rem;
  border-bottom: solid .01rem #e6e6e6;
}
.not-satisfied-btn {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  position: absolute;
  bottom: .3rem;
}
.go-shop-order {
  width: 2.4rem;
  height: .8rem;
  line-height: .8rem;
  background-color: #e2231a;
  border-radius: .05rem;
  font-size: .3rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #ffffff;
  text-align: center;
}

.order-checke {
  width: 2.4rem;
  height: .8rem;
  line-height: .8rem;
  background-color: #ff9900;
  border-radius: .05rem;
  font-size: .3rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #ffffff;
  text-align: center;
}
.not-satisfied-icon {
  display: flex;
  align-items: center;
  font-size: .32rem;
  color: #ff9900;
}
.not-satisfied-text {
  font-size: .2rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #333333;
  margin-left: .18rem;
  line-height: .3rem;
}
.not-satisfied-num {
  color: #ff3333;
}
.van-icon{
  display: flex;
}
</style>
