<template>
  <div
    :style="styleData.opportunityBigBox"
    ref="hcHdzxtStartGame"
    @click="styleClick('click', 'hcHdzxtStartGame')"
    @mousemove="styleClick('mousemove', 'hcHdzxtStartGame')"
    @mouseout="styleClick('mouseout', 'hcHdzxtStartGame')"
  >
    <div :style="styleData.imageUrlStyle">
      <div class="topStyle" :style="styleData.topStyle">
        <div class="topLeftStyle" :style="styleData.topLeftStyle">
          玩游戏赢大奖
        </div>
        <div v-if="task.length > 0"
          class="topRightStyle"
          :style="styleData.topRightStyle"
          @click="moveOpport()">
          获取更多游戏机会>>
        </div>
      </div>

      <div :style="isWebClick ? styleData.startGameB : styleData.startGame">
        <div
          :style="styleData.startGameUrl"
          @click="startGame()"
          class="startGame"
        ></div>

        <div v-if="isShowRedCicle">
          <div v-if="gameChance < 10" :style="styleData.restDrawCount1">
            {{ gameChance }}
          </div>
          <div
            v-else-if="gameChance > 10 && gameChance < 100"
            :style="styleData.restDrawCount2"
          >
            {{ gameChance }}
          </div>
          <div v-else :style="styleData.restDrawCount3">{{ gameChance }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import store from "../../../store/store";
import apis1 from "../../../util/apis1.js";
import bus from "../../../util/bus.js";
import { removeUrlShareUserId } from "../../../util/tools";

import {
  TaskPopComServiceNew2,
  PrizeResultPopComService,
  NoPrizeResultPopComService
} from "../../../util/hdzxtcomCreate.js";
import { Toast } from "vant";

let { bigWinnerAct, startDraw, getGameInfo, lotteryCenter } = apis1;

export default {
  props: [
    "isTemplate",
    "datas",
    "styleData",
    "keyData",
    "templateData",
    "isWebClick",
    "modifyContent"
  ],
  data() {
    return {
      gameChance: "0", //剩余游戏机会
      restDrawCount: "0", //抽奖机会
      showShare: false, // pop页显示分享任务
      showFoll: false, // pop页显示关注任务
      showBuy: false, // pop页显示购买商品任务
      pointFoll: 1, // pop页显示分享任务
      pointShare: 3, // pop页显示关注任务
      pointBuy: 2, // pop页显示购买商品任务
      task:[],
      dataListLength: 0,
      gameUrl: "", //游戏得url
      isShowRedCicle: false, //是否显示红点
      score: 0 //门槛游戏分数
    };
  },
  created() {
    this.isShowRedCicle = this.datas.isShowRedCicle;

    this.publicData.$on("xhyFollowSkuTask", xhyFollowSkuTask => {
      if (xhyFollowSkuTask) {
        this.initData(true);
      }
    });
    this.initData(false);
  },
  methods: {
    styleClick(type, refName) {
      if (this.isWebClick) {
        //传值给B端
        let byValue = {
          modifyContent: this.modifyContent,
          refName: refName,
          styleData: this.styleData,
          c_this: this,
          styleDataOld: this.styleDataOld
        };
        this.$emit("opertaionCom", type, byValue);
      }
    },

    initData(isCallBack) {
      if (this.isTemplate) {
        if (!this.isWebClick) {
          this.$toast("活动预览，仅供查看");
        }
        this.dataList = [1];
        var datasAll = this.templateData;
        if (datasAll) {
          this.dataListLength = datasAll.basicTask.taskList.length - 1;
          console.log(datasAll, "datasAll");
          if (datasAll.basicTask.taskList) {
            datasAll.basicTask.taskList.forEach((v, i) => {
              if (v.taskType == "20") {
                console.log(
                  v.rule.freeChargeRule.sendNum,
                  "v.rule.freeChargeRule.sendNum"
                );
                // this.restDrawCount = v.rule.freeChargeRule.sendNum;
                this.gameChance = v.rule.freeChargeRule.sendNum;
              }
            });
          }
        } else {
          this.dataListLength = 1;
          this.restDrawCount = 0;
        }
        return;
      }

      let token = store.state.token;
      let params = `${
        process.env.GAME_HOST
      }/index.html?templateId=${sessionStorage.getItem(
        "templateId"
      )}&token=${token}`;

      if (sessionStorage.getItem("activityType") == "10059") {
        //获取开始游戏得url
        bigWinnerAct(params, data => {
          this.restDrawCount = data.data.canDrawTimes; //抽奖次数
          this.gameChance = data.data.gameChance; //游戏机会
          this.gameUrl = data.data.gameShortUrl; //游戏链接
          if (isCallBack) {
            this.publicData.$emit("taskCallBackData", data.data);
          }
          this.task = data.data.taskList;
          let isInvite = data.data.taskList.some(item => item.taskType == 15);
          this.publicData.$emit("isInvite", isInvite);
          lotteryCenter(taskDatas => {
            console.log(taskDatas, "任务数据");
            setTimeout(() => {
              if (taskDatas.data.status == 1) {
                this.$toast("助力成功");
              } else if (taskDatas.data.status == 2) {
                this.$toast("已助力");
              } else if (taskDatas.data.status == 3) {
                this.$toast("助力失败");
              } else if (taskDatas.data.status == 4) {
                this.$toast("自己不能给自己助力！");
              } else if (taskDatas.data.status == 5) {
                this.$toast("您已为其他好友助过力了~");
              } 
              // else if (!taskDatas.data.status && store.state.shareUserId) {
              //   Toast("该助力链接已失效，请重新获取助力链接。");
              // }
            }, 500);
            setTimeout(() => {
              if (store.state.shareUserId) {
                removeUrlShareUserId();
              }
            }, 1500);
          });
        });
      } else {
        //获取游戏信息 - 新版
        getGameInfo(params, data => {
          this.restDrawCount = data.data.canDrawTimes; //抽奖次数
          this.gameChance = data.data.gameChance; //游戏机会
          this.gameUrl = data.data.gameShortUrl; //游戏链接
          this.score = data.data.score;
          setTimeout(() => {
            if (data.data.status == 1) {
              Toast("助力成功");
            } else if (data.data.status == 2) {
              Toast("已助力");
            } else if (data.data.status == 3) {
              Toast("助力失败");
            } else if (data.data.status == 4) {
              Toast("自己不能给自己助力！");
            } else if (data.data.status == 5) {
              Toast("您已为其他好友助过力了~");
            }
            //  else if (!data.data.status && store.state.shareUserId) {
            //   Toast("该助力链接已失效，请重新获取助力链接。");
            // }
          }, 500);

          setTimeout(() => {
            if (store.state.shareUserId) {
              removeUrlShareUserId();
            }
          }, 1500);

          // if (store.state.shareUserId) {
          //   store.commit("setShareUserId", null);
          // }

          if (isCallBack) {
            this.publicData.$emit("taskCallBackData", data.data);
          }
          this.task = data.data.taskList;
        });
      }
    },
    //开始游戏
    startGame() {
      if (this.isTemplate) {
        if (!this.isWebClick) {
          this.$toast("活动预览，仅供查看");
        }
        return;
      }
      let actStatus = sessionStorage.getItem("actStatus");
      if (actStatus == 2) {
        this.$toast("活动已结束");
        return;
      }
      if (actStatus == 1) {
        this.$toast("活动尚未开始");
        return;
      }
      if (this.gameChance == 0) {
        if (this.dataListLength > 0) {
          this.$toast("游戏机会已用完，做任务可获得更多游戏机会哦~");
        } else {
          this.$toast("游戏机会已用完，做任务可获得更多游戏机会哦~");
        }
        return;
      }
      if (this.gameUrl) {
        if (
          sessionStorage.getItem("activityType") == "10059" ||
          sessionStorage.getItem("activityType") == "10092" ||
          sessionStorage.getItem("activityType") == "10093"
        ) {
          window.location.href = this.gameUrl;
        } else {
          this.$router.replace({
            path: "/gameIndex",
            query: {
              gameSources: encodeURIComponent(this.gameUrl),
              score: this.score || ""
            }
          });
        }
      }
    },
    //做任务
    moveOpport() {
      if (this.isTemplate) {
        if (!this.isWebClick) {
          this.$toast("活动预览，仅供查看");
        }
        return;
      }
      let actStatus = sessionStorage.getItem("actStatus");
      if (actStatus == 2) {
        this.$toast("活动已结束");
        return;
      }
      if (actStatus == 1) {
        this.$toast("活动尚未开始");
        return;
      }

      // this.initData(false);

      TaskPopComServiceNew2.create(
        this.isTemplate,
        this.showShare,
        this.showFoll,
        this.showBuy,
        this.gameChance,
        this.pointFoll,
        this.pointShare,
        this.pointBuy,
        this.task,
        this.styleData,
        this.datas,
        submit => {
          TaskPopComServiceNew2.close();
          // this.initData();
          let dataAll = {};
          // if (typeof submit == 'string') {
          //   dataAll = JSON.parse(submit);
          // }
          if (submit) {
            if (typeof submit == "string") {
              dataAll = JSON.parse(submit);
              console.log("submit", dataAll);
              if (dataAll.taskType && dataAll.taskType == "13") {
                return;
              } else if (
                dataAll.taskItemData &&
                dataAll.taskItemData.taskType == "13"
              ) {
                return;
              }
            }
            this.initData(false);
          }else{
            this.initData(false);
          }

          // this.gameChance = this.gameChance + dataAll.data;
        }
      );

      // this.teskShadowShow = !this.teskShadowShow; //控制任务列表收放
      // document.documentElement.style.overflowY = "hidden"; //开启禁止屏幕滚动
    }
  }
};
</script>

<style lang="scss">
.topStyle {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 0.82rem;
  padding: 0rem 0.54rem 0 0.54rem;
}

.topLeftStyle {
  font-size: 0.28rem;
  color: #343434;
}

.topRightStyle {
  font-size: 0.28rem;
  color: #f2270c;
}
</style>
