<template>
  <div class="prizePopMaskDiv" v-show="show">
    <div class="prizePopBox">
      <div style="display: flex;padding-left: 0.47rem;padding-right: 0.62rem;">
        <img class="goods-img" :src="skuObj.skuImage" alt="">
        <div class="info">
          <div class="name">{{ skuObj.skuName }}</div>
          <div class="pricenew">预估券后价:￥{{ skuObj.posCouponPrice }}</div>
          <div class="price">京东价:￥{{ skuObj.skuPrice }}</div>
        </div>
      </div>
      <div class="btnStyle">
        <!-- 立即参与 -->
        <button class="btnLeftClass" @click="buttonClick(1)"></button>
        <!-- 自己开团 -->
        <button class="btnRight12Class" @click="buttonClick(2)"></button>
      </div>
    </div>
  </div>
</template>

<script>
import { sharePopComService10101Fly } from '../../../util/hdzxtcomCreate.js';
import apis1 from "../../../util/apis1.js";
import Vue from 'vue';
import { Notify, Toast } from 'vant';
import store from "../../../store/store";
Vue.use(Toast, Notify);
let { pieceTogetherPrizeInfo } = apis1;
export default {
  props: [],
  components: {
  },
  data() {
    return {
      prizeInfoId: sessionStorage.getItem('prizeInfoId'),
      skuObj: {}
    };
  },
  created() {
  },

  mounted() {
    document.querySelector('body').setAttribute('style', 'position:#fixed;top:0;height:100%;overflow:hidden');
    this.initData();
  },
  methods: {
    initData() {
      console.log('skuObj', this.skuObj)
      //去请求接口
      if (this.isTemplate == true) {
        //不请求接口 模板预览
      } else {
        console.log('12312312312');
        //去请求接口 TODO
        pieceTogetherPrizeInfo(this.prizeInfoId, (res) => {
          this.isDisable = false
          if (res.resp_code == 0) {
            this.skuObj = res.data
            console.log(res, 'res', this.skuObj);
          }

        })

      }
    },
    buttonClick(type) {
      document.querySelector('body').removeAttribute('style');
      this.submit(type);

    },
  }
};
</script>

<style lang="scss" scoped="scoped">
.prizePopMaskDiv {
  width: 100%;
  height: 100%;
  background: rgba($color: #000000, $alpha: 0.7);
  position: fixed;
  top: 0;
  z-index: 201;
}

.goods-img {
  width: 1.66rem;
  height: 1.66rem;
  margin-right: 0.27rem;
}

.info {
  color: #000;
  width: 3.84rem;

  .name {
    font-size: 0.24rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .pricenew {
    width: 2.62rem;
    height: 0.48rem;
    background: url(//img10.360buyimg.com/imgzone/jfs/t1/87549/38/37153/617/64faeaa7F00da1879/52e6db4f6d164737.png);
    background-repeat: no-repeat;
    background-size: 100%;
    font-size: 0.28rem;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0.23rem;
    margin-bottom: 0.18rem;
  }

  .price {
    font-size: 0.2rem;
    text-decoration: line-through
  }
}

.prizePopBox {
  position: absolute;
  top: 2.71rem;
  left: 50%;
  width: 6.91rem;
  height: 7.59rem;
  background: url("//img10.360buyimg.com/imgzone/jfs/t1/221179/33/35207/91195/64fa85ccF9e73991d/098cd54d0c76995b.png") no-repeat;
  background-size: 100% 100%;
  transform: translateX(-50%);
  padding-top: 1.62rem;
}

.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%;
  bottom: -0.8rem;
  left: 50%;
  transform: translateX(-50%);
}

.btnStyle {
  position: absolute;
  top: 5.07rem;
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.btnLeftClass {
  width: 2.99rem;
  height: 0.73rem;
  background-image: url("//img10.360buyimg.com/imgzone/jfs/t1/141096/18/38472/10051/64fae6a7F6d89d87e/aeacc58b3cbe2d16.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-bottom: 0.36rem;
}

.btnRight12Class {
  width: 4.94rem;
  height: 0.73rem;
  background-image: url("//img10.360buyimg.com/imgzone/jfs/t1/127888/27/40765/11899/64fae6a7Fef2c48d7/96f26d3fa93bc9c9.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>


