<template name="prizeKnownNew">
  <div ref="prizeKnownNew" @click="styleClick('click', 'prizeKnownNew')"
    @mousemove="styleClick('mousemove', 'prizeKnownNew')" @mouseout="styleClick('mouseout')">
    <div class="f-tac" style="position:relative">
      <div :style="styleData.tipsText">参与活动有机会获得以下奖品</div>
      <!-- 奖品 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" :style="styleData.prizeBack"
        @change="onChange">
        <van-swipe-item v-for="(item, i) in prizeList" :key="i">
          <div class="draw-detail-sku">
            <div :style="styleData.prizeDetail">
              <div v-if="prizeSatus != 1 || prizeSatus != 4" :style="styleData.prizeStatus">
                <div v-if="prizeSatus == 2" :style="styleData.prizeStatusImg2"></div>
                <div v-if="prizeSatus == 3" :style="styleData.prizeStatusImg3"></div>
              </div>
              <div :style="styleData.drawShowYhq" class="drawShowYhq">
                <img class="drawShowYhq1" :src="item.showImg" />
                <div :style="styleData.back" class="back" v-if="item.prizeType == '1'">京豆</div>
                <div :style="styleData.back" class="back" v-if="item.prizeType == '2'">优惠券</div>
                <div :style="styleData.back" class="back" v-if="item.prizeType == '3'">实物</div>
                <div :style="styleData.back" class="back" v-if="item.prizeType == '4'">积分</div>
                <div :style="styleData.back" class="back" v-if="item.prizeType == '5'">专享价</div>
                <div :style="styleData.back" class="back" v-if="item.prizeType == '6'">红包</div>
                <div :style="styleData.back" class="back" v-if="item.prizeType == '7'">礼品卡</div>
                <div :style="styleData.back" class="back" v-if="item.prizeType == '8'">京东E卡</div>
                <div :style="styleData.back" class="back" v-if="item.prizeType == '9'">plus会员卡</div>
                <div :style="styleData.back" class="back" v-if="item.prizeType == '10'">爱奇艺会员卡</div>
              </div>
              <div style="width: 66%">
                <div class="addShopNewContent" :style="styleData.addShopNewContent">
                  <div :style="styleData.addShopNewJifen" class="addShopNewJifen">
                    <div :style="styleData.fib2">{{ item.prizeName }}</div>
                  </div>

                  <div :style="styleData.prizePrompt">
                    <div :style="styleData.fib3">奖品数量有限，先到先得哦~</div>
                  </div>

                  <div :style="styleData.prizeRest">
                    <!-- <div :style="styleData.fib4">奖品剩余:{{ item.leftNum }}份</div> -->
                  </div>
                </div>
              </div>
            </div>
          </div>
        </van-swipe-item>
        <template #indicator v-if="prizeList.length">
          <div class="custom-indicator">{{ current + 1 }}/{{prizeList.length}}</div>
        </template>
      </van-swipe>
    </div>
  </div>
</template>
<script>
import Vue from 'vue';
import { CountDown, Progress } from 'vant';
Vue.use(CountDown);
Vue.use(Progress);
import store from '../../../store/store';
import { allShare } from '../../../js/share.js';
import dateUtil from '../../../util/dateUtil.js';
import apis1 from '../../../util/apis1.js';
let { drawPrize, getUserFollowInfo } = apis1;
export default {
  props: ['isTemplate', 'datas', 'styleData', 'keyData', 'templateData', 'modifyContent', 'isWebClick'],
  data() {
    return {
      current: 0,
      prizeList: [], //奖品列表
      styleDataOld: {},
      prizeSatus: 1 //可以正常领取奖品
    };
  },
  created() {
    //深拷贝重置需要
    this.styleDataOld = JSON.parse(JSON.stringify(this.styleData));
    this.publicData.$on('reShowPrize', data => {
      console.log(data, '刷新奖品')
      if (data == true) {
        this.initData();
      }
    })
    this.initData();
  },
  methods: {
    //点击可修改位置的方法
    styleClick(type, refName) {
      if (this.isWebClick) {
        //传值给B端
        let byValue = {
          modifyContent: this.modifyContent,
          refName: refName,
          styleData: this.styleData,
          styleDataOld: this.styleDataOld,
          c_this: this
        };
        this.$emit('opertaionCom', type, byValue);
      }
    },
    initData() {
      document.body.parentNode.style.overflowX = 'hidden';
      if (this.isTemplate) {
        var datasAll = this.templateData;
        console.log(datasAll, 'datasAll');
        if (datasAll) {
          for (var i = 0; i < datasAll.draw.prizeList.length; i++) {
            datasAll.draw.prizeList[i].leftNum = datasAll.draw.prizeList[i].totalPrizeNum;
          }
          this.prizeList = datasAll.draw.prizeList;
        } else {
          this.prizeList = [
            {
              showImg: 'https://img10.360buyimg.com/imgzone/jfs/t1/176585/24/10488/6916/60a4cb50E562734ab/f9ab956ec09a4146.png',
              prizeName: '1京豆',
              leftNum: 4,
              beanNum: '34',
              prizeType: '1'
            }
          ];
        }
        return;
      } else {
        if (this.isTemplate) {
          this.$toast('活动预览，仅供查看');
          return;
        }
        // getUserFollowInfo((data) => {

        //    if(!data.data.followShop){
        //      //未关注
        //      if(data.data.status == '未领取'){
        //        this.prizeSatus = 1 //正常领取
        //      }else if(data.data.status == '奖品已发完'){
        //        this.prizeSatus = 2
        //      }else if(data.data.status == '已领取'){
        //        this.prizeSatus = 3
        //      }else if(data.data.status == '无资格'){
        //        this.prizeSatus = 4 //可以领取的toast提示（此活动只针对新关注店铺用户~）
        //      }
        //    }else{
        //      //已经关注
        //      if(data.data.status == '未领取'){
        //        this.prizeSatus = 5 //关注的时候发奖失败重新进入
        //      }else if(data.data.status == '奖品已发完'){
        //        this.prizeSatus = 2
        //      }else if(data.data.status == '已领取'){
        //        this.prizeSatus = 3
        //      }else if(data.data.status == '无资格'){
        //        this.prizeSatus = 4 //可以领取的toast提示（此活动只针对新关注店铺用户~）
        //      }
        //    }
        //   // this.prizeSatus = data.data.status
        //   this.publicData.$emit("getUserFollowInfoData",this.prizeSatus);
        // });

        //获取奖品信息
        drawPrize(data => {
          this.prizeList = data.data.prizeInfo;

          // if (data.data.prizeInfo[0].leftNum == 0) {
          this.prizeLeftNum = data.data.prizeInfo[0].leftNum;
          this.publicData.$emit('getUserFollowInfoData', this.prizeLeftNum);
          // }

          // var data1 = {
          //   data: {
          //     status: 2
          //   }
          // };
          // this.prizeSatus = data1.data.status;
          // this.publicData.$emit('getUserFollowInfoData', data1.data);
        });
      }
    },
    onChange(index) {
      this.current = index;
    },
  }
};
</script>
<style lang="scss" scoped>
.drawShowYhq {
  width: 2rem;
  height: 2rem;
  display: block;
  border: 2px solid #f2270c;
  border-radius: 0.1rem;
  position: relative;
}
.drawShowYhq1 {
  width: 100%;
}
.addShopNewContent {
  margin-top: 0.41rem;
  margin-left: 0.43rem;
}
.back {
  width: 2rem;
  height: 0.7rem;
  background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/138524/9/21064/8976/619cdd47E1819f3a9/140f4a58e373a32d.png);
  background-size: 100%;
  background-repeat: no-repeat;
  position: absolute;
  bottom: -2px;
  left: -2px;
  text-align: center;
  padding-top: 0.32rem;
  font-size: 0.24rem;
  color: #fff;
}
.custom-indicator {
  position: absolute;
  min-width: 0.86rem;
  right: 0.38rem;
  bottom: 0.6rem;
  line-height: 0.4rem;
  text-align: center;
  font-size: 0.2rem;
  background: rgba(76, 76, 76, 0.9);
  color: #fff;
  border-radius: 0.2rem;
}
</style>
