<template>
  <div>
    <div class="wishPrizeList" :style="styleData.wishPrizeList">
      <ul>
        <li v-for="(item, index) in drawPrizeList" :key="index">
          <div class="imgkuang">
            <img :src="item.showImg" alt="" />
            <p>{{ item.prizeName }}</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>

import apis1 from "../../../util/apis1.js";
let { drawPrize } = apis1;
export default {
  props: ["styleData", "datas", "keyData", "isTemplate", "templateData"],
  data() {
    return {
      drawPrizeList:[]
    };
  },
  // 父beforeCreated ->父created ->父beforeMounted ->子beforeCreated ->子created ->子beforeMounted ->子mounted -> 父mounted
  mounted() {
   this.initDatas()
  },
  methods: {
    //按钮点击
    initDatas(){
      if(this.isTemplate){
        if(this.templateData){
            // console.log(this.templateData)
            this.drawPrizeList = this.templateData.wishHy.draw.prizeList
        }else{
             this.drawPrizeList =[
               {
                 'beanNum': 1,
'id': "1381515722354192385",
'planId': "1230564",
'position': 1,
'prizeName': "1",
'prizeType': 1,
'productUrl': "",
'showImg': "//img10.360buyimg.com/imgzone/jfs/t1/149370/34/18647/46712/5fd996ffE13b5f450/db0928bd887bf1bc.png"
               }
             ]
        }
      }else{
         drawPrize((data)=>{
      console.log(data)
      this.drawPrizeList = data.data.prizeInfo
    })
      }
    }
  }
};
</script>

<style lang="scss">
.wishPrizeList ul {
  width: 90%;
  height: 5.5rem;
  position: absolute;
  top: 1.4rem;
}
.wishPrizeList ul li {
  width: 1.11rem;
  height: 1.4rem;
  margin-left: 0.6rem;
  margin-right: 0.5rem;
  margin-top: 0.5rem;
  float: left;
}
.imgkuang {
  width: 1.11rem;
  height: 1.08rem;
  border: 3px solid #249cf3;
}
.imgkuang p {
  font-size: 0.2rem;
  width: 100%;
  margin-top: 0.15rem;
  height: 0.35rem;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
}
</style>
