<template>
  <div>
    
    <div class="wishAward">
      <div class="getTaskPrizeUserList1" v-if="getTaskPrizeUserList.length > 0">
        <div v-if="getTaskPrizeUserList.length < 10">
          <ul>
            <li v-for="(item, index) in getTaskPrizeUserList" :key="index">
              <div class="user">用户：{{ item.userName }}</div>
              <div style="margin-left: -0.55rem">卡编号：{{ item.cardId }}</div>
              <div>获得{{ item.winning }}等奖</div>
            </li>
          </ul>
        </div>


         <div class="zoom" v-else>
        <swiper ref="mySwiper" :options="enterpriseOption" class="swiper-no-swiping">

          <swiper-slide v-for="(item, index) in getTaskPrizeUserList" :key="index">
           <div class="user">用户：{{ item.userName }}</div>
              <div style="margin-left: -0.55rem">卡编号：{{ item.cardId }}</div>
              <div>获得{{ item.winning }}等奖</div>
            </swiper-slide>
            
        </swiper>
      </div>

        
      </div>
     
    </div>
  </div>
</template>

<script>
import "swiper/swiper-bundle.min.css";
import apis1 from "../../../util/apis1.js";
let { getTaskPrizeUser } = apis1;
export default {
  

  props: ["styleData"],
  data() {
    return {
      getTaskPrizeUserList: [],
      userName: "",
      cardId: 0,
      winning: 0,
      enterpriseOption: {
        noSwiping  : true,
        bserver: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        autoplay: true,
        loop: true,
        direction: "vertical",
          slidesPerView: 10,
      spaceBetween: 0,
      freeMode: true,
      },
    };
  },
 
  created() {
  },
  // 父beforeCreated ->父created ->父beforeMounted ->子beforeCreated ->子created ->子beforeMounted ->子mounted -> 父mounted
  mounted() {
    getTaskPrizeUser((data) => {
      this.getTaskPrizeUserList = data.data;
    });
  },
  methods: {
    //按钮点击
  },
};
</script>

<style lang="scss" scoped>
.wishAward {
  width: 7.42rem;
  height: 6.16rem;
  background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/176366/5/3773/22346/60756071Ea277818d/bd1c1184335c774f.png);
  background-size: 100%;
  left: calc(50% - 7.42rem / 2);
  display: flex;
  justify-content: center;

  .getTaskPrizeUserList1 {
    width: 92%;
  }

  ul {
    width: 100%;
    height: 4rem;
    margin-top: 1.9rem;
    overflow-y: scroll;

    li {
      width: 100%;
      height: 0.4rem;
      display: flex;
      justify-content: space-around;
      font-size: 0.2rem;
      align-items: center;
    }
  }
}
.wishAward ul li:nth-child(2n-1) {
  background: #e2f1ff;
}
.seamless-warp {
  height: 4.45rem;
  // background: red;
  margin-top: 1.5rem;
  overflow: hidden;

  ul {
    width: 100%;
    height: 4rem;

    li {
      width: 100%;
      height: 0.4rem;
      display: flex;
      justify-content: space-around;
      font-size: 0.2rem;
      align-items: center;
    }
  }
}
.user {
  width: 2rem;
  margin-left: 0.1rem;
  text-align: start;
  // background: red;
}
.swiper-wrapper {
  width: 100%;
  height: 4rem;
  // background: red;
}
.swiper-slide {
  // background: red;
  display: flex;
  align-items: center;
  font-size: 0.2rem;
  justify-content: space-around;
}
.zoom{
width: 100%;
    height: 4rem;
    margin-top: 1.9rem;
}
.swiper-no-swiping .swiper-slide:nth-child(2n-1){
   background: #e2f1ff;

}
</style>