<template>
  <div :style="styleData.opportunityBigBox">
    <!-- <div class="opportunityNumberText" :style="styleData.opportunityNumberText">
      剩余
      <span :style="styleData.restDrawCount">{{ gameChance }}次</span>
      游戏机会
    </div> -->

    <div :style="styleData.imageUrlStyle">

      <div class="topStyle" :style="styleData.topStyle">
         <div class="topLeftStyle" :style="styleData.topLeftStyle">玩游戏赢大奖</div>
         <div class="topRightStyle" :style="styleData.topRightStyle" @click="moveOpport()">获取更多游戏机会>></div>
       </div>


      <div :style="styleData.startGame">
        <img @click="startGame()" :src="styleData.startGame.imageUrl" alt class="startGame" :style="styleData.startGameUrl" />

        <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 @click="startGame()" v-else :style="styleData.startGame">
        开始游戏



      </div>
 -->
    </div>

    <!-- <img :src="styleData.opportunityNumberImg.imageUrl" alt class="opportunityNumberImg" :style="styleData.opportunityNumberImg" @click="moveOpport()" /> -->
  </div>
</template>

<script>
import store from '../../../store/store';
import apis1 from '../../../util/apis1.js';
import bus from '../../../util/bus.js';
import { TaskPopComServiceNew2, lotteryCenter, PrizeResultPopComService, NoPrizeResultPopComService } from '../../../util/hdzxtcomCreate.js';
let { bigWinnerAct, startDraw, getBigWinnerTask } = apis1;

export default {
  props: ['isTemplate', 'datas', 'styleData', 'keyData', 'templateData'],
  data() {
    return {
      gameChance: '0', //剩余游戏机会
      restDrawCount: '0', //抽奖机会
      showShare: false, // pop页显示分享任务
      showFoll: false, // pop页显示关注任务
      showBuy: false, // pop页显示购买商品任务
      pointFoll: 1, // pop页显示分享任务
      pointShare: 3, // pop页显示关注任务
      pointBuy: 2, // pop页显示购买商品任务

      dataListLength: 0,
      gameUrl: '', //游戏得url
      isShowRedCicle: false //是否显示红点
    };
  },
  created() {
    this.isShowRedCicle = this.datas.isShowRedCicle;

    this.publicData.$on('xhyFollowSkuTask', xhyFollowSkuTask => {
      if (xhyFollowSkuTask) {
        this.initData(true);
      }
    });
    this.initData(false);
  },
  methods: {
    initData(isCallBack) {
      if (this.isTemplate) {
        this.$toast('活动预览，仅供查看');
        this.dataList = [1];
        var datasAll = this.templateData;
        if (datasAll) {
          this.dataListLength = datasAll.basicTask.taskList.length - 1;
          if (datasAll.basicTask.taskList) {
            datasAll.basicTask.taskList.forEach((v, i) => {
              if (v.taskType == 20) {
                this.restDrawCount = v.rule.freeChargeRule.sendNum;
              }
            });
          }
        }
        return;
      }

      let token = store.state.token;
      let params = `${process.env.GAME_HOST}/index.html?templateId=${sessionStorage.getItem('templateId')}&token=${token}`;
      //获取开始游戏得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;
      });
    },
    //开始游戏
    startGame() {
      if (this.isTemplate) {
        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) {
        window.location.href = this.gameUrl;
      }
    },
    //做任务
    moveOpport() {
      if (this.isTemplate) {
        this.$toast('活动预览，仅供查看');
        return;
      }
      let actStatus = sessionStorage.getItem('actStatus');
      if (actStatus == 2) {
        this.$toast('活动已结束');
        return;
      }
      if (actStatus == 1) {
        this.$toast('活动尚未开始');
        return;
      }

      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) {
            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>
