<template>
  <div id="box" :style="styleData.box">
    <div class="boxtitle" :style="styleData.titlestyle">{{ keyData.title }}</div>
    <!--  标题 -->
    <div id="boxprizeSwiper" :style="styleData.boxprizeSwiperdiv">
      <!--  轮播内容 -->
      <div
        class="prize"
        :style="styleData.ulbox"
        v-for="(item, index) in fissionPrizeList"
        :key="index"
      >
        <div class="imgText" :style="styleData.libox">
          <!--  li -->
          <!--:src="item.showImg"   ---------图片     -->
          <div :style="styleData.imgbox">
            <img :src="item.showImg" :style="styleData.imgdiv" alt="图片1加载失败" />
          </div>
          <!--  {{ item.prizeName }}奖品文字 -->
          <span class="PrizeItemName" :style="styleData.spanbox">{{item.prizeName}}</span>
          <div v-if="clickActive[index]" :key="keydee">
            <div
              :style="styleData.lingqu"
              v-if="isshowBtn"
              @click="prizeClick(index,prizeData.shareSuccessTimesList[index])"
              :class="prizeClass(prizeData.shareSuccessTimesList[index])"
            >{{btnText(prizeData.shareSuccessTimesList[index],index)}}</div>
            <p
              @click="prizeClick(index,prizeData.shareSuccessTimesList[index])"
              class="okerBtn"
              v-if="helpList.length >= prizeData.shareSuccessTimesList[index].successTimes"
            >请领取奖品</p>
          </div>
          <!-- <div v-else class="collect" :key="keydee">已领取</div> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import apis from "../../../util/apis1.js";
import conSignIndexVue from "../../../pages/conSignIndex.vue";
import bus from "../../../util/bus.js";
let { immediatelyDraw, immediatelyDrawGray ,drawPrize} = apis;
export default {
  name: "fissionPrizeList2",
  props: ["isTemplate", "datas", "styleData", "keyData", "templateData"],
  data() {
    return {
      fissionPrizeList: [], //奖品列表
      prizeData: [], //奖品数据
      showList: true,
      isshowlingqu: false,
      isshowBtn: false, //按钮显示隐藏
      helpList: [], //助力人数
      nummm: 5, //测试
      keydee: 0, //key控制页面刷新
      clickActive: [], //控制按钮和已领取的切换
    };
  },
  created() {
    this.initData();
  },
  updated() {},
  methods: {
    initData() {
      this.isshowBtn = this.datas.isshowBtn;
      if (this.isTemplate == true) { 
        this.fissionPrizeList = [
        {
            showImg:
            "https://img10.360buyimg.com/imgzone/jfs/t1/176585/24/10488/6916/60a4cb50E562734ab/f9ab956ec09a4146.png",
            prizeName: "***京豆",
        },
        {
            showImg:
            "https://img10.360buyimg.com/imgzone/jfs/t1/176585/24/10488/6916/60a4cb50E562734ab/f9ab956ec09a4146.png",
            prizeName: "***京豆",
        },
        {
            showImg:
            "https://img10.360buyimg.com/imgzone/jfs/t1/176585/24/10488/6916/60a4cb50E562734ab/f9ab956ec09a4146.png",
            prizeName: "***京豆",
        },
        {
            showImg:
            "https://img10.360buyimg.com/imgzone/jfs/t1/176585/24/10488/6916/60a4cb50E562734ab/f9ab956ec09a4146.png",
            prizeName: "***京豆",
        },
        {
            showImg:
            "https://img10.360buyimg.com/imgzone/jfs/t1/176585/24/10488/6916/60a4cb50E562734ab/f9ab956ec09a4146.png",
            prizeName: "***京豆",
        },
        ];
      } else {
        let actStatus = sessionStorage.getItem("actStatus");
        if (actStatus == 2) {
          drawPrize((initdatas) => {
            //调用礼品接口
            this.fissionPrizeList = initdatas.data.prizeInfo;;
          });
          this.$toast("活动已结束");
          // return;
        }
        if (actStatus == 1) {
          drawPrize((initdatas) => {
            //调用礼品接口
            this.fissionPrizeList = initdatas.data.prizeInfo;;
          });
          this.$toast("活动未开始");
          // return;
        }
        bus.$on("ourprizeList", (content) => {
          //接收礼品列表数据
          this.fissionPrizeList = content;
        });
        bus.$on("data", (content) => {
          //接收礼品状态数据
          this.prizeData = content;
          this.prizeData.shareSuccessTimesList.forEach((v) => {
            this.clickActive.push(true);
          });
          immediatelyDrawGray((data) => {
            //调用接口
            var statusList = data.data.receivePrizes; //数据赋值
            console.log(statusList);
            for (
              var i = 0;
              i < this.prizeData.shareSuccessTimesList.length;
              i++
            ) {
              //循环礼品状态数组
              if (
                statusList[i].prizeInfoId ==
                this.prizeData.shareSuccessTimesList[i].prizeInfoId
              ) {
                //判断如果礼品Id是否相等
                if (statusList[i].status == 1) {
                  //判断是否被领取
                  this.prizeData.shareSuccessTimesList[i].status = 3;
                }
              }
            }
            console.log(this.prizeData);
          });
        });
        bus.$on("helpList", (content) => {
          //接收邀请助力数据
          this.helpList = content.data.friends;
        });
      }
    },
    btnText(item, index) {
      //控制按钮文字及状态
      if (item.status == 0) {
        //判断状态
        return `奖品已被领完`;
      }
      if (item.status == 3) {
        //判断状态
        this.clickActive[index] = false; //将对应按钮改为已领取
        this.keydee++; //改变key值使模板更新
      }
      if (this.helpList.length >= item.successTimes) {
        //判断如果助力人数达到领奖要求
        return `√ 已分享${item.successTimes}人`;
      } else {
        return `分享${item.successTimes}人领取`;
      }
    },
    prizeClass(item) {
      if (this.helpList.length >= item.successTimes && item.status != 0) {
        //判断如果助力人数达到领奖要求
        return `activeBtnBg`; //改变class名
      } else {
        return `btnBg`; //改变class名
      }
    },
    prizeClick(index, item) {
      //按钮点击
      let actStatus = sessionStorage.getItem("actStatus");
      if (actStatus == 2) {
        this.$toast("活动已结束");
        return;
      }
      if (actStatus == 1) {
        this.$toast("活动未开始");
        return;
      }
      if (this.helpList.length >= item.successTimes) {
        //判断如果助力人数达到领奖要求
        this.clickActive[index] = false; //将对应按钮改为已领取
        this.keydee++; //改变key值使模板更新
        immediatelyDraw(item.prizeInfoId, (data) => {}); //调用领奖接口
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.activeBtnBg {
  background: green;
}
.btnBg {
  background-color: rgb(204, 204, 204);
}
.okerBtn {
  color: green;
  font-size: 0.24rem;
  position: absolute;
  right: 0.65rem;
  margin-top: 1.15rem;
}
.collect {
  width: 2rem;
  // height: 2rem;
}
</style>
