<template>
  <div
    class="main-container"
    :style="styleData[keyData.mainContainer]"
    ref="commodityListDialog1"
    @click="styleClick('click', 'commodityListDialog1')"
    @mousemove="styleClick('mousemove', 'commodityListDialog1')"
    @mouseout="styleClick('mouseout')"
  >
    <div :style="styleData[keyData.secondsRead]">挑战{{ secondsRead }}s</div>
    <div :style="styleData[keyData.mpNumber]">
      （剩余次数：<span :style="styleData[keyData.mpNumberSpan]">{{
        mpNumber
      }}</span
      >次机会）
    </div>
    <div :style="styleData[keyData.timeKeeper]">
      <div id="time0" :style="styleData[keyData.timeBg]">
        {{ challengeSecond1 }}
      </div>
      <div id="time1" :style="styleData[keyData.timeBg1]">
        {{ challengeSecond2 }}
      </div>
      <div id="time2" :style="styleData[keyData.timeBg2]">
        {{ challengeMilliSecond1 }}
      </div>
      <div id="time3" :style="styleData[keyData.timeBg3]">
        {{ challengeMilliSecond2 }}
      </div>
    </div>
    <div
      :style="styleData[keyData.mainBtn]"
      @click="timeStart"
      v-show="timerFlag"
    >
      开始挑战
    </div>
    <div
      :style="styleData[keyData.mainBtn]"
      @click="timeStop"
      v-show="!timerFlag"
    >
      啪
    </div>
    <div :style="styleData[keyData.otherBtnBox]">
      <div @click="levelClick">降低游戏难度&gt;</div>
      <div @click="moreClick" v-if="noMoreChanceFlag == false">
        更多游戏机会&gt;
      </div>
    </div>
  </div>
</template>
<script>
import { NoPrizeFinishedPopComService } from "../../../util/comCreate.js";
import { levelDialogService } from "../../../util/comCreate.js";
import {
  moreDialogService,
  failDialogService,
  gradeDialogService,
  prizeDialogService,
  ReadSecondsSuccessPopComService,
} from "../../../util/comCreate.js";
import apis1 from "../../../util/apis1.js";
import store from "../../../store/store";

let {
  drawPrize,
  startDraw,
  pinshousuRequest,
  pinshousuTaskRequest,
  drawRequest,
} = 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: {},
      },
      differenceTime: "",
      challengeTime: "",
      shareUserId: "",
      secondsRead: "",
      styleDataOld: {},
    };
  },
  created() {
    //深拷贝重置需要
    this.styleDataOld = JSON.parse(JSON.stringify(this.styleData));
    this.initData();
    this.publicData.$on("readSeconds", (res) => {
      this.mpNumber = this.mpNumber + res;
    });
  },
  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);
      }
    },
    async initData() {
      var datasAll = this.templateData;

      if (this.isTemplate == true) {
        this.$toast("活动预览，仅供查看");
        if (datasAll) {
          this.challengeMilliSecond =
            datasAll.dmpssConditions.challengeMilliSecond;
          this.challengeSecond = datasAll.dmpssConditions.challengeSecond;
          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;
            }
          }
        } else {
          //没有模板的数据
          this.challengeMilliSecond = 11;
          this.challengeSecond = 18;
          this.mpNumber = 1;
        }
      } else {
        this.shareUserId = store.state.shareUserId;
        await pinshousuRequest(this.shareUserId, (mainDatas) => {
          this.mainDatas = mainDatas.data;
          this.helpCompleteCount = mainDatas.data.helpCompleteCount;
          this.challengeMilliSecond = mainDatas.data.challengeMilliSecond;
          this.challengeSecond = mainDatas.data.challengeSecond;
          this.mpNumber = mainDatas.data.dayChance;

          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;
          }

          if (mainDatas.data.dayChance == undefined) {
            this.mpNumber = 0;
          }
          this.addCardFlag = mainDatas.data.addCardFlag;
          this.followStoreFlag = mainDatas.data.followStoreFlag;
          this.shopLogoUrl = mainDatas.data.shopLogoUrl;
          if (mainDatas.data.taskActivityInfoVO.taskList.length == 0) {
            this.noMoreChanceFlag = true;
          } else {
            this.noMoreChanceFlag = false;
          }
          // this.skuInfoVO = mainDatas.data.taskActivityInfoVO.taskFollowSkuWaresVO.skuInfoVO
          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;
      }
      // 开始重置游戏难度时间
      this.number = 0;
      // 判断秒拍次数
      if (this.mpNumber > 0) {
        this.mpNumber = this.mpNumber - 1;
        this.millisecond = 0;
        // 开始按钮，开启计时器
        this.timeId = setInterval(this.getMpTime, 10);
        //换按钮
        this.timerFlag = false;
      } else {
        // 挑战次数为0
        failDialogService.create(
          this.mainDatas,
          this.isTemplate,
          this.isTemplate,
          (prizeRecordDetilClick) => {
            failDialogService.close();
          }
        );
      }
    },
    // 停止计时
    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;

      if (this.challengeTime >= this.secondsRead) {
        this.differenceTime =
          parseFloat(this.challengeTime) - parseFloat(this.secondsRead);
      } else {
        this.differenceTime =
          parseFloat(this.secondsRead) - parseFloat(this.challengeTime);
      }
      // 判断难度等级
      if (this.mainDatas.ifFollowShop) {
        this.number = this.number + 10;
      }
      if (this.mainDatas.ifMember) {
        this.number = this.number + 10;
      }
      this.number10 = this.challengeReal - this.number;
      this.number20 = this.challengeReal + this.number;
      // 中奖区间
      if (
        this.challengeMy >= this.number10 &&
        this.challengeMy <= this.number20
      ) {
        // 是否拍中
        this.canDrawFlag = true;
        // 马上抽奖
        prizeDialogService.create(
          "马上抽奖",
          this.canDrawFlag,
          Number(this.differenceTime.toFixed(2)),
          Number(this.challengeTime),
          (prizeRecordDetilClick) => {
            prizeDialogService.close();
          }
        );
      } else {
        // 是否拍中
        this.canDrawFlag = false;
        // 抽奖接口
        await drawRequest(
          this.canDrawFlag,
          Number(this.differenceTime.toFixed(2)),
          Number(this.challengeTime),
          (mainDatas) => {
            this.mainDatas1 = mainDatas.data;
          }
        );
        this.millisecond =
          this.challengeSecond1 +
          this.challengeSecond2 +
          "." +
          this.challengeMilliSecond1 +
          this.challengeMilliSecond2 +
          "s";
        // 挑战失败显示成绩
        gradeDialogService.create(
          this.millisecond,
          this.mainDatas,
          (prizeRecordDetilClick) => {
            gradeDialogService.close();
          }
        );
      }
      this.challengeSecond1 = 0;
      this.challengeSecond2 = 0;
      this.challengeMilliSecond1 = 0;
      this.challengeMilliSecond2 = 0;
    },
    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 == 2599) {
        var mesgSecond =
          this.challengeSecond1 +
          this.challengeSecond2 +
          "." +
          this.challengeMilliSecond1 +
          this.challengeMilliSecond2 +
          "s";
        // 挑战失败显示成绩
        gradeDialogService.create(mesgSecond, (prizeRecordDetilClick) => {
          gradeDialogService.close();
        });

        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;
      }
    },
    levelClick() {
      if (this.isTemplate == true) {
        this.$toast("活动预览，仅供查看");
        return;
      }
      let actStatus = sessionStorage.getItem("actStatus");
      if (actStatus == 2) {
        this.$toast("活动已结束");
        return;
      }
      if (actStatus == 1) {
        this.$toast("活动尚未开始");
        // Toast('活动尚未开始');
        return;
      }
      levelDialogService.create(
        this.mainDatas.needFollowStore,
        this.mainDatas.needAddCard,
        this.mainDatas,
        (prizeRecordDetilClick) => {
          levelDialogService.close();
        }
      );
    },
    moreClick() {
      if (this.isTemplate == true) {
        this.$toast("活动预览，仅供查看");
        return;
      }
      let actStatus = sessionStorage.getItem("actStatus");
      if (actStatus == 2) {
        this.$toast("活动已结束");
        return;
      }
      if (actStatus == 1) {
        this.$toast("活动尚未开始");
        // Toast('活动尚未开始');
        return;
      }
      moreDialogService.create(
        this.acRulePopComData,
        this.helpCompleteCount,
        this.activityUserLimit,
        (prizeRecordDetilClick) => {
          moreDialogService.close();
        }
      );
      this.publicData.$emit("pinshousuTaskData", this.mainDatas);
    },
  },
};
</script>
<style scoped>
</style>
