<template>
  <div
    class="nowbox"
    :style="styleData.box"
    ref="testimonial"
    :key="keydee"
    @click="styleClick('click', 'testimonial')"
    @mousemove="styleClick('mousemove', 'testimonial')"
    @mouseout="styleClick('mouseout')"
  >
    <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="sukabulie">
            <div v-if="clickActive[index] || temp" :key="keydee">
              <div
                v-if="isshowBtn"
                v-lz-click="'16'"
                @click="
                  prizeClick(
                    index,
                    fissionPrizeList[index],
                    prizeData.shareSuccessTimesList[index]
                  )
                "
                :style="prizeClass(prizeData.shareSuccessTimesList[index])"
              >{{ btnText(prizeData.shareSuccessTimesList[index], index) }}</div>
              <p
                v-lz-click="'16'"
                @click="
                  prizeClick(
                    index,
                    fissionPrizeList[index],
                    prizeData.shareSuccessTimesList[index]
                  )
                "
                class="okerBtn"
                v-if="
                  helpList.length >=
                  prizeData.shareSuccessTimesList[index].successTimes
                "
              >请领取奖品</p>
            </div>
            <div
              v-if="clickActive[index] == false"
              :class="prizeData.shareSuccessTimesList[index].isEnd ? '' : 'collect'"
              :key="keydee"
            >
              <img
                src="https://img10.360buyimg.com/imgzone/jfs/t20206/282/2243054854/3280/1485d01e/5b4e9c19N7fe1bc24.png"
                alt
                class="collectimg"
                v-if="prizeData.shareSuccessTimesList[index].isEnd == false"
              />
              <div
                v-if="prizeData.shareSuccessTimesList[index].isEnd"
                :style="styleData.lingqu"
                style="background-color: rgb(204, 204, 204)"
              >{{ btnText1(prizeData.shareSuccessTimesList[index]) }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import apis1 from "../../../util/apis1.js";
import conSignIndexVue from "../../../pages/conSignIndex.vue";
import bus from "../../../util/bus.js";
import {
  PrizeResultPopComService,
  NoPrizeResultPopComService,
} from "../../../util/comCreate.js";
import { Toast } from "vant";
let { immediatelyDraw1, immediatelyDrawGray, drawPrize } = apis1;
export default {
  name: "testimonial",
  props: [
    "isTemplate",
    "datas",
    "styleData",
    "keyData",
    "templateData",
    "modifyContent",
    "isWebClick",
  ],
  data() {
    return {
      fissionPrizeList: [], //奖品列表
      prizeData: [], //奖品数据
      showList: true,
      isshowlingqu: false,
      oneClickButton: false,
      isshowBtn: false, //按钮显示隐藏
      helpList: [], //助力人数
      nummm: 5, //测试
      keydee: 0, //key控制页面刷新
      clickActive: [], //控制按钮和已领取的切换
      sukabulie: false,
      temp: false,
      isEnd: false,
      successTimes: 0,
      styleDataOld: {},
      prizeText: "",
    };
  },
  created() {
    //深拷贝重置需要
    this.styleDataOld = JSON.parse(JSON.stringify(this.styleData));
    this.initData();
    console.log(this.keyData,22222222)
  },
  updated() {},
  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() {
      this.sukabulie = this.datas.sukabulie;
      this.isshowBtn = this.datas.isshowBtn;
      if (this.isTemplate == true) {
        var datasAll = this.templateData;
        console.log(datasAll, "templateDate");
        this.temp = true;
        if (this.isWebClick) {
          this.fissionPrizeList = [
            {
              beanNum: 111,
              position: 1,
              prizeName: "***积分",
              prizeType: 4,
              showImg:
                "//img10.360buyimg.com/imgzone/jfs/t1/172629/8/10529/9649/60a4cb50Edc2ee40a/b53b1246de5f2089.png",
            },
            {
              showImg:
                "https://img10.360buyimg.com/imgzone/jfs/t1/176585/24/10488/6916/60a4cb50E562734ab/f9ab956ec09a4146.png",
              prizeName: "***京豆",
            },
          ];
          this.prizeData = { shareSuccessTimesList: [] };
          this.fissionPrizeList.forEach((v, i) => {
            this.prizeData.shareSuccessTimesList.splice(i, 1, {
              successTimes: i,
            });
          });
        } else {
          this.fissionPrizeList = [
            {
              beanNum: 111,
              position: 1,
              prizeName: "***积分",
              prizeType: 4,
              showImg:
                "//img10.360buyimg.com/imgzone/jfs/t1/172629/8/10529/9649/60a4cb50Edc2ee40a/b53b1246de5f2089.png",
            },
            {
              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: "***京豆",
            },
          ];
          this.prizeData = { shareSuccessTimesList: [] };
          this.fissionPrizeList.forEach((v, i) => {
            this.prizeData.shareSuccessTimesList.splice(i, 1, {
              successTimes: i + 1,
            });
          });
        }
        if (datasAll) {
          this.fissionPrizeList = datasAll.draw.prizeList;
          this.prizeData = { shareSuccessTimesList: [] };
          this.fissionPrizeList.forEach((v, i) => {
            this.prizeData.shareSuccessTimesList.splice(i, 1, {
              successTimes: v.cotinueSignDay,
            });
          });
          console.log(this.prizeData);
        }
      } else {
        this.temp = false;
        this.fissionPrizeList = [
            {
              beanNum: 111,
              position: 1,
              prizeName: "***积分",
              prizeType: 4,
              showImg:
                "//img10.360buyimg.com/imgzone/jfs/t1/172629/8/10529/9649/60a4cb50Edc2ee40a/b53b1246de5f2089.png",
            },
            {
              showImg:
                "https://img10.360buyimg.com/imgzone/jfs/t1/176585/24/10488/6916/60a4cb50E562734ab/f9ab956ec09a4146.png",
              prizeName: "***京豆",
            },
          ];
        bus.$on("data", (content) => {
          //接收礼品状态数据
          console.log(content, "prizedata");
          this.prizeData = content;
          if (this.prizeData.shareSuccessTimesList) {
            this.prizeData.shareSuccessTimesList.forEach((v, i) => {
              v.prizeText = "";
              if (v.status == 1) {
                this.clickActive.splice(i, 1, true);
              } else if (v.status == 3) {
                v.isEnd = false;
                v.prizeText = "已领奖";
                this.clickActive.splice(i, 1, false);
              } else if (v.status == 2) {
                v.isEnd = true;
                v.prizeText = "领奖失败";
                this.clickActive.splice(i, 1, false);
              } else if (v.status == 0) {
                v.isEnd = true;
                v.prizeText = "奖品已被领完";
                this.clickActive.splice(i, 1, false);
              } else {
                v.isEnd = false;
                this.clickActive.splice(i, 1, true);
              }
            });
            console.log(
              this.clickActive,
              this.isEnd,
              "isEnd",
              this.prizeData.shareSuccessTimesList
            );
            immediatelyDrawGray((data) => {
              console.log(data, "immediatelyDrawGray");
              //调用接口
              drawPrize((initdatas) => {
                //调用礼品接口
                setTimeout(() => {
                  if (content.status == 0) {
                    //判断助力状态
                    Toast("已成功帮好友助力");
                  }
                  if (content.status == 1) {
                    Toast("已助力");
                  }
                  if (content.status == 2) {
                    Toast("助力失败");
                  }
                  if (content.status == 3) {
                    Toast("自己不能给自己助力！");
                  }
                }, 250);
                this.fissionPrizeList = initdatas.data.prizeInfo;
                this.fissionPrizeList.forEach((v, i) => {
                  if (
                    v.prizeInfoId ==
                    this.prizeData.shareSuccessTimesList[i].prizeInfoId
                  ) {
                    this.fissionPrizeList[i] =
                      this.prizeData.shareSuccessTimesList[i];
                  }
                });
              });
              var statusList = data.data.receivePrizes; //数据赋值
              if (statusList.length != 0) {
                for (
                  var i = 0;
                  i < this.prizeData.shareSuccessTimesList.length;
                  i++
                ) {
                  //循环礼品状态数组
                  if (
                    statusList[i] &&
                    statusList[i].prizeInfoId ==
                      this.prizeData.shareSuccessTimesList[i].prizeInfoId
                  ) {
                    //判断如果礼品Id是否相等
                    if (statusList[i].status == 1) {
                      //判断是否被领取
                      this.prizeData.shareSuccessTimesList[i].status = 3;
                    }
                  }
                }
              }
              console.log(this.prizeData);
            });
          } else {
            drawPrize((initdatas) => {
              //调用礼品接口
              this.fissionPrizeList = initdatas.data.prizeInfo;
            });
          }
        });
        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}人领取`;
      }
    },
    btnText1(item) {
      //改变key值使模板更新
      console.log("item");
      if (item.status == 3) {
        return "已领奖";
      } else if (item.status == 2) {
        return "领奖失败";
      } else {
        return "奖品已被领完";
      }
    },
    prizeClass(item) {
      if (this.helpList.length >= item.successTimes && item.status != 0) {
        //判断如果助力人数达到领奖要求
        return this.styleData.activeBtnBg; //改变class名
      } else {
        return this.styleData.btnBg; //改变class名
      }
    },
    prizeClick(index, item, data) {
      //按钮点击
      console.log(item.id, this.helpList, data.successTimes);
      let actStatus = sessionStorage.getItem("actStatus");
      if (actStatus == 2) {
        this.$toast("活动已结束");
        return;
      }
      if (actStatus == 1) {
        this.$toast("活动未开始");
        return;
      }
      
      if (this.oneClickButton) {
        return;
      }
      this.oneClickButton = true;
      if (this.helpList.length >= data.successTimes) {
        //判断如果助力人数达到领奖要求
        immediatelyDraw1(item.id, (drawData) => {
          this.oneClickButton = false;
          console.log(drawData, "drawData");
          if (drawData.resp_code == 0) {
            this.clickActive[index] = false; //将对应按钮改为已领取
            this.keydee++; //改变key值使模板更新
            if (drawData.data.status == 1) {
              var obj = {
                datas: {},
                keyData: {
                  prizeUrl: "showImg",
                  prizeName: "prizeName",
                  prizeType: "prizeType",
                  priceInfo: "priceInfo",
                  discountType: "discountType",
                  couponType: "couponType",
                },
              };
              obj.datas = this.fissionPrizeList[index];
              PrizeResultPopComService.create(obj, drawData.data, (submit) => {
                PrizeResultPopComService.close();
              });
              data.isEnd = false;
              data.prizeText = "已领奖";
            } else {
              if (drawData.data.status == 0) {
                this.clickActive[index] = false; //将对应按钮改为已领取
                data.isEnd = true;
                this.prizeData.shareSuccessTimesList[index].prizeText =
                  "领奖失败";
                this.prizeText = "领奖失败";
                this.keydee++; //改变key值使模板更新
              }
              NoPrizeResultPopComService.create(
                "抱歉您与奖品擦肩而过~",
                "//img10.360buyimg.com/imgzone/jfs/t1/152859/24/15591/14697/6008f58fE1744005f/765fe66b5a48aefc.png",
                (submit) => {
                  NoPrizeResultPopComService.close();
                }
              );
            }
          } else if (drawData.resp_code == 60010) {
            this.clickActive[index] = false; //将对应按钮改为已领取
            data.isEnd = true;
            this.prizeData.shareSuccessTimesList[index].prizeText =
              "奖品已发完";
            this.keydee++; //改变key值使模板更新
            this.$toast("奖品已发完");
          } else if (drawData.resp_code == 50009) {
            this.$toast("活动已结束");
          }
        }); //调用领奖接口
      }
     
    },
  },
};
</script>
<style lang="scss" scoped>
.collectimg {
  width: 1.14rem;
}
.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;
  margin-top: 0.4rem;
  // height: 2rem;
}
// .nowbox {
//   position: relative;
// }
</style>
