<template>
  <div class="prizeTypeTwoDivAllC">
    <div class="ui-modal-body bb" :style="styleData.uiModalBody">
      <!-- <div class="desc"></div> -->
      <div class="prizeDivAll">
        <div
          class="prize-style"
          :style="giftBagData.prizeData[1] ? 'margin-left:-0.1rem;' : ''"
        >
          <div class="prizeOneDiv">
            <div class="beanNumDiv">
              <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>
            </div>
            <div class="prizeTypeDiv">
              {{ giftBagData.prizeData[0].prizeTypeName }}
            </div>
            <!-- <div v-if="giftBagData.prizeData[0].prizeType == '1'"><span class="beanDiv">个</span></div>
            <div v-if="giftBagData.prizeData[0].prizeType == '4'"><span class="beanDiv">分</span></div>
            <div v-if="giftBagData.prizeData[0].prizeType == '101' || giftBagData.prizeData[0].prizeType == '102'"><span class="beanDiv">元</span></div> -->
          </div>
        </div>
        <div
          class="prize-style"
          v-if="giftBagData.prizeData[1]"
          style="margin-left:0.2rem;"
        >
          <div class="prizeOneDiv prizeTwoDiv">
            <div class="beanNumDiv">
              <span
                v-if="
                  giftBagData.prizeData[1].prizeType == '1' ||
                    giftBagData.prizeData[1].prizeType == '4'
                "
                >{{ giftBagData.prizeData[1].beanNum }}</span
              >
              <span v-else-if="giftBagData.prizeData[1].prizeType == '101'">{{
                giftBagData.prizeData[1].priceInfo
              }}</span>
              <span v-else-if="giftBagData.prizeData[1].prizeType == '102'">{{
                giftBagData.prizeData[1].priceInfo
              }}</span>
            </div>
            <div class="prizeTypeDiv">
              {{ giftBagData.prizeData[1].prizeTypeName }}
            </div>
            <!-- <div v-if="giftBagData.prizeData[1].prizeType == '1'"><span class="beanDiv">个</span></div>
            <div v-if="giftBagData.prizeData[1].prizeType == '4'"><span class="beanDiv">分</span></div>
            <div v-if="giftBagData.prizeData[1].prizeType == '101' || giftBagData.prizeData[1].prizeType == '102'"><span class="beanDiv">元</span></div> -->
          </div>
        </div>
      </div>
      <div class="btnDiv smallBig" @click="btnClick()"></div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["styleData", "giftBagData"],
  data() {
    return {};
  },
  created() {
    console.log(this.giftBagData, "关注店铺数据111");
  },
  methods: {
    //收下礼包
    btnClick() {
      this.$emit("btnClickEmit", {});
    }
  }
};
</script>

<style lang="scss" scoped="scoped">
.prizeTypeTwoDivAllC {
  .ui-modal-body {
    top: calc(50% - 4rem) !important;
  }
  .desc {
    background: url(//img10.360buyimg.com/imgzone/jfs/t1/2428/30/14180/20365/5bdaab95E499d8199/16e1eea8643fa402.png)
      no-repeat;
    background-size: 100%;
    width: 5.77rem;
    height: 4.37rem;
    position: absolute;
    left: calc(50% - 3.1rem);
    top: 0.15rem;
    z-index: 10;
  }
  .prizeDivAll {
    display: flex;
    margin-top: 0.2rem;
    margin-left: 1.4rem;
    width: 58%;
    .prize-style {
      text-align: center;
      font-weight: 700;
      flex: 1 1 0%;
    }
    .prizeOneDiv {
      width: 2.36rem;
      height: 1.54rem;
      display: inline-block;
      background: url(//img10.360buyimg.com/imgzone/jfs/t1/148608/40/37312/2044/65b0fbc8F9bbbd68e/d9406bfb524528f9.png)
        no-repeat;
      background-size: 100%;
      margin-top: 2.85rem;
      text-align: center;
      position: relative;
      padding-top: 0.35rem;
    }
    .prizeTwoDiv {
      width: 2.36rem;
      height: 1.54rem;
      display: inline-block;
      background: url(//img10.360buyimg.com/imgzone/jfs/t1/148608/40/37312/2044/65b0fbc8F9bbbd68e/d9406bfb524528f9.png)
        no-repeat;
      background-size: 100%;
      margin-top: 2.85rem;
      padding-top: 1.15rem;
      text-align: center;
      position: relative;
      padding-top: 0.35rem;
    }
    .beanNumDiv {
      font-size: 0.5rem;
      color: #c8152b;
    }
    .prizeTypeDiv {
      font-size: 0.3rem;
      color: #c8152b;
    }
    .beanDiv {
      width: 0.3rem;
      height: 0.3rem;
      border-radius: 100%;
      background: #fff;
      font-size: 0.12rem;
      display: block;
      line-height: 0.24rem;
      color: #7a27b0;
      position: absolute;
      right: 0.35rem;
      top: 1.23rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .classifyAppDiv {
    font-size: 0.24rem;
    color: #ff24bf;
    margin-top: 0.1rem;
    text-align: center;
  }
  .btnDiv {
    width: 4.22rem;
    height: 0.87rem;
    display: block;
    background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/247185/17/3867/20435/65b0fa39F5d8db65d/c3c75b291f3148cb.png);
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
    left: 50%;
    bottom: 0.33rem;
    transform: translatex(-50%);
  }
}
@keyframes smallBig {
  0% {
    transform:translatex(-50%) scale(0.85);
  }
  100% {
    transform: translatex(-50%) scale(1);
  }
}
.smallBig {
  animation-name: smallBig;
  animation-direction: alternate;
  animation-timing-function: linear;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
}
</style>
