<template>
  <div class="prizePopDivAll">
    <div class="content" v-if="isShowNoData">
      <div class="swiper-container2" ref="mySwiper2">
        <div class="swiper-wrapper">
          <div
            class="swiper-slide"
            v-for="(item, index) in myprizeList"
            :key="index"
          >
          <p style="color:#000;">奖品名：{{item.rewardName}}</p>
            <img
              :class="item.rewardType==3?'swclass':item.rewardType==1?'jdclass':'jfclass'"
              :src="item.rewardImg"
              alt=""
            />
            <button v-if="item.rewardType==3" class="swbtn" @click="toaddress(item)"></button>
            <button v-if="item.rewardType==1" class="noswbtn"></button>
            <button v-if="item.rewardType==11" class="jfnobtn"></button>
            <p v-if="item.rewardType == 11" style="font-size:0.2rem;width:3.5rem;position: absolute;bottom: 0.3rem;">*领取成功后，可在羽西京东自营旗舰店【品牌会员】中查看</p>
            <p v-if="item.rewardType == 1" style="font-size:0.2rem;position: absolute;bottom: 0.5rem;">*领取成功后，可在我的【京豆】中查看</p>
            <p v-if="item.rewardType == 3" style="font-size:0.2rem;position: absolute;bottom: 0.3rem;">*奖品将在活动结束后15个内工作日发货</p>
          </div>
        </div>
        <div class="swiper-button-prev" @click="prev()"></div><!--左箭头。如果放置在swiper外面，需要自定义样式。-->
        <div class="swiper-button-next" @click="next()"></div><!--右箭头。如果放置在swiper外面，需要自定义样式。-->
      </div>
    </div>
    <div
        v-else
        class="contentno"
      >
      </div>
		<div class="closeDiv" @click="tocolseDiv"></div>
  </div>
</template>

<script>
import Swiper, { Autoplay } from "swiper";
Swiper.use([Autoplay]);
import "swiper/swiper-bundle.css";
import apis from '../api/api.js';
let { getMyPrize } = apis;
let mySwiper2;
export default{
  props:['myprizeList','isShowNoData','isShowPrizePop'],
  data(){
    return {
    }
  },
	created() {
	},
  mounted(){
  },
  watch:{
   isShowNoData(oldValue,newVal) {
      // console.log(111111111111111111111111);
      // if(oldValue){
      //   setTimeout(()=>{
      //     this.initswiper();
      //   },500)
      // }
    },
    isShowPrizePop(oldValue,newVal){
      if(oldValue){
        setTimeout(()=>{
          this.initswiper();
        },500)
      }
    },
  },
  methods:{
     prev () {
      this.$refs.mySwiper2.swiper.slidePrev()
    },
    next () {
      this.$refs.mySwiper2.swiper.slideNext()
    },
    initswiper() {
      mySwiper2 = new Swiper(".swiper-container2", {
        initialSlide: 0,
        // loop: true,
        // allowTouchMove: false,
        // speed: 600,
        // autoplay: {
        //     delay: 3000
        // },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      });
    },
    toaddress(vm){
      this.$emit('toaddress',vm);
    },
		tocolseDiv(){
			this.$emit('closeDiv');
		},
    timeFormat(t){
      let time = new Date(t);
      return (
        time.getFullYear() + "-" + (time.getMonth() + 1) + "-" + time.getDate()
      );
    }
  }
}
</script>

<style lang='scss' scoped>
.prizePopDivAll {
	overflow: hidden;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/214262/20/24621/20314/639d5662E7364dee7/a8c21ad78bbc41dc.jpg');
	background-size: 100% 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
  .content{
    width: 6.03rem;
    height: 7.74rem;
    background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/19500/28/18185/70528/639d5723E597349b3/b96de10d1d6bc78a.png');
	  background-size: 100% 100%;
        display: flex;
    flex-direction: column;
    align-items: center;
    .swiper-container2 {
      width: 5rem;
      height: 5rem;
      position: absolute;
      bottom: 3.7rem;
	    z-index: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    --swiper-theme-color: #ff6600;/* 设置Swiper风格 */
    --swiper-navigation-color: #000000;/* 单独设置按钮颜色 */
    --swiper-navigation-size: 15px;/* 设置按钮大小 */
    overflow: hidden;
    }
    .swiper-button-prev{
      left: 0rem;
      top: 2rem;
    }
    .swiper-button-next{
      right: 0rem;
      top: 2rem;
    }

    .swiper-slide {
      width: 5rem;
      height: 5rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      .swclass{
        width: 1.21rem;
        height: 2.82rem;
      }
      .jdclass{
        width: 2.3rem;
        height: 2.69rem;
        position: absolute;
        top: 0.6rem;
      }
      .jfclass{
        width: 2.2rem;
        height: 3rem;
        position: absolute;
        top: 0.6rem;
      }
    }

    .swiper-slide img {
      margin-top: .2rem;
      background-size: 100% 100%;
    }
    .swbtn{
      width: 1.96rem;
    height: .61rem;
    background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/184117/21/31717/3211/639d7af5E3cf92994/9de3606ae35d3c32.png');
	  background-size: 100% 100%;
    margin-top: .1rem;
    }
    .noswbtn{
      width: 1.96rem;
    height: .61rem;
    background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/87785/2/30806/2946/639d7aecEe896d4ad/6b221496d81f5571.png');
	  background-size: 100% 100%;
    position: absolute;
    bottom: 1.1rem;
    }
    .jfnobtn{
      width: 1.96rem;
    height: .61rem;
    background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/87785/2/30806/2946/639d7aecEe896d4ad/6b221496d81f5571.png');
	  background-size: 100% 100%;
    position: absolute;
    bottom: 1.1rem;
    }
  }
  .contentno{
     width: 6.03rem;
    height: 7.74rem;
    background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/63688/25/22959/45642/639d5807Edea082c5/3f6d6485ff27da68.png');
	  background-size: 100% 100%;
  }
	.closeDiv {
		width: .55rem;
    height: .55rem;
    background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/62477/6/22306/1308/639ab13eEaa8fba40/455db7234cbaad08.png');
	  background-size: 100% 100%;
	}
}
</style>
