<template>
  <div class="basicMaskDiv" @click="closeClick" v-if="show">
    <div class="packet_bg">
      <div v-if="!shibai" class="packet_text">恭喜你获得红包</div>
      <div v-if="shibai" class="packet_text">很遗憾，未抢到红包</div>
      <div class="packet_price" v-if="!shibai">
        <span style="font-size: .6rem;">&yen;</span>
        <span style="font-size: .6rem;">{{ curOpenPacketMoney }}</span>
      </div>
      <div class="packet_price" v-if="shibai">
      </div>
<!--      <div class="packet_limitDate">有效期至：{{ hbPlanEndTime }}</div>-->
      <div class="btns">
        <a class="goToShop-hb" v-lz-click="'4'" @click="gotoSkuPage(shopId)"></a>
        <div v-if="!shibai" class="getPrize-hb" @click="closeClick()"></div>
        <div v-if="shibai" class="getPrize1-hb" @click="closeClick()"></div>
      </div>

      <div class="closeBtn-hb-hb" @click="closeClick()"></div>
    </div>
  </div>
</template>

<script>
import apis1 from "../../../util/apis1.js";
let { storeGoodsPoint } = apis1;
import { goToShopPage } from "../../../util/tools.js";

export default {
  props: [],
  components: {},
  data() {
    return {
      show: true,
      hbPlanEndTime:'',
      curOpenPacketMoney:0,
      shibai:false
    };
  },
  created() {
    document.querySelector("body").setAttribute("style",
      "position:#fixed;top:0;height:100%;overflow:hidden"
    );
    this.initData();
  },
  methods: {
    initData(){
      if(this.data.resp_code == 60002 || this.data.resp_code == 60010){
        this.shibai = true
        return
      }
       if(this.data.data.result == false){
        this.shibai = true
        return
      }else if(this.data.data.result == true && this.data.data.status == 0){
        this.shibai = true
        return
      }

      this.curOpenPacketMoney = this.data.data.priceInfo;

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

<style lang="scss">
.packet_bg{
  background: url("https://img10.360buyimg.com/imgzone/jfs/t1/30381/22/14346/105509/5cbdac1dEe052cf35/4d810793198abb8f.png") no-repeat;
  background-size: 100%;
  width:6.54rem;
  height:7.98rem;
  margin:2.4rem auto 0;
  position: relative;
}
.packet_text {
  font-size: .44rem;
  color:#fef7cd;
  text-align: center;
  text-shadow: 0 3px 1px #f2600f;
  font-weight: bold;
  padding-top:.88rem;
}
.packet_price{
  font-size: 1.1rem;
  background: -webkit-linear-gradient(#fefeeb, #fff0b0); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(#fefeeb, #fff0b0); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(#fefeeb, #fff0b0); /* Firefox 3.6 - 15 */
  background: linear-gradient(#fefeeb, #fff0b0); /* 标准的语法（必须放在最后） */
  -webkit-background-clip: text; /*必需加前缀 -webkit- 才支持这个text值 */
  -webkit-text-fill-color: transparent; /*text-fill-color会覆盖color所定义的字体颜色： */
  color:#fef7cd;
  text-align: center;
  font-weight: bold;
  line-height: .9rem;
  margin-top:.52rem;
}
.packet_limitDate{
  font-size: .22rem;
  color:#fef7cd;
  background: -webkit-linear-gradient(#fefeeb, #fff0b0); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(#fefeeb, #fff0b0); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(#fefeeb, #fff0b0); /* Firefox 3.6 - 15 */
  background: linear-gradient(#fefeeb, #fff0b0); /* 标准的语法（必须放在最后） */
  -webkit-background-clip: text; /*必需加前缀 -webkit- 才支持这个text值 */
  -webkit-text-fill-color: transparent; /*text-fill-color会覆盖color所定义的字体颜色： */
  text-align: center;
}
.btns{
    display: flex;
    justify-content: center;
    margin-top: 2.8rem;
    position: absolute;
    width: 100%;
    top: 3.2rem;
}
.goToShop-hb{
  background: url("https://img10.360buyimg.com/imgzone/jfs/t1/34327/25/3904/6551/5cbdac1dEece17649/055fae0fc6d327d5.png") no-repeat;
  background-size: 100%;
  width:2.73rem;
  height:.86rem;
}
.getPrize-hb{
  background: url("https://img10.360buyimg.com/imgzone/jfs/t1/33593/3/6412/6772/5cbdac1dEcebfbe9f/667a3695f8613990.png") no-repeat;
  background-size: 100%;
  width:2.73rem;
  height:.86rem;
}
.getPrize1-hb{
  background: url("https://img10.360buyimg.com/imgzone/jfs/t1/199599/16/20116/13492/61b4a395E9a606c07/a1d526e5e0caf47f.png") no-repeat;
  background-size: 100%;
  width:2.73rem;
  height:.86rem;
}
.closeBtn-hb-hb{
  background: url("https://img10.360buyimg.com/imgzone/jfs/t1/40063/12/1642/1477/5cbdac1dEc8370051/cf64947ff8688863.png") no-repeat;
  background-size: 100%;
  width:.6rem;
  height:.6rem;
  position: absolute;
    left: calc(50% - 0.3rem);
    top: 8rem;
}
.basicMaskDiv {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  top: 0;
  bottom: 0;
  z-index: 200;
}
</style>
