<template>
  <div :style="styleData.scrollBg" ref="fansPrize" @click="styleClick('click', 'fansPrize')"
    @mousemove="styleClick('mousemove', 'fansPrize')" @mouseout="styleClick('mouseout')">
    <div v-if="showPage">
      <div :style="styleData.luckeyBag">{{ myTotalScore }}</div>
      <div class="progress-container" :style="styleData.progressContainer">
        <img src="https://img10.360buyimg.com/imgzone/jfs/t1/106553/21/6178/253/5df1dee2Ebdaad086/f7ede53216848ddd.png"
          alt="" :style="styleData.backgroundPrizeImg" />
        <div class="round1" :style="styleData.round1" :class="{ rounded: myTotalScore >= giftLevelOneNeedScore }">
          <div class="round-round" :style="styleData.roundRound"></div>
        </div>
        <div class="round2" :style="styleData.round2" :class="{ rounded: myTotalScore >= giftLevelTwoNeedScore }">
          <div class="round-round" :style="styleData.roundRound"></div>
        </div>
        <div class="round3" :style="styleData.round3" :class="{ rounded: myTotalScore >= giftLevelThreeNeedScore }">
          <div class="round-round" :style="styleData.roundRound"></div>
        </div>
        <div class="score1" :style="styleData.score1" :class="{ scored: myTotalScore >= giftLevelOneNeedScore }">
          {{ giftLevelOneNeedScore }}
        </div>
        <div class="score2" :style="styleData.score2" :class="{ scored: myTotalScore >= giftLevelTwoNeedScore }">
          {{ giftLevelTwoNeedScore }}
        </div>
        <div class="score3" :style="styleData.score3" :class="{ scored: myTotalScore >= giftLevelThreeNeedScore }">
          {{ giftLevelThreeNeedScore }}
        </div>
        <div class="bag1" :style="styleData.bag1" :class="{
          'light-bag':
            myTotalScore >= giftLevelOneNeedScore,
          'complete-bag':
           giftLevelOne[0].prizeStatus == 2,
        }"></div>
        <div class="bag2" :style="styleData.bag2" :class="{
          'light-bag':
            myTotalScore >= giftLevelTwoNeedScore,
          'complete-bag':
          giftLevelTwo[0].prizeStatus == 2,
        }"></div>
        <div class="bag3" :style="styleData.bag3" :class="{
          'light-bag':
            myTotalScore >= giftLevelThreeNeedScore ,
          'complete-bag':
          giftLevelThree[0].prizeStatus == 2,
        }"></div>
        <div class="start-symbol" :style="styleData.startSymbol">开始</div>
        <div class="progress" :style="{ width: computedProgressPercent + '%' }"></div>
      </div>
      <div class="prize-container" :style="styleData.prizeContainer">
        <div :style="styleData.task">
          做小任务得能量 超值礼包等你开
        </div>
        <div class="prize" :style="styleData.prize">
          <div :style="styleData.scrollFont">满30能量值可领取</div>
          <template v-if="giftLevelOne.length > 0">
            <img :src="giftLevelOne[0].showImg" alt="" :style="styleData.showImg" />
            <div :style="styleData.showImgDiv">
              <img style="height: 0.24rem;" v-if="myTotalScore < giftLevelOneNeedScore"
                src="//img10.360buyimg.com/imgzone/jfs/t1/80528/9/13652/286/5db1655fEf9663874/61b8ee92c3c820c4.png" />
              <span>
                {{ giftLevelOne[0].prizeName }}
              </span>
            </div>
          </template>
          <div class="draw-btn1" :style="styleData.drawBtn1"
            v-if="myTotalScore >= giftLevelOneNeedScore && giftLevelOne[0].prizeStatus == 1" @click="startDraw(1)">待抽奖
          </div>
          <div :style="styleData.drawBtn11"
            v-else-if="myTotalScore < giftLevelOneNeedScore || giftLevelOne[0].prizeStatus == 0" v-lz-click="'12'">抽奖
          </div>
          <div :style="styleData.drawBtn111"
            v-else-if="myTotalScore >= giftLevelOneNeedScore && giftLevelOne[0].prizeStatus == 2">已抽奖</div>
        </div>

        <div class="prize" :style="styleData.prize">
          <div :style="styleData.scrollFont">满60能量值可领取</div>
          <template v-if="giftLevelTwo.length > 0">
            <img :src="giftLevelTwo[0].showImg" alt="" :style="styleData.showImg" />
            <div :style="styleData.showImgDiv">
              <img style="height: 0.24rem;" v-if="myTotalScore < giftLevelTwoNeedScore"
                src="//img10.360buyimg.com/imgzone/jfs/t1/80528/9/13652/286/5db1655fEf9663874/61b8ee92c3c820c4.png" />
              <span>
                {{ giftLevelTwo[0].prizeName }}
              </span>
            </div>
          </template>
          <div class="draw-btn2" :style="styleData.drawBtn2"
            v-if="myTotalScore >= giftLevelTwoNeedScore && giftLevelTwo[0].prizeStatus == 1" v-lz-click="'12'"
            @click="startDraw(2)">待抽奖</div>
          <div :style="styleData.drawBtn22"
            v-else-if="myTotalScore < giftLevelTwoNeedScore || giftLevelTwo[0].prizeStatus == 0" v-lz-click="'12'">抽奖
          </div>
          <div :style="styleData.drawBtn222"
            v-else-if="myTotalScore >= giftLevelTwoNeedScore && giftLevelTwo[0].prizeStatus == 2" v-lz-click="'12'">已抽奖
          </div>
        </div>

        <div class="prize" :style="styleData.prize">
          <div :style="styleData.scrollFont">满100能量值可领取</div>
          <template v-if="giftLevelThree.length > 0">
            <img :src="giftLevelThree[0].showImg" alt="" :style="styleData.showImg" />
            <div :style="styleData.showImgDiv">
              <img style="height: 0.24rem;" v-if="myTotalScore < giftLevelThreeNeedScore"
                src="//img10.360buyimg.com/imgzone/jfs/t1/80528/9/13652/286/5db1655fEf9663874/61b8ee92c3c820c4.png" />
              <span>
                {{ giftLevelThree[0].prizeName }}
              </span>
            </div>
          </template>
          <div class="draw-btn3" :style="styleData.drawBtn3"
            v-if="myTotalScore >= giftLevelThreeNeedScore && giftLevelThree[0].prizeStatus == 1" v-lz-click="'12'"
            @click="startDraw1()">待抽奖</div>
          <div :style="styleData.drawBtn33"
            v-else-if="myTotalScore < giftLevelThreeNeedScore || giftLevelThree[0].prizeStatus == 0" v-lz-click="'12'">
            抽奖
          </div>
          <div :style="styleData.drawBtn333"
            v-else-if="myTotalScore >= giftLevelThreeNeedScore && giftLevelThree[0].prizeStatus == 2" v-lz-click="'12'">
            已抽奖</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import apis1 from "../../../util/apis1.js";
import store from "../../../store/store";
let { fansPlayList, drawPrize, fansDrawList, startDraw } = apis1;
import {
  NoPrizeResultPopComService,
  PrizeResultPopComService,
  FansNoPrizePopComService,
} from "../../../util/comCreate.js";
export default {
  props: [
    "isTemplate",
    "datas",
    "keyData",
    "styleData",
    "templateData",
    "isWebClick",
    "modifyContent",
  ],
  data() {
    return {
      fansPlayList: [],
      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: "谢谢参与",
        },
      ],
      fansDrawList: [],
      shareFlag: false,
      shareUserId: "",
      myTotalScore: 0,
      giftLevelOne: [],
      giftLevelTwo: [],
      giftLevelThree: [],
      giftLevelOneNeedScore: 30, //30分
      giftLevelTwoNeedScore: 60, //60分
      giftLevelThreeNeedScore: 100, //100分
      styleDataOld: {},
      showPage: true,
      prizeResultData: {
        styleData: {},
        datas: {},
        keyData: {
          prizeUrl: "showImg",
          prizeName: "prizeName",
          prizeType: "prizeType",
          priceInfo: "priceInfo",
          discountType: "discountType",
          couponType: "couponType",
        },
      },
      isDrawOne: true,
      isDrawTwo: true
    };
  },

  created() {
    //深拷贝重置需要
    this.styleDataOld = JSON.parse(JSON.stringify(this.styleData));
    this.initData();
    this.publicData.$on("fansFollowShop", (res) => {
      this.myTotalScore = this.myTotalScore + res;
    });
    this.publicData.$on('fansPrizeComponent', (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.prizeListData = datasAll.draw.prizeList;
          this.fansPlayList = {
            oneLevel: 0,
            prizeInfoId1: "1425695746035818497",
            prizeInfoId2: "1425695750053961730",
            score: 0,
            shopLogoUrl:
              "http://img30.360buyimg.com/popshop/jfs/t1/46707/26/4584/4510/5d268cf5E32143aee/4f49f73d5fd5e914.gif",
            shopName: "Dettol滴露京东自营官方旗舰店",
            threeLevel: 0,
            twoLevel: 0,
            userImg:
              "http://storage.360buyimg.com/i.imageUpload/6a645f3536333863336362363865363831363231343238373434303630_mid.jpg",
            userName: "Artist0926",
          };
          this.giftLevelOne = [this.prizeListData[0]];
          this.giftLevelTwo = [this.prizeListData[1]];
          this.giftLevelThree = [this.prizeListData[2]];
          this.myTotalScore = 0;
        } else {
          //没有模板的数据
          this.prizeListData = [
            {
              beanNum: 1,
              id: "1425695746035818497",
              planId: "1432201",
              position: 1,
              prizeName: "1",
              prizeType: 1,
              productUrl: "",
              showImg:
                "//img10.360buyimg.com/imgzone/jfs/t1/176585/24/10488/6916/60a4cb50E562734ab/f9ab956ec09a4146.png",
            },
            {
              beanNum: 2,
              id: "1425695750053961730",
              planId: "1430300",
              position: 2,
              prizeName: "2",
              prizeType: 1,
              productUrl: "",
              showImg:
                "//img10.360buyimg.com/imgzone/jfs/t1/176585/24/10488/6916/60a4cb50E562734ab/f9ab956ec09a4146.png",
            },
            {
              beanNum: 3,
              id: "1425695754051133442",
              planId: "1429131",
              position: 3,
              prizeName: "3",
              prizeType: 1,
              productUrl: "",
              showImg:
                "//img10.360buyimg.com/imgzone/jfs/t1/176585/24/10488/6916/60a4cb50E562734ab/f9ab956ec09a4146.png",
            },
          ];

          this.fansPlayList = {
            oneLevel: 0,
            prizeInfoId1: "1425695746035818497",
            prizeInfoId2: "1425695750053961730",
            score: 0,
            shopLogoUrl:
              "http://img30.360buyimg.com/popshop/jfs/t1/46707/26/4584/4510/5d268cf5E32143aee/4f49f73d5fd5e914.gif",
            shopName: "Dettol滴露京东自营官方旗舰店",
            threeLevel: 0,
            twoLevel: 0,
            userImg:
              "http://storage.360buyimg.com/i.imageUpload/6a645f3536333863336362363865363831363231343238373434303630_mid.jpg",
            userName: "Artist0926",
            taskList: [
              {
                activeOrDay: 1,
                completeCount: 0,
                maxNum: 1,
                sendNum: 1,
                shopId: 1000002791,
                status: 0,
                taskId: "1425695738683203586",
                taskPosition: 1,
                taskType: 2,
                validType: 0,
              },
            ],
          };
          this.myTotalScore = 15;
          this.giftLevelOne = [this.prizeListData[0]];
          this.giftLevelTwo = [this.prizeListData[1]];
          this.giftLevelThree = [this.prizeListData[2]];
        }
      } else {
        this.shareFlag = this.datas.shareFlag;
        this.shareUserId = store.state.shareUserId;
        this.getFansPlayList();
      }
    },

    getFansPlayList() {
      fansPlayList((data) => {
        this.fansPlayList = data.data;
        this.myTotalScore = data.data.score ? data.data.score : 0;
        this.prizeListData = data.data.prizeVoList;
        this.giftLevelOne = [this.prizeListData[0]];
        this.giftLevelTwo = [this.prizeListData[1]];
        this.giftLevelThree = [this.prizeListData[2]];
        this.showPage = false;
        this.$nextTick(() => {
          this.showPage = true;
        })
        let params = {
          loveScore: data.data.loveScore,
          isFollow: data.data.isFollow,
          shopName: data.data.shopName,
          shopLogoUrl: data.data.shopLogoUrl,
          userImg: data.data.userImg,
          userName: data.data.userName,
          score: data.data.score
        }
        let taskList = data.data.taskList

        this.publicData.$emit('fansFollowShopComponent', params)
        this.publicData.$emit('fansTaskComponent', taskList)
        this.publicData.$emit('taskCallBackData', data.data);
      });
    },

    startDraw(position) {
      if (this.isTemplate) {
        this.$toast("活动预览，仅供查看");
        return;
      }
      const self = this;
      var prizeInfoId = "";
      let actStatus = sessionStorage.getItem("actStatus");
      if (actStatus == 2) {
        this.$toast("活动已结束");
        return;
      }
      if (actStatus == 1) {
        this.$toast("活动未开始");
        return;
      }
      if (position == 1) {
        if (this.myTotalScore < this.giftLevelOneNeedScore) {
          this.$toast("非法操作，您将被列入黑名单");
          return false;
        }
        prizeInfoId = this.fansPlayList.prizeVoList[0].prizeInfoId;
      } else if (position == 2) {
        if (this.myTotalScore < this.giftLevelTwoNeedScore) {
          this.$toast("非法操作，您将被列入黑名单");
          return false;
        }
        prizeInfoId = this.fansPlayList.prizeVoList[1].prizeInfoId;
      } else if (position == 3) {
        if (this.myTotalScore < this.giftLevelThreeNeedScore) {
          this.$toast("非法操作，您将被列入黑名单");
          return false;
        }
      } else if (!position) {
        this.$toast("非法操作，您将被列入黑名单");
        return false;
      }
      this.isStartPlay = true;
      if (this.isDrawOne) {
        this.isDrawOne = false;
        fansDrawList(prizeInfoId, 1, (initDatas) => {
          this.isDrawOne = true;
          if (initDatas.resp_code == 50009) {
            this.$toast("活动已结束");
            this.isStartPlay = false;
            return;
          }

          if (initDatas.resp_code == 60010) {
            NoPrizeResultPopComService.create(
              "非常遗憾，您与大奖擦肩而过~",
              "//img10.360buyimg.com/imgzone/jfs/t1/136745/32/20121/48059/5fd996feE56314a28/b952f0e6f3fe811f.png",
              (submit) => {
                NoPrizeResultPopComService.close();
                this.getFansPlayList();
              });
            this.isStartPlay = false;
            return;
          }

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

          if (initDatas.data && initDatas.data.status == '1') {
            this.initData()
            for (var i = 0; i < this.prizeListData.length; i++) {
              if (this.prizeListData[i].prizeInfoId == 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;
          }
        });
      }
    },
    startDraw1() {
      if (this.isTemplate) {
        this.$toast("活动预览，仅供查看");
        return;
      }
      const self = this;
      let actStatus = sessionStorage.getItem("actStatus");
      if (actStatus == 2) {
        this.$toast("活动已结束");
        return;
      }
      if (actStatus == 1) {
        this.$toast("活动未开始");
        return;
      }

      if (this.myTotalScore < this.giftLevelThreeNeedScore) {
        this.$toast("非法操作，您将被列入黑名单");
        return false;
      }
      this.isStartPlay = true;
      if (this.isDrawTwo) {
        this.isDrawTwo = false;
        startDraw((initDatas) => {
          this.isDrawTwo = true;
          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].prizeInfoId == 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;
          }
        });
      }
    },
    //得奖后的处理
    fulfillHandle(prizeData, initDatas) {
      this.isStartPlay = false;
      this.isShowRotary = this.datas.isShowRotary == true ? true : false;
      this.initData();
      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();
          }
        );
      }
    },
  },
  computed: {
    computedProgressPercent: function () {
      var _this = this;
      var a = JSON.parse(JSON.stringify(_this.myTotalScore));
      _this.progressPercent = a;
      if (_this.progressPercent >= 100) {
        return 100;
      } else {
        return _this.progressPercent + 1;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.progress {
  width: 1%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  background: #ff0606;
  border-radius: 0 100px 100px 0;
}

.light-bag {
  background: url("https://img10.360buyimg.com/imgzone/jfs/t1/106113/25/5768/3291/5df0bdc4E212f5ff1/1eed35920463f6a2.png")
    no-repeat !important;
  background-size: 100% 100% !important;
  width: 0.5rem;
  height: 0.5rem;
  top: -1.05rem !important;
}

.complete-bag {
  background-image: url("https://img10.360buyimg.com/imgzone/jfs/t1/98821/22/6309/2261/5df2067aE62cd172e/20d22ca21ea1d726.png") !important;
  top: -1rem;
}

.scored {
  color: #fc3c2c !important;
}

.rounded {
  background: #fc3c2c !important;
}
</style>
