<template>
  <div class="prizeTypeThreeDivAllC1">
    <div class="ui-modal-body" :style="styleData.uiModalBody">
      <div class="ui-content-box">
        <div class="prizeItemDiv" v-for="(item, index) in giftBagData.prizeData">
          <div class="flower"></div>
          <div class="prizeIconDiv">
            <img v-if="item.prizeType == '1'" src="https://img10.360buyimg.com/imgzone/jfs/t1/215686/35/12596/38974/620b6dacE10f612d4/97a766f8921fe39f.png" />
            <img v-if="item.prizeType == '4'" src="https://img10.360buyimg.com/imgzone/jfs/t1/221283/19/10655/37277/620b6dacEf759d417/0132c2aa75302c3a.png" />
            <img v-if="item.prizeType == '101' || item.prizeType == '102'" src="https://img10.360buyimg.com/imgzone/jfs/t1/87934/29/22879/19787/620b6dadE6e712f6f/5ade96e178f1fbb0.png" />
          </div>
          <div class="beanNumDiv">
            <div class="prizeNames">
              <span>{{ (item.prizeType == '1' || item.prizeType == '4') ? item.beanNum : item.priceInfo+'元' }}</span>
              {{ (item.prizeType == '101' || item.prizeType == '102') ? '优惠券' : item.prizeTypeName }}
            </div>
          </div>
        </div>
      </div>
      <div class="btnDiv" @click="btnClick()"></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">
  .prizeTypeThreeDivAllC1 {
    .ui-content-box {
      height: 100%;
      width: 100%;
      position: relative;
      @keyframes rotate {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(45deg);
        }
      }
      .flower {
        animation-name: rotate;
        animation-direction: alternate;
        animation-timing-function: linear;
        animation-duration: 1s;
        animation-iteration-count: infinite;
      }
      .prizeItemDiv:nth-child(1) {
        width: 1.62rem;
        height: 1.57rem;
        position: absolute;
        top: 4.2rem;
        left: 1.6rem;
        .flower {
          width: 1.62rem;
          height: 1.57rem;
          background: url('//img10.360buyimg.com/imgzone/jfs/t1/178648/3/46429/15989/664ac93cF3fec7534/c3f7c62c6a8894a2.png')
            no-repeat;
          background-size: 100%;
        }
        .prizeIconDiv {
          width: 100%;
          height: 100%;
          overflow: hidden;
          display: flex;
          justify-content: center;
          align-items: center;
          position: absolute;
          top: 0;
          img {
            width: 0.8rem;
            height: 0.8rem;
          }
        }
        .beanNumDiv {
          width: 1.74rem;
          height: 0.73rem;
          background: url('//img10.360buyimg.com/imgzone/jfs/t1/209684/3/43156/5732/664ac93cFc1bef97d/692498f254dcf2b2.png')
            no-repeat;
          background-size: 100%;
          position: absolute;
          bottom: -0.5rem;
          right: -0.7rem;
          .prizeNames {
            width: 100%;
            display: flex;
            justify-content: center;
            font-size: 0.3rem;
            color: #fff;
            margin-top: 0.22rem;
          }
        }
      }
      .prizeItemDiv:nth-child(2) {
        width: 1.62rem;
        height: 1.57rem;
        position: absolute;
        top: 3rem;
        left: 2.9rem;
        .flower {
          width: 1.62rem;
          height: 1.57rem;
          background: url('//img10.360buyimg.com/imgzone/jfs/t1/178648/3/46429/15989/664ac93cF3fec7534/c3f7c62c6a8894a2.png')
            no-repeat;
          background-size: 100%;
        }
        .prizeIconDiv {
          width: 100%;
          height: 100%;
          overflow: hidden;
          display: flex;
          justify-content: center;
          align-items: center;
          position: absolute;
          top: 0;
          img {
            width: 0.8rem;
            height: 0.8rem;
          }
        }
        .beanNumDiv {
          width: 1.74rem;
          height: 0.73rem;
          background: url('//img10.360buyimg.com/imgzone/jfs/t1/219208/11/40329/5782/664ac93cF4d4c927f/f3521643c25675bd.png')
            no-repeat;
          background-size: 100%;
          position: absolute;
          top: -0.2rem;
          left: -1.3rem;
          .prizeNames {
            width: 100%;
            display: flex;
            justify-content: center;
            font-size: 0.3rem;
            color: #fff;
            margin-top: 0.1rem;
          }
        }
      }
      .prizeItemDiv:nth-child(3) {
        width: 1.62rem;
        height: 1.57rem;
        position: absolute;
        top: 3.8rem;
        right: 1.5rem;
        .flower {
          width: 1.62rem;
          height: 1.57rem;
          background: url('//img10.360buyimg.com/imgzone/jfs/t1/178648/3/46429/15989/664ac93cF3fec7534/c3f7c62c6a8894a2.png')
            no-repeat;
          background-size: 100%;
        }
        .prizeIconDiv {
          display: none;
          width: 100%;
          height: 100%;
          overflow: hidden;
          display: flex;
          justify-content: center;
          align-items: center;
          position: absolute;
          top: 0;
          img {
            width: 0.8rem;
            height: 0.8rem;
          }
        }
        .beanNumDiv {
          width: 1.74rem;
          height: 0.74rem;
          background: url('//img10.360buyimg.com/imgzone/jfs/t1/228514/21/16375/5737/664ac93cF6fa89ced/d61290eac3bad34c.png')
            no-repeat;
          background-size: 100%;
          position: absolute;
          top: -0.5rem;
          right: -0.7rem;
          .prizeNames {
            width: 100%;
            display: flex;
            justify-content: center;
            font-size: 0.3rem;
            color: #fff;
            margin-top: 0.1rem;
          }
        }
      }
      // .prizeItemDiv {
      //   width: 5.34rem;
      //   height: .94rem;
      //   background: url('//img10.360buyimg.com/imgzone/jfs/t1/226070/6/17750/4442/664ab064Faeb09c8d/af163f8be3c89cb6.png') no-repeat;
      //   background-size: 100%;
      //   margin-bottom: .08rem;
      //   position: relative;
      //   padding: 5px;
      //   display: flex;
      //   &:last-child{
      //     margin-bottom: 0;
      //   }
      //   .prizeIconDiv {
      //     width: .75rem;
      //     height: 100%;
      //     overflow: hidden;
      //     display: flex;
      //     justify-content: center;
      //     align-items: center;
      //     margin-left: .5rem;
      //     img{
      //       width: .6rem;
      //       height: .6rem;
      //     }
      //   }
      //   .beanNumDiv {
      //     width: 3.4rem;
      //     height: 100%;
      //     display: flex;
      //     align-items: center;
      //     margin-left: .3rem;
      //     .prizeNames{
      //       // width: 100%;
      //       // display: flex;
      //       // align-items: flex-end;
      //       color: #a93bfe;
      //       font-size: .3rem;
      //       font-weight: 600;
      //       span{
      //         color: #a93bfe;
      //         font-size: .4rem;
      //         font-weight: 600;
      //       }
      //     }
      //     // .prizeLimit{
      //     //   width: 100%;
      //     //   height: .24rem;
      //     //   line-height: .24rem;
      //     //   font-size: .14rem;
      //     //   text-align: center;
      //     //   color: #fff;
      //     // }
      //   }
      // }
    }
    .btnDiv {
      width: 2.63rem;
      height: 0.79rem;
      position: absolute;

      bottom: 0.6rem;
      left: calc(50% - 2.63rem / 2);
      animation-name: changePic;
      animation-direction: alternate;
      animation-timing-function: linear;
      animation-duration: 2s;
      animation-iteration-count: infinite;
    }
    @keyframes changePic {
      0% {
        background: url(//img10.360buyimg.com/imgzone/jfs/t1/194951/16/45517/8690/664acaacF069a9ec8/d2757a086096f8fe.png)
          no-repeat;
        background-size: 100% 100%;
      }
      100% {
        background: url(//img10.360buyimg.com/imgzone/jfs/t1/191784/29/44161/8473/664ac93dF13dc0442/c76beaa411d38f66.png)
          no-repeat;
        background-size: 100% 100%;
      }
    }
  }
</style>
