<template>
  <div class="prizeTypeThreeDivAllC1">
    <div class="ui-modal-body" :style="styleData.uiModalBody">
      <div>
        <div class="titleDiv" style="padding-top: 1.7rem;"><span></span></div>
        <div class="ui-content-box" style="margin-top: 0.5rem;">
          <div class="itemDiv" v-for="(item, index) in giftBagData.prizeData">
            <div class="prizeLimit" v-if="item.prizeType == '101' || item.prizeType == '102'">
              满{{ item.fullPriceInfo }}元可用
            </div>
            <div class="prizeItemDiv">
              <img class="prizeIconDiv" v-if="item.prizeType == '1'"
                src="http://img10.360buyimg.com/imgzone/jfs/t1/3964/3/6228/3119/5ba1f217E6e73b13b/f287bebd2336359e.png" />
              <img class="prizeIconDiv" v-if="item.prizeType == '4'"
                src="http://img10.360buyimg.com/imgzone/jfs/t1/3696/21/6027/3158/5ba1f218E97d26a68/bb330bddd4c57d62.png" />
              <img class="prizeIconDiv" v-if="item.prizeType == '101' || item.prizeType == '102'"
                src="http://img10.360buyimg.com/imgzone/jfs/t1/685/38/6501/2937/5ba1f218E21098baf/25b373ae367d23bb.png" />
              <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="beanText" v-if="item.prizeType == '102' || item.prizeType == '101'">优惠券</span>
              <span class="beanText" v-else>{{ item.prizeTypeName }}</span>
            </div>
          </div>
        </div>
        <div class="btnDiv" @click="btnClick()"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['styleData', 'giftBagData'],
  data() {
    return {};
  },
  created() {
    console.log(this.giftBagData, '3个奖品数据');
  },
  methods: {
    btnClick() {
      this.$emit('btnClickEmit', {});
    }
  }
};
</script>

<style lang="scss" scoped="scoped">
.ui-modal-body {
  width: 5.52rem !important;
  height: 8.23rem !important;
  left: 50% !important;
  transform: translateX(-50%);
}
.prizeTypeThreeDivAllC1 {
  .giftBagTypeDiv {
    padding-top: 2.7rem;
    color: #ffffff;
    font-size: 0.5rem;
  }
  .titleDiv {
    font-size: 0.3rem;
    color: #fff;
    line-height: 0.5rem;
  }
  .ui-content-box {
    .itemDiv {
      position: relative;
      font-size: 0.36rem;
      color: #333;
      display: flex;
      width: 4.88rem;
      height: 1.3rem;
      background: url("//img10.360buyimg.com/imgzone/jfs/t1/230769/37/13088/38254/65c08b11F23ceab69/a1e7e0c015676a99.png")
        no-repeat;
      background-size: 100% 100%;
      margin: 0 auto;
      padding-left: 0.45rem;
      padding-bottom: 0.1rem;
      .prizeItemDiv {
        width: 100%;
        height: 100%;
        display: inline-block;
        // background: url(//img10.360buyimg.com/imgzone/jfs/t1/3057/24/6088/2510/5ba1f218Ee8de2794/5844e74d4953bbf3.png) no-repeat;
        background-size: 100%;
        display: flex;
        align-items: center;
        .prizeIconDiv {
          width: 0.68rem;
          height: 0.68rem;
          margin-right: 6px;
        }
        .beanNumDiv {
          color: #cd2610;
          font-size: 0.38rem;
          margin: 0 0.1rem;
          margin-left: 1.05rem;
        }
        .beanText {
          color: #743226;
          font-size: 0.3rem;
        }
      }
    }
  }
  .btnDiv {
    width: 3.88rem;
    height: 0.96rem;
    // margin-top: 1.3rem;
    position: absolute;
    bottom: 0.8rem;
    left: 50%;
    transform: translateX(-50%);
    display: inline-block;
    background-color: initial;
    background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/166151/1/41994/45916/65c08908Fd40aa216/a2bb7660c3c0dbd6.png);
    background-repeat: no-repeat;
    background-size: 100%;
    font-size: 0.55rem;
    color: #fff;
    line-height: 1rem;
    text-align: center;
  }
}
.prizeLimit {
  position: absolute;
  top: 0.8rem;
  right: 0.6rem;
  width: 2.2rem;
  height: 0.27rem;
  background: url("//img10.360buyimg.com/imgzone/jfs/t1/227648/34/13566/1014/65b0ffdcFb215b89e/d2124e03cdacc515.png")
    no-repeat;
  background-size: 100% 100%;
  line-height: 0.27rem;
  font-size: 0.2rem;
  text-align: center;
  color: #743226;
}
</style>
