<template>
  <div class="prizeTypeTwoDivAllC">
    <div class="ui-modal-body" :style="styleData.uiModalBody">
      <div class="desc"></div>
      <div class="prizeDivAll">
        <div class="prize-style">
          <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]">
          <div class="prizeOneDiv prizeTwoDiv">
            <div class="beanNumDiv">{{ giftBagData.prizeData[1].beanNum }}</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="classifyAppDiv">~店铺礼包福利~</div>
      <div class="btnDiv" @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 {
  .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.65rem;
    width: 58%;
    .prize-style {
      text-align: center;
      font-weight: 700;
      flex: 1 1 0%;
    }
    .prizeOneDiv {
      width: 1.68rem;
      height: 2.76rem;
      display: inline-block;
      background: url(//img10.360buyimg.com/imgzone/jfs/t1/7264/15/3793/4517/5bdaab95Ee99cf37c/018b872f756d4695.png) no-repeat;
      background-size: 100%;
      margin-top: 3.7rem;
      padding-top: 1.15rem;
      position: relative;
    }
    .prizeTwoDiv {
      width: 1.68rem;
      height: 2.76rem;
      display: inline-block;
      background: url(//img10.360buyimg.com/imgzone/jfs/t1/7264/15/3793/4517/5bdaab95Ee99cf37c/018b872f756d4695.png) no-repeat;
      background-size: 100%;
      margin-top: 3.7rem;
      padding-top: 1.15rem;
      position: relative;
    }
    .beanNumDiv {
      font-size: 0.48rem;
      color: #fff;
      line-height: 0.72rem;
    }
    .prizeTypeDiv {
      font-size: 0.3rem;
      color: #fff;
      line-height: 0.24rem;
    }
    .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.56rem;
    height: 1.06rem;
    margin: 0 auto;
    margin-top: 0.1rem;
    display: block;
    background-color: initial;
    background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/6722/30/4678/14068/5bdaab95E1e7d8a7d/a18bb83d0b02a057.png);
    background-repeat: no-repeat;
    background-size: 100%;
    font-size: 0.4rem;
    color: #fff;
    line-height: 0.9rem;
    text-align: center;
  }
}
</style>
