<template>
  <div class="main-container" :style="styleData[keyData.mainContainer]">
    <div :style="styleData.secondMsg">
      <div :style="styleData[keyData.secondsRead]">挑战{{ secondsRead }}s</div>
      <div :style="styleData[keyData.mpNumber]">
        当前剩余机会：
        <span :style="styleData[keyData.mpNumberSpan]">{{ mpNumber }}</span>
        次
      </div>
    </div>
    <div :style="styleData[keyData.timeKeeper]">
      <div id="time0" :style="styleData[keyData.timeBg]">
        <template v-if="datas.timeNumers">
          <img :src="timeNumers[challengeSecond1]" style="width: 1.02rem;height: 1.54rem;"  alt="数字">
        </template>
        <div v-else :style="styleData.centerSpan">{{ challengeSecond1 }}</div>
      </div>
      <div id="time1" :style="styleData[keyData.timeBg1]">
        <template v-if="datas.timeNumers">
          <img :src="timeNumers[challengeSecond2]" style="width: 1.02rem;height: 1.54rem;" alt="数字">
        </template>
        <span v-else>{{ challengeSecond2 }}</span>
      </div>
      <div id="time2" :style="styleData[keyData.timeBg2]">
        <template v-if="datas.timeNumers">
          <img :src="timeNumers[challengeMilliSecond1]" style="width: 1.02rem;height: 1.54rem;" alt="数字">
        </template>
        <span v-else>{{ challengeMilliSecond1 }}</span>
      </div>
      <div id="time3" :style="styleData[keyData.timeBg3]">
        <template v-if="datas.timeNumers">
          <img :src="timeNumers[challengeMilliSecond2]" style="width: 1.02rem;height: 1.54rem;" alt="数字">
        </template>
        <span v-else>{{ challengeMilliSecond2 }}</span>
      </div>
    </div>
    <template v-if="styleData.mainBtnNotChat">
      <div :style="styleData.mainBtnNotChat" @click="timeStart" v-if="timerFlag"></div>
      <div :style="styleData.mainBtnNotChat1" @click="timeStop" v-if="!timerFlag"></div>
    </template>
    <template v-if="styleData[keyData.mainBtn]">
      <div :style="styleData[keyData.mainBtn]" @click="timeStart" v-if="timerFlag">开始挑战</div>
      <div :style="styleData[keyData.mainBtn]" @click="timeStop" v-if="!timerFlag">啪</div>
    </template>
    
    <div :style="styleData[keyData.otherBtnBox]">
      <template v-if="styleData.leftBtn&&styleData.rightBtn">
        <div :style="styleData.leftBtn" @click="levelClick"></div>
        <div :style="styleData.rightBtn" @click="moreClick" v-if="noMoreChanceFlag == false"></div>
      </template>
      <template v-else>
        <div @click="levelClick">降低游戏难度&gt;</div>
        <div @click="moreClick" v-if="noMoreChanceFlag == false">更多游戏机会&gt;</div>
      </template>
    </div>
  </div>
</template>
<script>
import Rsa from '@/util/rsa.js';
import { TaskPopComServiceNew2, shouSuReducePopComService, shouSuLoserPopComService, PrizeResultPopComService, NoPrizeResultPopComService } from '../../../util/hdzxtcomCreate.js';
import apis1 from '../../../util/apis1.js';
import store from '../../../store/store';
import { getUrlQueryValueByKey } from '../../../util/tools.js';

let { pinshousuRequest, pinshousuStart, pinshousuEnd } = apis1;
export default {
  name: 'commodityListDialog',
  props: ['isTemplate', 'datas', 'keyData', 'styleData', 'templateData', 'isWebClick', 'modifyContent'],
  data() {
    return {
      img_path: 'https://img10.360buyimg.com/imgzone/jfs/t1/125587/19/7077/16212/5f0bc7ebEaa698c41/f3ad84ac3db3a901.png',
      commodityList: [], //商品信息
      isShow: false, //是否显示一键加购
      challengeMilliSecond: 0,
      challengeSecond: 0,
      challengeMilliSecond1: 0,
      challengeSecond1: 0,
      challengeMilliSecond2: 0,
      challengeSecond2: 0,
      mpNumber: 1, // 秒拍次数
      number: 0, // 难度等级
      num: 0, // 计数器
      mainDatas1: [],
      friendsHelpData: [], // 好友助力初始数据
      time: '00:00', // 计时器时间
      millisecond: 0, // 毫秒数
      timeId: 0, // 计时器id
      timerFlag: true, // 计时器按钮flag
      imgflag: false,
      canDrawFlag: false,
      helpCompleteCount: 0,
      noMoreChanceFlag: false,
      acRulePopComData: {
        styleData: {},
        datas: {},
        keyData: {}
      },
      test: {},
      acRulePopComData1: {
        styleData: {},
        datas: {},
        keyData: {}
      },
      challengeTime: '',
      shareUserId: '',
      secondsRead: '',
      roomId: '',
      buttonId: '',
      task: [],
      pubKey: '',
      initDatas: {},
      showShare: false, // pop页显示分享任务
      showFoll: false, // pop页显示关注任务
      showBuy: false, // pop页显示购买商品任务
      pointFoll: 1, // pop页显示分享任务
      pointShare: 3, // pop页显示关注任务
      pointBuy: 2, // pop页显示购买商品任务
      timeNumers: ''
    };
  },
  created() {
    this.publicData.$on('xhyFollowSkuTask', xhyFollowSkuTask => {
      if (xhyFollowSkuTask) {
        this.initData(true);
      }
    });
    this.initData(false);
    if(this.datas.timeNumers){
      this.timeNumers = this.datas.timeNumers
    }
  },
  methods: {
    async initData(isCallBack,type) {
      var datasAll = this.templateData;
      if (this.isTemplate == true) {
        this.$toast('活动预览，仅供查看');
        if (datasAll) {
          this.challengeMilliSecond = datasAll.secondSetting.millisecond;
          this.challengeSecond = datasAll.secondSetting.second;
          for (var i = 0; i < datasAll.basicTask.taskList.length; i++) {
            if (datasAll.basicTask.taskList[i].taskType == 20) {
              this.mpNumber = datasAll.basicTask.taskList[i].rule.freeChargeRule.sendNum;
            }
          }
          this.secondsRead = this.challengeSecond + '.' + this.challengeMilliSecond;
        } else {
          //没有模板的数据
          this.challengeMilliSecond = 11;
          this.challengeSecond = 18;
          this.mpNumber = 1;
        }
      } else {
        this.shareUserId = store.state.shareUserId;
        await pinshousuRequest(this.shareUserId, mainDatas => {
          var cur_url = location.href;
          var shareUserId = getUrlQueryValueByKey('shareUserId', cur_url);
          if(type == false){

          }else{
            if (shareUserId) {
            if (mainDatas.data.canAssist == 1) {
              this.$toast('恭喜您，助力成功！');
            } else if (mainDatas.data.canAssist == 2) {
              this.$toast('您已经助力过！');
            }
          }
          }
          
          this.mainDatas = mainDatas.data;
          this.helpCompleteCount = mainDatas.data.helpCompleteCount;
          this.challengeMilliSecond = mainDatas.data.challengeMilliSecond;
          this.challengeSecond = mainDatas.data.challengeSecond;
          this.mpNumber = mainDatas.data.dayChance;
          this.roomId = mainDatas.data.roomId;
          this.task = mainDatas.data.taskActivityInfoVO.taskList;
          this.pubKey = mainDatas.data.pubKey;
          this.initDatas = mainDatas.data;
          if (isCallBack) {
            this.publicData.$emit('taskCallBackData', mainDatas.data.taskActivityInfoVO);
          }
          // if (
          //   this.challengeSecond < 10 &&
          //   this.challengeSecond >= 0 &&
          //   this.challengeMilliSecond < 10 &&
          //   this.challengeMilliSecond >= 0
          // ) {
          //   this.secondsRead =
          //     "0" + this.challengeSecond + ".0" + this.challengeMilliSecond;
          // } else if (this.challengeSecond < 10 && this.challengeSecond >= 0) {
          //   this.secondsRead =
          //     "0" + this.challengeSecond + "." + this.challengeMilliSecond;
          // } else if (
          //   this.challengeMilliSecond < 10 &&
          //   this.challengeMilliSecond >= 0
          // ) {
          //   this.secondsRead =
          //     this.challengeSecond + ".0" + this.challengeMilliSecond;
          // } else {
          //   this.secondsRead =
          //     this.challengeSecond + "." + this.challengeMilliSecond;
          // }
          this.secondsRead = this.challengeSecond + '.' + this.challengeMilliSecond;

          if (mainDatas.data.dayChance == undefined) {
            this.mpNumber = 0;
          }
          if (mainDatas.data.taskActivityInfoVO.taskList.length == 0) {
            this.noMoreChanceFlag = true;
          } else {
            this.noMoreChanceFlag = false;
          }
          // if (
          //   mainDatas.data.canAssist == 0 ||
          //   mainDatas.data.canAssist == 1 ||
          //   mainDatas.data.canAssist == 3
          // ) {
          //   ReadSecondsSuccessPopComService.create(
          //     mainDatas.data.canAssist,
          //     (prizeRecordDetilClick) => {
          //       ReadSecondsSuccessPopComService.close();
          //     }
          //   );
          // } else if (mainDatas.data.canAssist == 5) {
          //   setTimeout(() => {
          //     this.$toast("好友活动期间助力已满");
          //   }, 200);

          //   return;
          // } else if (mainDatas.data.canAssist == 6) {
          //   setTimeout(() => {
          //     this.$toast("好友今日助力已满");
          //   }, 200);
          //   return;
          // }
        });
      }
    },
    timeStart() {
      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.mpNumber > 0) {
      //   this.mpNumber = this.mpNumber - 1;
      //   this.millisecond = 0;
      //   // 开始按钮，开启计时器
      //   this.timeId = setInterval(this.getMpTime, 10);
      //   //换按钮mpNumber
      //   this.timerFlag = false;
      // } else {
      //   // 挑战次数为0
      //   this.$toast('挑战次数为0');
      //   return;
      // }

      pinshousuStart(this.roomId, res => {
        if (res.resp_code == 0) {
          // 判断秒拍次数
          if (this.mpNumber > 0) {
              this.mpNumber = this.mpNumber - 1;
              this.millisecond = 0;
              // 开始按钮，开启计时器
              this.timeId = setInterval(this.getMpTime, 10);
              //换按钮mpNumber
              this.timerFlag = false;
            } else {
              // 挑战次数为0
              this.$toast('挑战次数为0');
              return;
            }
          this.buttonId = res.data;
        }else if(res.resp_code == 1000){
           this.$toast(res.resp_msg);
              return;
        }
        
      });
    },
    // 停止计时
    async timeStop() {
      // 停止按钮
      window.clearInterval(this.timeId);
      this.timeId = 0;
      //换按钮
      this.timerFlag = true;
      this.challengeMy = this.challengeSecond1 * 1000 + Number(this.challengeSecond2) * 100 + Number(this.challengeMilliSecond1) * 10 + Number(this.challengeMilliSecond2) * 1;
      this.challengeReal = Number(this.challengeSecond) * 100 + Number(this.challengeMilliSecond) * 1;
      this.challengeTime = this.challengeSecond1 + this.challengeSecond2 + '.' + this.challengeMilliSecond1 + this.challengeMilliSecond2;

      console.log(this.challengeTime, 'challengeTime');

      var jiamiObj = {
        id: this.roomId + ',' + this.buttonId,
        score: this.challengeTime
      };
      JSON.stringify(jiamiObj);

      let result = Rsa.jiami(JSON.stringify(jiamiObj), this.pubKey);
      console.log(result, '999999');

      pinshousuEnd(result, res => {
        if (res.data.canDrawFlag) {
          // 挑战成功
          if (res.data.isDraw) {
            var obj = {
              datas: {},
              keyData: {
                prizeUrl: 'showImg',
                prizeName: 'prizeName',
                prizeType: 'prizeType',
                priceInfo: 'priceInfo',
                discountType: 'discountType',
                couponType: 'couponType'
              }
            };
            obj.datas = res.data;
            PrizeResultPopComService.create(obj, res.data, this.styleData, submit => {
              console.log(submit);
              PrizeResultPopComService.close();
            });
            // 通知刷新奖品组件
            this.publicData.$emit('prizeInit',true);
          } else {
            NoPrizeResultPopComService.create(this.styleData, submit => {
              NoPrizeResultPopComService.close();
            });
          }
        } else {
          // 挑战失败
          shouSuLoserPopComService.create(this.isTemplate, this.challengeTime, this.initDatas, this.styleData, submit => {
            shouSuLoserPopComService.close();
          });
        }
        this.initData(false,false);
      });

      this.challengeSecond1 = 0;
      this.challengeSecond2 = 0;
      this.challengeMilliSecond1 = 0;
      this.challengeMilliSecond2 = 0;
    },
    levelClick() {
      if (this.isTemplate) {
        this.$toast('活动预览，仅供查看');
        return;
      }
      let actStatus = sessionStorage.getItem('actStatus');
      if (actStatus == 2) {
        this.$toast('活动已结束');
        return;
      }
      if (actStatus == 1) {
        this.$toast('活动尚未开始');
        return;
      }
      shouSuReducePopComService.create(this.isTemplate, this.initDatas, this.styleData, submit => {
        shouSuReducePopComService.close();
      });
    },
    moreClick() {
      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.mpNumber,
        this.pointFoll,
        this.pointShare,
        this.pointBuy,
        this.task,
        this.styleData,
        this.datas,
        submit => {
          TaskPopComServiceNew2.close();
          if (submit) {
            this.initData(false);
          }
        }
      );
    },
    getMpTime() {
      this.millisecond = this.millisecond + 1;
      var millstr = this.millisecond.toString();
      if (millstr.length <= 0) {
        millstr = '0000';
      } else if (millstr.length == 1) {
        millstr = '000' + millstr;
      } else if (millstr.length == 2) {
        millstr = '00' + millstr;
      } else if (millstr.length == 3) {
        millstr = '0' + millstr;
      }
      var firstStr = millstr.substr(0, 1);
      var secondStr = millstr.substr(1, 1);
      var thirdStr = millstr.substr(2, 1);
      var fourthStr = millstr.substr(3, 1);

      this.challengeSecond1 = firstStr;
      this.challengeSecond2 = secondStr;
      this.challengeMilliSecond1 = thirdStr;
      this.challengeMilliSecond2 = fourthStr;
      if (this.millisecond == 2999) {
        this.challengeTime = this.challengeSecond1 + this.challengeSecond2 + '.' + this.challengeMilliSecond1 + this.challengeMilliSecond2;

        window.clearInterval(this.timeId);
        this.timeId = 0;
        this.millisecond = 0;
        //换按钮
        this.timerFlag = true;
        this.challengeSecond1 = 0;
        this.challengeSecond2 = 0;
        this.challengeMilliSecond1 = 0;
        this.challengeMilliSecond2 = 0;

        var jiamiObj = {
          id: this.roomId + ',' + this.buttonId,
          score: this.challengeTime
        };
        JSON.stringify(jiamiObj);

        let result = Rsa.jiami(JSON.stringify(jiamiObj), this.pubKey);
        pinshousuEnd(result, res => {
          this.initData();
          // 挑战失败显示成绩
          shouSuLoserPopComService.create(this.isTemplate, this.challengeTime, this.initDatas, this.styleData, submit => {
            shouSuLoserPopComService.close();
          });
        });
      }
    }
  }
};
</script>
<style scoped></style>
