<template>
  <div>
    <div class="ui-modal-body" :style="styleData.uiModalBody">
      <div :style="styleData.contentDiv" class="contentDiv">
        <div>
          <div :style="styleData.prizeDiv" class="prizeDiv">
            <span class="prizeDivText">
              <span
                v-if="giftBagData.prizeData[0].prizeType == '1' || giftBagData.prizeData[0].prizeType == '4'">{{ giftBagData.prizeData[0].beanNum }}</span>
              <span
                v-else-if="giftBagData.prizeData[0].prizeType == '101'">{{ giftBagData.prizeData[0].priceInfo }}</span>
              <span
                v-else-if="giftBagData.prizeData[0].prizeType == '102'">{{ giftBagData.prizeData[0].priceInfo }}</span>
            </span>

            <span class="unitBack">
              <span class="unitBackText"
                v-if="giftBagData.prizeData[0].prizeType == '101' || giftBagData.prizeData[0].prizeType == '102'"
                :style="styleData.prizeTypeDiv">满{{ giftBagData.prizeData[0].fullPriceInfo }}可用</span>
              <span class="unitBackText" v-else>{{ giftBagData.prizeData[0].prizeTypeName }}</span>
            </span>
          </div>
          <div class="btnDiv" @click="btnClick"></div>
        </div>
      </div>
    </div>
  </div>
</template>

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

<style lang="scss" scoped="scoped">
.tip-icon {
  width: 0.46rem;
  height: 0.46rem;
  position: absolute;
  bottom: 3.8rem;
  left: 1.3rem;
  display: inline-block;
  background-color: initial;
  background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/110501/5/46763/1286/65c09c33Fe9dce0a4/08003a7f7a9a8120.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.prizeDivText {
  display: inline-block;
  transform: rotate(-25deg) !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  color: #da472e !important;
  position: absolute;
  top: 3.1rem;
  left: 1.4rem;
}
.contentDiv {
  padding-top: 3rem !important;
}
.unitBack {
  display: inline-block;
  width: 1.71rem;
  height: 1.31rem;
  display: inline-block;
  background-color: initial;
  background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/160990/6/41926/4657/65c098d0Fabcc1d50/d9390bfdd32d6291.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 2.1rem;
  left: 2.8rem;
}
.unitBackText {
  display: inline-block;
  transform: rotate(-29deg) !important;
  color: #fff !important;
  font-size: 0.18rem !important;
  position: relative;
  top: 0.25rem;
  left: 0.1rem;
}
.btnDiv {
  width: 4.4rem;
  height: 1.08rem;
  // margin-top: 1.3rem;
  position: absolute;
  bottom: 0.6rem;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  background-color: initial;
  background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/110180/22/41408/8316/65c08908F98843f3e/226a826b7455bd83.png);
  background-repeat: no-repeat;
  background-size: 100%;
  font-size: 0.55rem;
  color: #fff;
  line-height: 1rem;
  text-align: center;
}
.videoStyle {
  position: absolute;
  background-color: initial;
  background-repeat: no-repeat;
  background-size: 100%;
  z-index: 1;
  width: 6.5rem;
  height: 10rem;
  left: calc(50% - 3.25rem);
  top: calc(50% - 5rem);
}
</style>
