<template>
  <div class="ruleMaskDiv" v-if="show">
    <div class="context1" :style="styleData.shopContext">
      <div :style="styleData.shopTitle">购买以下任意商品{{ skuInfoList.tankPrizeVoList.length }}罐</div>
      <div class="context">
        <div class="context-item" v-for="(item,index) in skuInfoList.skuInfoList" :key="index">
          <div class="shop-img">
            <img :src="item.skuImg" alt="">
          </div>
          <div class="shop-name">
            {{item.skuName }}
          </div>
          <div class="shop-buy-btn" @click="goToBuy(item)"></div>
        </div>
      </div>
      <div class="close-btn" :style="styleData.closeBtn" @click="closeClick"></div>
    </div>
  </div>
</template>

<script>
import apis1 from "../../../util/apis1.js";
let { storeGoodsPoint, } = apis1;
import { newToSkuPage } from "../../../util/tools.js";
export default {
  props: [],
  data() {
    return {
    };
  },
  created() {
  },
  methods: {
    closeClick() {
      document.querySelector("body").removeAttribute("style");
      this.submit();
    },
    goToBuy(sku) {
      storeGoodsPoint(5)
      this.doFrontBuryPoint({ code: 'spq-cksp1', value: '', event: 'click' })
      newToSkuPage(sku);
    },
  },
};
</script>

<style lang="scss">
.ruleMaskDiv {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 10;
}
.context1 {
  position: absolute;
  left: 50%;
  top: 2.73rem;
  width: 6.48rem;
  height: 7.34rem;
  background: url("//img10.360buyimg.com/imgzone/jfs/t1/107758/7/32062/93623/64e2d8dcF63bce004/e3f0284edb26d117.png")
    no-repeat;
  background-size: 100% 100%;
  transform: translateX(-50%);
  padding: 1.67rem 0.3rem 0.3rem 0.3rem;
  color: #fcdfc5;
  font-size: 0.24rem;
  .context {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    .context-item {
      width: 2.71rem;
      height: 4.06rem;
      background: url("//img10.360buyimg.com/imgzone/jfs/t1/88724/22/45772/10265/6512db4dF0b2dac60/628eee3862631878.png")
        no-repeat;
      background-size: 100% 100%;
      padding: 0.1rem;
      margin-right: 0.05rem;
      margin-bottom: 0.1rem;
      .shop-img {
        background: #fff;
        width: 2.45rem;
        height: 2.45rem;
        border-radius: 0.08rem;
        img {
          width: 100%;
          height: 100%;
          border-radius: 0.08rem;
        }
      }
      .shop-name {
        width: 100%;
        font-size: 0.24rem;
        color: #333;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        margin: 0.18rem 0;
      }
      .shop-buy-btn {
        width: 1.75rem;
        height: 0.65rem;
        background: url("//img10.360buyimg.com/imgzone/jfs/t1/92483/27/45428/10685/6512dd30F2277d07c/4e75f5731cbf4bc3.png")
          no-repeat;
        background-size: 100% 100%;
        margin: 0 auto;
      }
    }
  }
}
.close-btn {
  position: absolute;
  width: 0.45rem;
  height: 0.45rem;
  background: url("//img10.360buyimg.com/imgzone/jfs/t1/183690/31/37249/1097/64e2d8dcFb8273014/2bd869caeaf31168.png")
    no-repeat;
  background-size: 100% 100%;
}
</style>
