<template>
  <div :style="styleData.cardPrize" ref="cardPrize" @click="styleClick('click', 'cardPrize')"
    @mousemove="styleClick('mousemove', 'cardPrize')" @mouseout="styleClick('mouseout')">
    <div class="cardPrizeDiv" :style="styleData.cardPrizeDiv">
      <div class="user" :style="styleData.user">
        <div class="userinfoleft" :style="styleData.userInfoLeft">
          <img class="userimg" :style="styleData.userImg" :src="cardList.userImg" />
          {{ cardList.userName }}
        </div>
        <div class="titleCounts" :style="styleData.titleCounts">
          <img class="titleCountsImg" :style="styleData.titleCountsImg" :src="styleData.titleCountsImg.imageUrl" />
          已有<span :style="styleData.titleCountsColor">{{
            cardList.collectOverCount
          }}</span>人集卡成功
        </div>
      </div>
      <div class="cardgroup" :style="styleData.cardDiv">
        <div v-for="(item, index) in cardList.userCards" :key="index" class="aa" :style="styleData.itemStyle">
          <div class="carditem" :style="styleData.cardImgDiv">
            <img :src="item.cardUrl" :style="styleData.cardImg" />
            <div v-if="item.count > 0" class="cardnum" :style="styleData.cardNumDiv">
              {{ item.count }}
            </div>
            <div v-else class="cardnum" :style="styleData.cardNumDiv1">
              {{ item.count }}
            </div>
          </div>
        </div>
      </div>

      <!-- <div class="btngroup" :style="styleData.btnGroup">
        <template v-if="cardList.drawCardFlag && cardList.drawCardCount > 0">
          <div
            class="canshake"
            :style="styleData.canShake"
            @click="shakeThat"
            v-lz-click="'7'"
            v-if="cardList.followStoreFlag == 0"
          >
            <img
              :src="styleData.cardImgBg.imageUrl"
              :style="styleData.cardImgBg"
            />
          </div>
          <div
            class="canshake"
            :style="styleData.canShake"
            @click="shakeThat"
            v-lz-click="'7'"
            v-else
          >
            <img
              :src="styleData.cardImgBg1.imageUrl"
              :style="styleData.cardImgBg1"
            />
          </div>
        </template>
        <template v-else>
          <div
            class="mainbtn"
            v-lz-click="'2'"
            @click="setShareButton()"
            :style="styleData.shareBtnStyle"
          >
            邀请好友帮忙抽卡
          </div>
        </template>
      </div> -->
    </div>
    <div v-if="cardList.drawCardFlag && cardList.drawCardCount > 0" @click="shakeThat" v-lz-click="'7'"
      :style="styleData.shareBtnStyle1"></div>
    <div v-else v-lz-click="'2'" @click="setShareButton()" :style="styleData.shareBtnStyle"></div>
    <!-- v-if="cardList.drawFlag" -->
    <div :style="styleData.drawGameBg">
      <div :style="styleData.drawGameCont" v-if="drawNumber > 0">
        <img :style="styleData.liwu" :src="styleData.liwu.imageUrl" />
        <div style="margin-left: 0.28rem">
          <div :style="styleData.cardFont1">您已集齐卡片</div>
          <div :style="styleData.choujiang">
            当前可抽奖
            <span :style="styleData.choujiangColor">{{ drawNumber }}</span> 次
          </div>
        </div>
        <img v-lz-click="'12'" @click="drawGame" :style="styleData.drawGameBtn1"
          :src="styleData.drawGameBtn1.imageUrl" />
      </div>
      <div :style="styleData.drawGameCont" v-else>
        <img :style="styleData.liwu" :src="styleData.liwu.imageUrl" />
        <div style="margin-left: 0.28rem">
          <div :style="styleData.cardFont">您未集齐卡片</div>
          <div :style="styleData.choujiang">
            当前可抽奖
            <span :style="styleData.choujiangColor">{{ drawNumber }}</span> 次
          </div>
        </div>
        <img v-if="!isWebClick" :style="styleData.drawGameBtn" :src="styleData.drawGameBtn.imageUrl" alt="" />
        <img v-else :style="styleData.drawGameBtn" :src="styleData.drawGameBtn1.imageUrl" alt="" />
        
      </div>
      <!-- <div
        class="drawGameBtn"
        v-lz-click="'12'"
        @click="drawGame"
        :style="styleData.drawGameBtn"
      >
        {{ drawNumber }}
        您已集齐卡片，立即抽奖 》
      </div> -->
    </div>
  </div>
</template>
<script>
import apis1 from "../../../util/apis1.js";
import store from "../../../store/store.js";

import {
  DrawCardPopComService,
  DrawCardPopComService1,
  PrizeResultPopComService,
  NoPrizeResultPopComService,
} from "../../../util/comCreate.js";

import { allShare } from "../../../js/share.js";
let { drawPrize, startDraw, drawCardInfoList, setShare, cardfollowShop } =
  apis1;

export default {
  components: {
    store,
  },
  props: [
    "isTemplate",
    "datas",
    "keyData",
    "styleData",
    "templateData",
    "isWebClick",
    "modifyContent",
  ],
  data() {
    return {
      cardList: [],
      drawCardList: [], //抽卡
      shareUserId: "", //用户id取得
      bg1: "", //不关注店铺
      bg2: "", //关注店铺
      fristCardFlag: 0,
      drawNumber: 0,
      styleDataOld: {},
      isCustomSwitching: "",
      prizeListData: [
        {
          position: 1,
          showImg:
            "//img10.360buyimg.com/imgzone/jfs/t28501/166/1548277010/2761/aa567cad/5ce4dfd3Na6d534e4.png",
          angle: 0,
          prizeName: "谢谢参与",
        },
        {
          position: 2,
          showImg:
            "//img10.360buyimg.com/imgzone/jfs/t28501/166/1548277010/2761/aa567cad/5ce4dfd3Na6d534e4.png",
          angle: 0,
          prizeName: "谢谢参与",
        },
        {
          position: 3,
          showImg:
            "//img10.360buyimg.com/imgzone/jfs/t28501/166/1548277010/2761/aa567cad/5ce4dfd3Na6d534e4.png",
          angle: 0,
          prizeName: "谢谢参与",
        },
        {
          position: 4,
          showImg:
            "//img10.360buyimg.com/imgzone/jfs/t28501/166/1548277010/2761/aa567cad/5ce4dfd3Na6d534e4.png",
          angle: 0,
          prizeName: "谢谢参与",
        },
        {
          position: 5,
          showImg:
            "//img10.360buyimg.com/imgzone/jfs/t28501/166/1548277010/2761/aa567cad/5ce4dfd3Na6d534e4.png",
          angle: 0,
          prizeName: "谢谢参与",
        },
        {
          position: 6,
          showImg:
            "//img10.360buyimg.com/imgzone/jfs/t28501/166/1548277010/2761/aa567cad/5ce4dfd3Na6d534e4.png",
          angle: 0,
          prizeName: "谢谢参与",
        },
        {
          position: 7,
          showImg:
            "//img10.360buyimg.com/imgzone/jfs/t28501/166/1548277010/2761/aa567cad/5ce4dfd3Na6d534e4.png",
          angle: 0,
          prizeName: "谢谢参与",
        },
        {
          position: 8,
          showImg:
            "//img10.360buyimg.com/imgzone/jfs/t28501/166/1548277010/2761/aa567cad/5ce4dfd3Na6d534e4.png",
          angle: 0,
          prizeName: "谢谢参与",
        },
      ],
      prizeResultData: {
        styleData: {},
        datas: {},
        keyData: {
          prizeUrl: "showImg",
          prizeName: "prizeName",
          prizeType: "prizeType",
          priceInfo: "priceInfo",
          discountType: "discountType",
          couponType: "couponType",
        },
      },
      isDraw: false
    };
  },

  created() {
    //深拷贝重置需要
    this.styleDataOld = JSON.parse(JSON.stringify(this.styleData));
    this.initData();
    this.publicData.$on("jikaClose", (res) => {
      if (res) {
        this.initData();
      }
    });
  },
  mounted() { },
  methods: {
    styleClick(type, refName) {
      if (this.isWebClick) {
        //传值给B端
        let byValue = {
          modifyContent: this.modifyContent,
          refName: refName,
          styleData: this.styleData,
          c_this: this,
          isCustomSwitching: this.isCustomSwitching,
          styleDataOld: this.styleDataOld,
        };
        this.$emit("opertaionCom", type, byValue);
      }
    },
    initData() {
      var datasAll = this.templateData;
      if (this.isTemplate == true) {
        // this.$toast("活动预览，仅供查看");
        if (datasAll) {
          this.bg1 = this.datas.bg1;
          this.bg2 = this.datas.bg2;
          this.cardList = datasAll.collectCard;
          this.cardList.userCards = datasAll.collectCard.collectCardInfoS;
          for (var i = 0; i < this.cardList.userCards.length; i++) {
            this.cardList.userCards[i].count = 0;
          }
          this.cardList.userImg =
            "http://storage.360buyimg.com/i.imageUpload/6a645f3536333863336362363865363831363231343238373434303630_mid.jpg";
          this.cardList.userName = "测试Name";
          this.cardList.collectOverCount = 0;
          this.cardList.drawCardFlag = true;
          this.cardList.followStoreFlag = datasAll.collectCard.followStoreFlag;
          this.cardList.drawCardCount = datasAll.collectCard.drawCount;
        } else {
          //没有模板的数据
          this.bg1 = this.datas.bg1;
          this.bg2 = this.datas.bg2;
          this.cardList.userCards = [
            {
              cardUrl:
                "https://img10.360buyimg.com/imgzone/jfs/t1/139525/14/22797/14642/61af5d1dE1707f714/070038f4a8c4377f.png",
              count: 0,
            },
            {
              cardUrl:
                "https://img10.360buyimg.com/imgzone/jfs/t1/161578/28/25821/14298/61af5d1dEf9283281/040a30be66879495.png",
              count: 0,
            },
            {
              cardUrl:
                "https://img10.360buyimg.com/imgzone/jfs/t1/213119/14/7011/14942/61af5d1dE240797fd/3479b0efcc930c19.png",
              count: 0,
            },
            {
              cardUrl:
                "https://img10.360buyimg.com/imgzone/jfs/t1/206938/35/11912/14688/61af5d1dE0768fe47/be8e7372d67f0bbb.png",
              count: 0,
            },
            {
              cardUrl:
                "https://img10.360buyimg.com/imgzone/jfs/t1/207191/10/11894/14559/61af5d1dE68fa058e/37213de0582e0d78.png",
              count: 0,
            },
          ];
          this.cardList.userImg =
            "http://storage.360buyimg.com/i.imageUpload/6a645f3536333863336362363865363831363231343238373434303630_mid.jpg";
          this.cardList.userName = "测试Name";
          this.cardList.collectOverCount = 0;
          this.cardList.followStoreFlag = 0;
          this.cardList.drawCardCount = 3;
          this.cardList.drawCardFlag = true;
        }
      } else {
        this.publicData.$emit("isKe", false);
        this.bg1 = this.datas.bg1;
        this.bg2 = this.datas.bg2;
        this.shareUserId = store.state.shareUserId;
        this.getCardList();
      }
      this.publicData.$emit("jikaClose", false);
    },
    getCardList() {
      let cardList = apis1[this.datas.cardList];
      var shareUserId = this.shareUserId;
      cardList(shareUserId, (data) => {
        this.cardList = data.data;
        this.publicData.$emit("canAssist", this.cardList.canAssist);
      });
      if (!this.isTemplate) {
        //获取奖品信息接口
        drawPrize((initdatas) => {
          this.prizeListData = initdatas.data.prizeInfo;
          this.drawNumber = initdatas.data.drawNumber;
        });
      }
    },
    shakeThat() {
      if (this.isTemplate == true) {
        // this.$toast("活动预览，仅供查看");
        return;
      }
      let actStatus = sessionStorage.getItem("actStatus");
      if (actStatus == 2) {
        this.$toast("活动已结束");
        return;
      }
      if (actStatus == 1) {
        this.$toast("活动未开始");
        return;
      }
      if (this.isDraw == true) {
        this.$toast("请勿重复点击");
        return;
      }
      this.isDraw = true
      if (this.cardList.followStoreFlag == 1) {
        cardfollowShop((data) => { });
      }
      console.log("klklklkl")
      drawCardInfoList((data) => {
        this.drawCardList = data.data;
        this.callDrawPop();
        this.publicData.$emit("isKe", false);
      });

      let cardList = apis1[this.datas.cardList];
      cardList((data) => {
        this.cardList = data.data;
      });
    },
    //抽卡回调处理
    callDrawPop() {
      this.isDraw = false
      if (this.drawCardList.drawCard.status) {
        this.cardList.drawCardCount = this.cardList.drawCardCount - 1;
        DrawCardPopComService.create(
          this.drawCardList.drawCard.cardName,
          this.drawCardList.drawCard.cardUrl,
          this.cardList.drawCardCount,
          (submit, name, count) => {
            DrawCardPopComService.close();
            if (submit.length > 0) {
              this.cardList.userCards = submit;
            } else {
              for (var i = 0; i < 5; i++) {
                if (name == this.cardList.userCards[i].cardName) {
                  this.cardList.userCards[i].count =
                    this.cardList.userCards[i].count + 1;
                }
              }
            }
            this.cardList.drawCardCount = count;
            if (
              this.cardList.userCards[0].count > 0 &&
              this.cardList.userCards[1].count > 0 &&
              this.cardList.userCards[2].count > 0 &&
              this.cardList.userCards[3].count > 0 &&
              this.cardList.userCards[4].count > 0
            ) {
              this.cardList.drawFlag = true;
              this.fristCardFlag = this.fristCardFlag + 1;
              if (this.fristCardFlag == 1) {
                this.cardList.collectOverCount =
                  this.cardList.collectOverCount + 1;
              }
            } else {
              this.cardList.drawFlag = false;
            }
          }
        );
      } else {
        this.cardList.drawCardCount = this.cardList.drawCardCount - 1;
        DrawCardPopComService1.create(
          this.cardList.drawCardCount,
          (submit, name, count) => {
            DrawCardPopComService1.close();
            if (submit.length > 0) {
              this.cardList.userCards = submit;
            } else {
              for (var i = 0; i < 5; i++) {
                if (name == this.cardList.userCards[i].cardName) {
                  this.cardList.userCards[i].count =
                    this.cardList.userCards[i].count + 1;
                }
              }
            }
            this.cardList.drawCardCount = count;
            if (
              this.cardList.userCards[0].count > 0 &&
              this.cardList.userCards[1].count > 0 &&
              this.cardList.userCards[2].count > 0 &&
              this.cardList.userCards[3].count > 0 &&
              this.cardList.userCards[4].count > 0
            ) {
              this.cardList.drawFlag = true;
              this.fristCardFlag = this.fristCardFlag + 1;
              if (this.fristCardFlag == 1) {
                this.cardList.collectOverCount =
                  this.cardList.collectOverCount + 1;
              }
            } else {
              this.cardList.drawFlag = false;
            }
          }
        );
      }
    },

    drawGame() {
      if (this.isTemplate) {
        // this.$toast("活动预览，仅供查看");
        return;
      }
      const self = this;

      if (this.drawNumber == 0) {
        this.$toast("没有游戏次数~");
        return
      }
      this.drawNumber--
      let actStatus = sessionStorage.getItem("actStatus");
      if (actStatus == 2) {
        this.$toast("活动已结束");
        return;
      }
      if (actStatus == 1) {
        this.$toast("活动未开始");
        return;
      }
      this.isStartPlay = true;
      startDraw((initDatas) => {

        if (initDatas.resp_code == 50009) {
          this.$toast("活动已结束");
          this.isStartPlay = false;
          return;
        }

        if (initDatas.resp_code != 0) {
          this.isStartPlay = false;
        }

        if (initDatas.data) {
          for (var i = 0; i < this.prizeListData.length; i++) {
            if (this.prizeListData[i].id == initDatas.data.prizeInfoId) {
              self.pIndex = i;
              // 拿到相应的角度调旋转接口
              self.fulfillHandle(
                self.prizeListData[self.pIndex],
                initDatas.data
              );
              this.isStartPlay = false;
              this.publicData.$emit(
                "isNotyFiceWinnerReorrd",
                true,
                this.isTemplate
              );
              break;
            }
          }
        } else {
          self.fulfillHandle("未中奖");
          this.isStartPlay = false;
        }
        for (i = 0; i < 5; i++) {
          this.cardList.userCards[i].count =
            this.cardList.userCards[i].count - 1;
        }
        if (
          this.cardList.userCards[0].count < 1 ||
          this.cardList.userCards[1].count < 1 ||
          this.cardList.userCards[2].count < 1 ||
          this.cardList.userCards[3].count < 1 ||
          this.cardList.userCards[4].count < 1
        ) {
          this.cardList.drawFlag = false;
        } else {
          this.cardList.drawFlag = true;
        }
      });
      this.publicData.$emit("isKe", false);
    },
    //得奖后的处理
    fulfillHandle(prizeData, initDatas) {
      this.isStartPlay = false;
      console.log(initDatas);
      var activityType = sessionStorage.getItem("activityType");
      this.isShowRotary = this.datas.isShowRotary == true ? true : false;

      if (prizeData == "未中奖") {
        NoPrizeResultPopComService.create(
         "非常遗憾，您与大奖擦肩而过~",
         "//img10.360buyimg.com/imgzone/jfs/t1/136745/32/20121/48059/5fd996feE56314a28/b952f0e6f3fe811f.png",
          (submit) => {
            NoPrizeResultPopComService.close();
          }
        );
      } else {
        //中奖
        this.prizeResultData.datas = prizeData;
        PrizeResultPopComService.create(
          this.prizeResultData,
          initDatas,
          (submit) => {
            PrizeResultPopComService.close();
          }
        );
      }
    },

    //分享
    setShareButton(index) {
      let actStatus = sessionStorage.getItem("actStatus");
      if (!this.isTemplate) {
        if (actStatus == 2) {
          // Toast
          this.$toast("活动已结束");
          return;
        }
        if (actStatus == 1) {
          this.$toast("活动尚未开始");
          // Toast('活动尚未开始');
          return;
        }
        if (actStatus == 3) {
          // Toast('活动正在惊醒中');
          // this.share = 1
          allShare(this.isTemplate, this, (callBackData) => {
            console.log(callBackData, "callBackData");
          });
        }
      } else {
        // this.$toast("活动预览，仅供查看");
      }
      this.publicData.$emit("isKe", false);
    },
  },
};
</script>
<style lang="scss" scoped>
.titleCounts{
  font-size: 0.24rem;
  font-weight: 500;
  display: flex;
  color: #fff;
}
.titleCountsImg{
  width: 0.35rem;
  height: 0.3rem;
  margin-right: 0.1rem;
}
.userinfoleft{
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 0.24rem;
}


.cardgroup > div:nth-child(odd) {
  margin-top: 0.3rem;
}
.cardgroup > div:nth-child(even) {
  margin-top: 0.85rem;
}
.cardgroup > .aa:nth-child(1){
  margin-left: .37rem;
}
.cardgroup > .aa:nth-child(2){
  margin-left: .15rem;
}
.cardgroup > .aa:nth-child(3){
   margin-left: .1rem;
}
.cardgroup > .aa:nth-child(4){
  margin-left: .15rem;
}
.cardgroup > .aa:nth-child(5){
  margin-left: .15rem;
}
</style>
