<template>
  <div class="dzTwoDivAllC">
    <div class="ui-modal-body" :style="styleData.uiModalBody"  @click="btnClick">
      <div class="prompteDiv">关注店铺即可领取奖品</div>
      <div class="prizeDivAll">
        <div class="itemPrizeDiv" v-for="(item, index) in giftBagData.prizeData">
          <span class="beanNumDiv">
            <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 class="beanDiv">
            <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 class="prizeTypeNameDiv">{{ item.prizeTypeName }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['styleData', 'giftBagData'],
  data() {
    return {};
  },
  created() {
    console.log(this.giftBagData, 'giftBagData');
    this.styleData.uiModalBody['top'] = 0;
  },
  methods: {
    //收下礼包
    btnClick() {
      this.$emit('btnClickEmit', {});
    }
  }
};
</script>

<style lang="scss" scoped="scoped">
.dzTwoDivAllC {
  .prompteDiv {
    padding-top: 5.5rem;
    font-size: 12px;
    color: #ffffff;
  }
  .prizeDivAll {
    .itemPrizeDiv {
      font-size: 1.1rem;
      color: #fecf4b;
      .beanNumDiv {
        display: inline-block;
        min-width: 1.29rem;
        text-align: center;
      }
      .beanDiv {
        font-size: 0.24rem;
        position: relative;
        bottom: 0.6rem;
        left: -0.2rem;
        border: solid 0.03rem #fb8843;
        width: 0.4rem;
        height: 0.4rem;
        border-radius: 50%;
        text-align: center;
        line-height: 0.35rem;
        display: inline-block;
      }
      .prizeTypeNameDiv {
        font-size: 0.48rem;
        position: relative;
        display: inline-block;
        vertical-align: baseline;
        left: -0.92rem;
        text-align: center;
      }
    }
  }
}
</style>
