<template>
  <div class="buyGoodDivC">
    <div class="ui-modal-body" :style="styleData.uiModalBody">
      <div class="ad-img"></div>
      <div class="silk-ribbon1"></div>
      <div class="silk-ribbon2"></div>
      <div class="silk-ribbon3"></div>
      <div class="goodContainer">
        <div class="goodItemDiv" v-for="(item, index) in giftBagData.exposedGoods">
          <img class="goodImgDiv" :src="item.skuImg" />
          <div class="goodRightDiv">
            <div class="goodNameDiv">{{ item.skuName }}</div>
            <div class="goodPriceDiv">￥{{ item.skuPrice }}</div>
          </div>
        </div>
      </div>
      <div class="prizeContainer-top">
        <div class="prizeItemDiv" v-for="(item, index) in giftBagData.prizeData" :key="index">
          <span>加购领</span>
          <!-- <span>
            <span v-if="item.prizeType == '1' || item.prizeType == '4'">{{ item.beanNum }}</span>
            <span v-else-if="item.prizeType == '101'">{{ item.priceInfo }}</span>
            <span v-else-if="item.prizeType == '102'">{{ item.priceInfo }}</span>
          </span>
          <span>
            <span v-if="item.prizeType == '101' || item.prizeType == '102'">元</span>
            <span v-else-if="item.prizeType == '1'">个</span>
            <span v-else-if="item.prizeType == '4'"></span>
          </span> -->
          <span>{{ item.prizeName }}</span>
        </div>
      </div>
      <div class="prizeContainer-bottom">
      </div>
      <div class="btnDiv" @click="btnClick()"></div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['styleData', 'giftBagData'],
  data() {
    return {};
  },
  created() {
    console.log(this.giftBagData, '加购礼包模板数据');
  },
  methods: {
    //收下礼包
    btnClick() {
      this.$emit('btnClickEmit', {});
    }
  }
};
</script>

<style lang="scss" scoped="scoped">
.buyGoodDivC {
  .goodContainer {
    width: 100%;
    height: 2.8rem;
    overflow-y: scroll;
    margin: 0 auto;
    display: flex;
    align-items: center;
    flex-direction: column;
    position: absolute;
    top: 1.6rem;
    padding-bottom: 0.88rem;
    .goodItemDiv {
      background: #fff;
      width: 4.02rem;
      height: 0.88rem;
      flex-shrink: 0;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      font-size: 0.24rem;
      color: #333333;
      margin-bottom: 0.1rem;
      border-radius: 0.08rem;
      .goodImgDiv {
        border: 0;
        max-width: 100% !important;
        vertical-align: middle;
        width: 0.94rem;
        height: 0.88rem;
        border-top-left-radius:0.08rem;
        border-bottom-left-radius:0.08rem;
      }
      .goodRightDiv {
        margin-left: 0.2rem;
        width: 2.95rem;
        text-align: left;
        .goodNameDiv {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .goodPriceDiv {
          color: #d44d4c;
        }
      }
    }
  }
  .prizeContainer-top {
    width: 100%;
    position: absolute;
    left: 0rem;
    top: 0.46rem;
    pointer-events: none;
    box-sizing: border-box;
    .prizeItemDiv {
      font-family: "Microsoft YaHei";
      font-size: 0;
      color: #fff;
      width: 100%;
      text-align: center;
      span{
        font-size: 0.28rem;
        font-weight: 500;
      }
    }
  }
  .prizeContainer-bottom {
    background: url(https://img10.360buyimg.com/imgzone/jfs/t1/118503/32/40518/10249/64df0c7cFabc1833f/6e17bc2aa881afaa.png) no-repeat;
    background-size: 100%;
    width: 4.93rem;
    height: 2.36rem;
    position: absolute;
    left: -0.23rem;
    top: 3.34rem;
    pointer-events: none;
    padding-top: 1rem;
    box-sizing: border-box;
    .prizeItemDiv {
      font-size: 0.36rem;
      color: #ffecb1;
      width: 100%;
      text-align: center;
    }
  }
  .btnDiv{
    background: url(https://img10.360buyimg.com/imgzone/jfs/t1/179057/13/36832/14201/64df0a5fFc0f7e7e3/7f65bf470ad3b93a.png) no-repeat;
      background-size: 100% 100%;
      width: 2.6rem;
      height: .55rem;
      margin: 0rem auto 0;
      box-sizing: border-box;
      text-align: center;
      position: absolute;
      top: 4.71rem;
      left: calc(50% - 1.3rem);
  }
}
.ad-img{
  width: 3.72rem;
  height: 0.42rem;
  background: url('https://img10.360buyimg.com/imgzone/jfs/t1/179048/21/37036/5343/64df0c7aF853d1f2c/ced8c09a4cf4f7c5.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 0.9rem;
  left: 50%;
  transform: translateX(-50%);
}
.silk-ribbon1{
  width: 1.49rem;
  height: 1.11rem;
  background: url('https://img10.360buyimg.com/imgzone/jfs/t1/110878/31/41851/6565/64df0d29F55dbd964/980bc88aac7add43.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: -1.11rem;
  right: -0.6rem;
}
.silk-ribbon2{
  width: 0.44rem;
  height: 1.75rem;
  background: url('https://img10.360buyimg.com/imgzone/jfs/t1/179294/29/36176/3344/64df0c7aF4d25a31e/ba39dac3430c0ecc.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 1.6rem;
  right: -0.44rem;
}
.silk-ribbon3{
  width: 2.12rem;
  height: 1.22rem;
  background: url('https://img10.360buyimg.com/imgzone/jfs/t1/211311/5/30556/6560/64df0c7aFff0a12ae/e7dd9d39fd8cea52.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  bottom: -0.43rem;
  left: -0.65rem;
  z-index: 2;
}
</style>
