<template>
  <div class="buyGoodDivC">
    <div class="ui-modal-body" :style="styleData.uiModalBody">
      <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" v-if="giftBagData.isShowPrice == 1">{{ item.skuPrice }}</div>
          </div>
        </div>
      </div>
      <div class="prizeContainer">
        <div class="prizeBox">
          <div class="prizeItemDiv" v-for="(item, index) in giftBagData.prizeData" :key="index">
          {{item.prizeName}}
        </div>
        </div>
      </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: 4rem;
    overflow-y: scroll;
    margin: 0 auto;
    display: flex;
    align-items: center;
    flex-direction: column;
    position: absolute;
    top: 1.8rem;
    .goodItemDiv {
      background: url(https://img10.360buyimg.com/imgzone/jfs/t1/80601/40/27972/6420/66c7f030Fe161be14/e0c28a163c14cbcf.png) no-repeat;
      background-size: 100%;
      width: 5.28rem;
      height: 1.59rem;
      flex-shrink: 0;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      font-size: 0.24rem;
      color: #333333;
      margin-bottom: 0.1rem;
      .goodImgDiv {
        border: 0;
        max-width: 100% !important;
        vertical-align: middle;
        width: 1.3rem;
        height: 1.3rem;
        margin-left: 0.1rem;
      }
      .goodRightDiv {
        margin-left: 0.2rem;
        width: 3.2rem;
        text-align: left;
        .goodNameDiv {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          color: #fff;
        }
        .goodPriceDiv {
          color: #fff;
        }
      }
    }
  }
  .prizeContainer {
    background: url(https://img10.360buyimg.com/imgzone/jfs/t1/41704/40/24153/10903/66c7f030F645ea489/1be547835a114f68.png) no-repeat;
    background-size: 100%;
    width: 5.94rem;
    height: 2.62rem;
    position: absolute;
    left: .18rem;
    bottom: 0;
    pointer-events: none;
    padding-top: .7rem;
    box-sizing: border-box;
    .prizeBox {
      font-size: 0.36rem;
      color: #fff;
      width: 5.68rem;
      height: .68rem;
      text-align: center;
      border-radius: .2rem;
      background: #eb285e;
      margin:0 auto;
      .prizeItemDiv {
          width: 33%;
          height: 100%;
          font-size: 0.28rem;
          display: flex;
          justify-content: center;
          align-items: center;
        }
    }
  }
  .btnDiv{
    background: url(https://img10.360buyimg.com/imgzone/jfs/t1/121427/15/46128/35705/66c7f031F4187b8e8/cf82ee9ab09b893f.png) no-repeat;
      background-size: 100%;
      width: 4.64rem;
      height: 1.1rem;
      margin: 0rem auto 0;
      padding-top: .1rem;
      box-sizing: border-box;
      text-align: center;
      font-size: .42rem;
      color: #d01b35;
      position: absolute;
      bottom: .1rem;
      left: calc(50% - 2.32rem);
  }
}
</style>
