<template>
  <div id="peter-home-wrap">
    <div class="__home_page_p cc_column cc_rela" :style="{ backgroundImage: `url(${homeImage.homeBg})` }">
      <div class="cc_abs __logo">
        <bg-wrap :config="homeImage.logo"></bg-wrap>
      </div>

      <div class="cc_space_bn __right_btn cc_abs">
        <bg-wrap :config="homeImage.ruleBtn" is-hove @onTap="openRulePop"></bg-wrap>
        <bg-wrap :config="homeImage.ListBtn" is-hove @onTap="openLuckListPop"></bg-wrap>
      </div>

      <div class="__nav_draw cc_abs">
        <bg-wrap :config="homeImage.navdraw" is-hove @onTap="openDrawPop"></bg-wrap>
      </div>

      <Kong height="1289" />

      <div class="__bottom_ui cc_column">
        <div class="cc_app750">
          <bg-wrap :config="homeImage.textK"></bg-wrap>
          <Kong height="10" is-level />
          <div class="__k_coin_list cc_space_bn">
            <div class="__k_coin_item cc_app750" v-for="(item, index) in currentAScore" :key="index">
              {{ item }}
            </div>
          </div>
        </div>
        <Kong height="22" />
        <bg-wrap :config="homeImage.startgame" is-hove @onTap="startGame" classCom="cc_rela" :is-hidden="false">
          <div class="cc_abs __right_red_num cc_app750">
            {{ myInfoData.chance || 0 }}
          </div>
        </bg-wrap>
        <Kong height="20" />
        <bg-wrap :config="homeImage.movegame" is-hove @onTap="openTaskPop"></bg-wrap>
      </div>
    </div>
    <!-- 任务弹窗 -->
    <Task ref="task" @openLuckListPop="openLuckListPop" @openRulePop="openRulePop" @openNoList="isNoTaskListPop = true"
      @openAddGoods="openAddGoods" @navShopHome="navShopHome" @addGameNum="addGameNum" @navGoShare="navGoShare"></Task>
    <Draw ref="draw" @openLuckListPop="openLuckListPop" @openRulePop="openRulePop" @onLuckly="startLuckLyIng"
      @onNoKb="isNoKBPop = true" @drawComponent="drawComponent" @navShopHome="navShopHome"
      @onHandleBefour="onHandleBefour" :score="myInfoData.score"></Draw>
    <Kb ref="kb" :my-info="activityData" :down-time-datile="downTimeDatile" @openPrizePop="openPrizePop"
      @initDownTime="initDownTime" @openRulePop="openRulePop"></Kb>

    <!-- 不是会员 -->
    <AllPop :bg-image="homeImage.ruhuipop" :is-show="isVipPop" @onClose="isVipPop = false">
      <!-- 入会 -->
      <Kong height="572" />
      <bg-wrap :config="homeImage.ruhuibtn" @onTap="bankVipCard" is-hove></bg-wrap>
    </AllPop>

    <!-- 是会员 -->
    <AllPop :bg-image="homeImage.canyupop" :is-show="isOpenWebPop" @onClose="isOpenWebPop = false">
      <!-- 立即参与-->
      <Kong height="660" />
      <bg-wrap :config="homeImage.canyubtn" @onTap="isOpenWebPop = false" is-hove></bg-wrap>
    </AllPop>

    <!-- 游戏次数不足 -->
    <AllPop :bg-image="homeImage.dangaobuzhupop" :is-show="isNoCakePop" @onClose="isNoCakePop = false">
      <!-- 打开任务弹窗-->
      <Kong height="548" />
      <bg-wrap :config="homeImage.wanchengrenwu" is-hove @onTap="openTaskPop('isNoCakePop')"></bg-wrap>
    </AllPop>

    <!-- 助力满 -->
    <AllPop :bg-image="homeImage.zhuliman" :is-show="isNoAssistPop" @onClose="isNoAssistPop = false">
      <!-- 参与 -->
      <Kong height="576" />
      <bg-wrap @onTap="isNoAssistPop = false" :config="homeImage.canyubtn" is-hove></bg-wrap>
    </AllPop>

    <!-- 您的好友邀请您 为TA助力   -->
    <AllPop :bg-image="homeImage.weitazhuli" :is-show="currentAssistIndex === 1" @onClose="currentAssistIndex = null">
      <!-- 立即参与-->
      <Kong height="576" />
      <bg-wrap @onTap="bankVipCard(true)" :config="homeImage.ruhuibtn" is-hove></bg-wrap>
    </AllPop>

    <!-- 首次入会 助力成功     -->
    <AllPop :bg-image="homeImage.shouciruhuizhulichengg" :is-show="currentAssistIndex === 2"
      @onClose="currentAssistIndex = null">
      <!-- 立即参与-->
      <Kong height="576" />
      <bg-wrap :config="homeImage.canyubtn" @onTap="currentAssistIndex = null" is-hove></bg-wrap>
    </AllPop>

    <!-- 非首次入会 助力失败    -->
    <AllPop :bg-image="homeImage.zhulishibai" :is-show="currentAssistIndex === 3" @onClose="currentAssistIndex = null">
      <!-- 立即参与-->
      <Kong height="576" />
      <bg-wrap :config="homeImage.canyubtn" @onTap="currentAssistIndex = null" is-hove></bg-wrap>
    </AllPop>

    <!-- 战无明细 -->
    <AllPop :bg-image="homeImage.zhanwumingxi" :is-show="isNoTaskListPop" @onClose="isNoTaskListPop = false">
    </AllPop>

    <!-- k币不足 -->
    <AllPop :bg-image="homeImage.kbuzhu" :is-show="isNoKBPop" @onClose="isNoKBPop = false">
      <!-- 参与游戏 -->
      <Kong height="576" />
      <bg-wrap :config="homeImage.canyuyouxi" @onTap="closeDrawPop" is-hove></bg-wrap>
    </AllPop>

    <!-- 未中奖 -->
    <AllPop :bg-image="homeImage.weizhongjiangpop" :is-show="isNoLucklyPop" @onClose="isNoLucklyPop = false">
      <!-- 参与游戏 -->
      <Kong height="480" />
      <bg-wrap :config="homeImage.zaishishi" is-hove @onTap="aigneDraw"></bg-wrap>
      <Kong height="32" />
      <bg-wrap :config="homeImage.jindianguangg_d" is-hove @onTap="navShopHome"></bg-wrap>
    </AllPop>

    <!-- //中奖弹窗 -->
    <AllPop :bg-image="homeImage['luck_' + isLucklyIndex]" :is-show="isLucklyPop" @onClose="isLucklyPop = false">
      <div class="cc_rela cc_abspic cc_column" v-if="isLucklyIndex === 1">
        <Kong height="660" />
        <!-- 立即领取 -->
        <bg-wrap :config="homeImage.lijilingqu_d" is-hove @onTap="openAddress"></bg-wrap>
        <bg-wrap :config="homeImage.luck_text_4" classCom="__luck_text cc_abs"></bg-wrap>
      </div>
      <div v-else class="cc_rela cc_abspic cc_column">
        <Kong height="672" />
        <!-- 立即领取 -->
        <div class="cc_flex">
          <bg-wrap :config="homeImage.lijilingqu" @onTap="toastConplent" is-hove></bg-wrap>
          <Kong height="30" is-level />
          <bg-wrap :config="homeImage.jindianguangg" @onTap="navShopHome" is-hove></bg-wrap>
        </div>
        <bg-wrap :config="homeImage.luck_text_1" classCom="__luck_text cc_abs"></bg-wrap>
      </div>
    </AllPop>

    <!-- //排行奖品 -->
    <AllPop :bg-image="homeImage['prize_' + isPrizeIndex]" :is-show="isPrizePop" @onClose="isPrizePop = false">
      <div class="cc_rela cc_abspic cc_column">
        <Kong height="660" />
        <!-- 立即领取 -->
        <bg-wrap :config="homeImage.lijilingqu_d" is-hove @onTap="openDrawPrize"></bg-wrap>
        <bg-wrap :config="
          homeImage[isPrizeIndex === 3 ? 'luck_text_1' : 'luck_text_4']
        " classCom="__luck_text cc_abs"></bg-wrap>
      </div>
    </AllPop>

    <!-- 加购弹窗 -->
    <AllPop :bg-image="homeImage.jiagoupop" :is-show="isAddGoodsPop" @onClose="isAddGoodsPop = false">
      <div class="__goods_pop_num cc_abs">
        （{{ add2cartitemcurNum }}/{{ add2cartitemmaxNeed }}）
      </div>
      <Kong height="360" />

      <div class="__goods_pop_list cc_space_bn_w" @scroll="scrollGoodsEvent">
        <div class="__goods_pop_item" v-for="(item, index) in addGoodsList" :key="index">
          <div class="__goods_img" @click="navGoodsDtial(item)">
            <img :src="item.img" class="cc_abspic" alt="" />
          </div>
          <Kong height="11" />
          <div class="__goods_name cc_slh cc_width">{{ item.name }}</div>
          <Kong height="23" />
          <div class="__goods_btn cc_slh cc_app750 cc_hove" :class="item.taskDone ? '__goods_btn' : '__goods_btn_a'"
            @click.stop="goAddGoods(item, index)">
            {{ item.taskDone ? "已完成" : "立即加购" }}
          </div>
        </div>
      </div>
      <bg-wrap classCom="cc_abs __goods_scroll_log" :config="homeImage.scorr_good" v-if="goodsScrollBottom"></bg-wrap>
    </AllPop>

    <!-- 活动规则 -->
    <AllPop :bg-image="homeImage.rulepop" :is-show="isRulePop" @onClose="isRulePop = false">
      <Kong height="120" />
      <div class="__rule_pop_text cc_rela">
        <div class="cc_abs"
          :style="`top:0;left:0.35rem; transform: translateY(-${ruleTextTransform}%);`">
          <Kong height="22" />
          <bg-wrap :config="homeImage.ruletext"></bg-wrap>
          <Kong height="22" />
        </div>
				
        <div class="cc_abs  cc_abspic" style="left:0.35rem;">
          <div class="cc_abspic __rule_pop_scroll_c" @scroll="scrollRuleEvent">
            <Kong height="22" />
            <bg-wrap :config="homeImage.ruletext"></bg-wrap>
            <Kong height="22" />
          </div>
        </div>

        <div class="__rule_pops_scroll_line cc_abs">
            <div class="cc_abs" :style="{top:`${ruleScrollTransform}%`}">

            </div>
        </div>

        <div class="__rule_pop_ter cc_width cc_abs"></div>
      </div>
      <bg-wrap :config="homeImage.chakangengduo"></bg-wrap>
    </AllPop>

    <Address ref="address" @navShopHome="navShopHome"></Address>
  </div>
</template>
<script>
import bgWrap from "../components/ui/bg-wrap.vue";
import Kong from "../components/ui/kong.vue";
import AllPop from "../components/AllPop.vue";
import Address from "../components/Address.vue";
import Task from "../components/task.vue";
import Draw from "../components/draw.vue";
import Kb from "../components/kb.vue";
import { homeImage } from "../image/index.js";
import { getApiData } from "../api";
import { Toast } from "vant";
import {
  getUrlQueryValueByKey,
  goToActive,
  goToShopPage,
  goToSkuPage,
} from "../../../../util/tools";
import store from "../../../../store/store";
import { callShare4MiniProgram } from "../../../../util/share";
import { doubleStr } from "../utils";
export default {
  components: {
    bgWrap,
    Kong,
    AllPop,
    Address,
    Task,
    Draw,
    Kb,
  },
  data() {
    return {
      goodsScrollBottom: true,
      homeImage,
      currentAssistIndex: null, //1您的好友邀请您 为TA助力,2首次入会 助力成功,3非首次入会 助力失败

      isNoLucklyPop: false, //未中奖弹窗

      isPrizePop: false, //排行奖品弹窗
      isPrizeIndex: 3,

      isLucklyPop: false, //中奖弹窗
      isLucklyIndex: 2,

      isAddGoodsPop: false, //加购
      isNoKBPop: false, //kb不足
      isNoAssistPop: false, //助力已满
      isNoTaskListPop: false, //暂无明细
      isShowTaskPop: false,
      isNoCakePop: false, //蛋糕不足
      isVipPop: false, //是否是会员弹窗
      isRulePop: false, //活动规则弹窗
      isOpenWebPop: false, //不是会员弹窗

      activityData: {}, //主接口数据
      myInfoData: {}, //获取用户信息
      addGoodsList: [], //加购商品列表

      ruleTextTransform: 0,
      ruleScrollTransform: 0,

      add2cartitemcurNum: 0,
      add2cartitemmaxNeed: 3,
      downTimeDatile: {
        dd: "00",
        hh: "00",
        mm: "00",
        ss: "00",
        text: [],
      }, //打榜倒计时
    };
  },
  computed: {
    currentAScore() {
      const score =
        (this.myInfoData.score && this.myInfoData.score + "") || "0";
      const l = score.length;
      const list = [];
      for (let i = 0; i < 5 - l; i++) {
        list.push(0);
      }
      return [...list, ...score.split("")];
    },
  },
  created() {
    Toast.setDefaultOptions({
      duration: 3000,
    });
  },
  mounted() {
    console.log(666);
    document.addEventListener("visibilitychange", this.handleVisiable);
    this.activityContent(); //主接口

  },
  destroyed() {
    document.removeEventListener("visibilitychange", this.handleVisiable);
    this.timer_1 && clearInterval(this.timer_1);
  },
  methods: {
    //处理事件前
    onHandleBefour(name, config = {}) {
      const { activityData } = this;
      if (activityData.openCardStatus === 2) {
        this.isVipPop = true;
        return true;
      }
      if (
        (name === "startGame" ||
          name === "openTaskPop" ||
          name === "startLuckly") &&
        activityData.isGameEnd
      ) {
        Toast("打榜已结束");
        return true;
      }
      return false;
    },
    // 主接口
    async activityContent() {
      //
      await getApiData("saveLog", { eleId: "pv", param: "" });
      getApiData("activityContent")
        .then(
          (r) => {
            console.log(r, "22");
            this.activityData = r;
            store.commit("setShareTitle", r.shareTitle);
            store.commit("setShareImage", r.shareImage);
            store.commit("setShareContent", r.shareContent);

            return getApiData("getMyInfo");
          },
          (f) => {
            console.log(f);
          }
        )
        .then(
          (r) => {
            console.log(r);
            this.myInfoData = { ...r };
            this.openFristPop();
            this.checkTask();
          },
          (f) => {
            console.log(f);
          }
        );
    },
    async checkTask() {
      const task = window.localStorage.getItem("doTask");
      console.log(task, "tasktasktasktasktasktasktasktask");
      if (!task) return;
      window.localStorage.removeItem("doTask");
      const newItem = JSON.parse(task);
      const newTime = new Date().getTime();
      const num = newItem.taskId === "scanlive" ? 20000 : 15000;
      const toastName = newItem.taskId === "scanlive" ? "观看直播" : "浏览店铺";
      const downTime = newTime - newItem.time >= num;
      if (downTime) {
        getApiData("doTask", { taskId: newItem.taskId }).then((r) => {
          if (r.chance) {
            Toast(toastName + "，游戏次数+" + r.chance);
            this.addGameNum(r.chance);
          }
        });
      } else {
        Toast(toastName + "未到" + parseInt(num / 1000) + "s");
      }
    },
    //打榜倒计时
    initDownTime(bool) {
      if (bool) return this.timer_1 && clearInterval(this.timer_1);
      const time = this.activityData.gameEndTime;
      this.timer_1 && clearInterval(this.timer_1);
      this.timer_1 = setInterval(() => {
        this.calculationTime(time)
      }, 1000);
      this.calculationTime(time)
    },
    calculationTime(time) {
      const newDate = new Date().getTime();
      const newValue = time - newDate < 0 ? 0 : time - newDate;
      if (newValue === 0) {
        this.activityData.isGameEnd = true;
        clearInterval(this.timer_1);
      } else {
        const Days = Math.floor(newValue / (1000 * 60 * 60 * 24));
        const Hour = Math.floor((newValue / (1000 * 60 * 60)) % 24);
        const Min = Math.floor((newValue / (1000 * 60)) % 60);
        const Sen = Math.floor((newValue / 1000) % 60);
        console.log(Days, Hour, Min, Sen);
        this.downTimeDatile.dd = doubleStr(Days);
        this.downTimeDatile.hh = doubleStr(Hour);
        this.downTimeDatile.mm = doubleStr(Min);
        this.downTimeDatile.ss = doubleStr(Sen);
        const { downTimeDatile } = this
        const text_1 = `${downTimeDatile.dd}天${downTimeDatile.hh}小时`
        const text_2 = `${downTimeDatile.hh}:${downTimeDatile.mm}:${downTimeDatile.ss}`

        const value = '距离打榜结束' + (downTimeDatile.dd >= 1 ? text_1 : text_2)
        this.downTimeDatile.text = value.split('')
      }
    },
    openFristPop() {
      const { openCardStatus, shareUser, first, helpStatus, helpMsg } =
        this.activityData;

      if (helpStatus === 1) {
        if (openCardStatus === 1 || openCardStatus === 3) {
          getApiData(
            "doTask",
            {
              taskId: "share2help",
              param:
                this.activityData.shareUser && this.activityData.shareUser.uid,
            },
            true
          ).then(
            (r) => {
              //显示助力成功弹窗
              this.currentAssistIndex = 2;
              getApiData("saveLog", {
                eleId: "share2help",
                param: "",
              });
            },
            (f) => {
              if (f.resp_code === 50012) {
                this.isNoAssistPop = true;
              } else {
                Toast(f.resp_msg);
              }
            }
          );
        } else if (openCardStatus === 2) {
          //显示助力弹窗
          this.currentAssistIndex = 1;
        } else {
          //非首次入会 助力失败
          this.currentAssistIndex = 3;
        }
        return;
      }
      //显示helpMsg
      if (helpStatus === 2) return Toast(helpMsg);
      // 助力已满
      if (helpStatus === 3) return (this.isNoAssistPop = true);

      const gopage = localStorage.getItem("gopage");
      if (gopage) {
        if (gopage === "task") this.openTaskPop(); //打开任务弹窗
        if (gopage === "draw") this.openDrawPop(); // 打开抽奖弹窗
        localStorage.removeItem("gopage");
        return;
      }

      if (helpStatus == 0) {
        // if (!first) return;
        if (openCardStatus === 2) {
          //开卡弹窗
          this.isVipPop = true;
        } else {
          //参与弹窗
          this.isOpenWebPop = true;
        }
      }
    },
    //打开k星榜单
    openLuckListPop() {
      console.log("k星榜单1ss23");
      this.$refs.kb.openPop();
    },
    //打开活动规则
    openRulePop() {
      // return
      console.log("活动规则5");
      this.isRulePop = true;
    },
    //打开任务弹窗
    openTaskPop(str) {
      if (this.onHandleBefour("openTaskPop")) return;
      if (str) this[str] = false;
      this.$refs.task.openPop();
    },
    //打开抽奖弹窗
    openDrawPop() {
      if (this.onHandleBefour("openDrawPop")) return;
      this.$refs.draw.openPop();
    },
    //前往游戏页
    startGame() {
      if (this.onHandleBefour("startGame")) return;
      // this.isNoCakePop = true
      if (this.myInfoData.chance === 0) {
        this.isNoCakePop = true;
        return;
      }
      goToActive("/interact-game/catchGift_kiehls/index.html")
      // goToActive("/interact-c-game-yunlu/catchGift_kiehls/index.html");
      getApiData("saveLog", { eleId: "go_game", param: "" });
    },

    //抽一次奖
    startLuckLyIng() {
      this.myInfoData.score -= 50;
    },
    //添加游戏次数
    addGameNum(num) {
      this.myInfoData.chance += num;
    },
    //关闭抽奖弹窗
    closeDrawPop() {
      this.isNoKBPop = false;
      this.$refs.draw.onClose();
    },
    //打开加购商品
    openAddGoods(item, index) {
      this.add2cartIndex = index;
      this.add2cartitem = item;
      this.add2cartitemcurNum = item.curNum;
      this.add2cartitemmaxNeed = item.maxNeed;
      console.log(item);
      getApiData("productList").then((r) => {
        console.log(r);
        this.addGoodsList = r;
        this.isAddGoodsPop = true;
      });
    },
    navGoodsDtial(item) {
      // console.log(item);
      goToSkuPage(item.skuId);
    },
    //加购商品
    goAddGoods(item, index) {
      if (this.add2cartitemcurNum >= this.add2cartitem.maxNeed)
        return Toast("加购商品已完成");
      const { add2cartitem, add2cartIndex } = this;
      console.log(item, add2cartitem, add2cartIndex);
      if (item.taskDone) return;
      getApiData("doTask", {
        taskId: add2cartitem.taskId,
        param: item.id,
      }).then((r) => {
        console.log(r, "87999");
        this.add2cartitemcurNum += 1;
        this.$set(this.addGoodsList[index], "taskDone", true);
        const chance = (r && r.chance) || "";
        // Toast.clear();
        if (chance) {
          // this.isAddGoodsPop = false
          this.$refs.task.handleData(add2cartitem, add2cartIndex, chance);
        } else {
          this.$refs.task.handleData(add2cartitem, add2cartIndex);
          Toast("加购成功");
        }
        setTimeout(() => {
          getApiData("saveLog", {
            eleId: add2cartitem.taskId,
            param: item.skuId,
          });
        }, 3000);
      });
    },
    //去店铺首页
    navShopHome() {
      goToShopPage(this.activityData.shopId);
    },
    //抽奖结果
    drawComponent(res) {
      const { pos } = res;
      if (pos === -1) {
        this.isNoLucklyPop = true;
        return;
      }
      this.isLucklyIndex = pos;
      this.isLucklyPop = true;
      this.currentLuckly = res.prize;
    },
    //再试一次
    aigneDraw() {
      this.isNoLucklyPop = false;
      // this.$refs.draw.startLuckly();
    },
    //打卡填写地址
    openAddress() {
      this.isLucklyPop = false;
      console.log(this.currentLuckly);
      // this.currentLuckly.addressId
      this.$refs.draw.openAddress(this.currentLuckly);
    },
    //去分享
    navGoShare() {
      const { activityData } = this;
      const cur_url = location.href;
      const shareUserId = getUrlQueryValueByKey("shareUserId", cur_url);
      const aUrl = cur_url.substring(0, cur_url.indexOf("shareUserId"));
      let url;
      if (!shareUserId) {
        url = cur_url + "&shareUserId=" + this.activityData.uid;
      } else {
        url = aUrl + "&shareUserId=" + this.activityData.uid; // location.href + data.data.shareUserId;
      }
      console.log(url);

      const title = activityData.shareTitle;
      const content = activityData.shareContent;
      const logoUrl = activityData.shareImage;
      const mpIconUrl = activityData.shareImage;

      const isHeader = false; //false 头部分享 true 按钮分享
      //   const url = invitionUrl;
      const shopid = store.state.shopId;
      const userpin = store.state.userPin;
      const jdactivityid = store.state.jdActivityId;
      // console.log({
      //   title,
      //   content,
      //   url,
      //   logoUrl,
      //   callBack: (callBack) => {
      //     console.log("测试分享");
      //   },
      //   isHeader,
      //   mpIconUrl,
      //   shopid,
      //   userpin,
      //   jdactivityid,
      // });
      callShare4MiniProgram(
        title,
        content,
        url,
        logoUrl,
        (callBack) => {
          console.log("测试分享");
        },
        isHeader,
        mpIconUrl,
        shopid,
        userpin,
        jdactivityid
      );
    },

    openPrizePop(e) {
      this.isPrizePop = true;
      this.isPrizeIndex = e.rewardImg;
    },
    //关闭kb
    openDrawPrize() {
      this.isPrizePop = false;
      getApiData("takeRankPrize").then(
        (r) => {
          Toast("领取成功");
          this.activityData.rankPrize.status = 0;
          this.$refs.kb.downPop();
          this.$refs.draw.openMyPrize();
        },
        (f) => {
          console.log(f);
        }
      );
    },
    // 开卡
    bankVipCard(bool) {
      //助力bool
      let url =
        "https://shopmember.m.jd.com/shopcard?venderId=1000376290&shopId=1000376290&venderType=1&channel=8017221";
      if (bool) {
        url =
          "https://shopmember.m.jd.com/shopcard?venderId=1000376290&shopId=1000376290&venderType=1&channel=8017224";
      }
      url += "&returnUrl=" + encodeURIComponent(location.href);
      goToActive(url);
    },
    toastConplent() {
      Toast("领取成功");
      this.isLucklyPop = false;
    },

    scrollGoodsEvent(e) {
      if (
        e.srcElement.scrollTop + e.srcElement.clientHeight ==
        e.srcElement.scrollHeight
      ) {
        this.goodsScrollBottom = false;
      } else {
        this.goodsScrollBottom = true;
      }
    },
    scrollRuleEvent(e) {

      this.ruleTextTransform = (e.srcElement.scrollTop / e.srcElement.scrollHeight)*100
      this.ruleScrollTransform =  e.srcElement.scrollTop /((e.srcElement.scrollHeight-e.srcElement.clientHeight)/(1-55/465.61))*100
    },

    handleVisiable(e) {
      //如果缓存中存在flag再执行判断visibilityState
      switch (e.target.visibilityState) {
        case "prerender":
          console.log("网页预渲染，内容不可见");
          break;
        case "hidden":
          // console.log('内容不可见，处理后台、最小化、锁屏状态')
          // alert('警告！你已经离开当前答题页面');
          break;
        case "visible":
          console.log("visible");
          if (window.taskCallback) {
            window.taskCallback();
            window.taskCallback = null;
          }
          // console.log('处于正常打开');
          break;
      }
    },
    //关闭中奖弹窗
    downPrizePop() {
      this.isLucklyPop = false;
      // setTimeout(() => {
      //   console.log(123546789);
      //   this.isLucklyPop = true
      // }, 1);
    },
  },
};
</script>
<style scoped>
@import url("../css/peterCss.css");

#peter-home-wrap {
  width: 100vw;
  height: 100vh;
  overflow: auto;
  overflow-x: hidden;
  position: relative;
}

.__home_page_p {
  width: 100vw;
  min-height: 16rem;
  height: calc(100vh + 1.7rem);
  background-size: 100%;
  background-repeat: no-repeat;
  background-color: #399ab6;
  position: absolute;
  top: -1.7rem;
}

.__logo {
  top: 2.69rem;
  left: 0.26rem;
}

.__right_btn {
  height: 1.06rem;
  top: 2.28rem;
  flex-flow: column;
  right: 0;
}

.__nav_draw {
  top: 13.22rem;
  right: 0.12rem;
}

.__k_coin_list {
  width: 1.9rem;
}

.__k_coin_item {
  width: 0.34rem;
  height: 0.44rem;
  background-color: #000000;
  color: #fff;
  line-height: 1;
  font-size: 0.34rem;
  border-radius: 0.09rem;
}

.__right_red_num {
  min-width: 0.36rem;
  height: 0.36rem;
  background-color: #ff4413;
  border-radius: 0.18rem;
  padding: 0 0.08rem;
  top: -0.1rem;
  left: 2.94rem;
  color: #fff;
  font-size: 0.22rem;
  line-height: 1;
}

.__rule_pop_text {
  height: 5.84rem;
  /* width: 4.96rem; */
  width: 100%;
  overflow:hidden;
}

.__rule_pop_ter {
  bottom: -0.02rem;
  height: 0.35rem;
  background: linear-gradient(#88ece100, #88ece1);
  z-index: 10;
}

.__goods_pop_list {
  width: 4.26rem;
  height: 3.2rem;
  overflow: auto;
  transform: scale(1.2);
}

.__goods_pop_num {
  line-height: 1;
  font-size: 0.3rem;
  color: #000000;
  left: 3.14rem;
  top: 2.48rem;
  font-weight: 600;
}

.__goods_pop_item {
  width: 1.99rem;
  font-size: 0.2rem;
  color: #000;
  margin-bottom: 0.24rem;
}

.__goods_name {
  text-align: center;
}

.__goods_img {
  width: 1.99rem;
  height: 1.99rem;
  background: #fff;
}

.__goods_btn {
  width: 1.96rem;
  height: 0.48rem;
  background-color: #399ab6;
  border-radius: 0.24rem;
  border-bottom: 0.01rem solid #399ab6;
  font-size: 0.28rem;
  color: #fff;
}

.__goods_btn_a {
  background-color: #e5ff56;
  color: #000000;
}

.__luck_text {
  bottom: -0.3rem;
  transform: translateY(100%);
}

.__goods_scroll_log {
  bottom: 0.25rem;
}

/* ::-webkit-scrollbar {
  display: block;
} */
.__rule_pop_scroll {
  width: 5.1rem;
  overflow-x: hidden;
  overflow-y: auto;
 
}

.__rule_pop_scroll_c {
  top: 0;
  left: 0;
  overflow: auto;
  opacity: 0;
}
.__rule_pops_scroll_line{
  top: 0.38rem;
  right: 0.15rem;
  background-color: #ececec;
  border-radius: 0.02rem;
  width: 0.05rem;
  height: 4.6461rem;
}
.__rule_pops_scroll_line>div{
  width: 100%;
  height: 0.55rem;
  background-color: #ff4d27;
  /* left: 0; */
}
</style>
