<template>
  <div class="page">
    <Nav :back="handleBack" :task-num="taskNum" />
    <div class="page-body">
      <notice />
      <Lottery
        :my-task="myTask"
        :task-num="taskNum"
        :amount="currentAmount"
        :schedule="schedule"
        :speed="speed"
        @lottery-finished="lotteryFindished"
        @share="showShareBoxVisible = true"
      />
      <div class="flex-ct content-draw">
        <div class="help" v-show="baseStore.helpList.length">
          <span>{{ baseStore.helpList[0]?.nickname }}</span>
          <span style="padding: 0 0.1rem">acabou de ajuda-lo a ganhar</span>
          <span class="flex-ct">
            <h-img
              width="0.5rem"
              style="margin: 0 0.1rem"
              src="base/JB_R$.png"
            />
            {{ baseStore.helpList[0]?.help2Progress / 100 }}
          </span>
        </div>
        <div class="dx">
          <img :src="getAssets('zhuanpan/dx.png')" />
        </div>
        <Draw
          ref="drawRef"
          :speed="speed"
          :number="drawNumber"
          @draw="onDraw"
          @no-number="showShareVisible = true"
          @finished="drawFinished"
        />
        <!-- 倒计时 -->
        <span>
          Expira em
          <span style="color: #f3e615" class="time" ref="timeRef"></span>
        </span>
      </div>
      <!-- 分享 -->
      <share v-model="showShareVisible" />
      <div class="other">
        <Tabs v-model="current" />
        <award-record v-if="current == 0" />
        <help-list :my-task="myTask" v-if="current == 1" />
      </div>
      <div class="draw-rules">
        <div class="title">Regras</div>
        <rules />
      </div>
    </div>
    <!-- 没有抽奖次数分享 -->
    <h-center-popup
      v-model="showShareBackVisible"
      title="Em breve poderá sacar"
      contentBgcolor="#053230"
      @on-close="backTip = 1"
    >
      <div class="container">
        <p>{{ nickName }} Você é tão sortudo!</p>
        <p class="tips">Convide ammigos para ajudar com saques</p>
        <div class="content">
          <div class="flex-ct money">
            <h-img width="1.5rem" src="turntable/qian.png" />
            <span class="flex-ct">
              R$&nbsp;
              <number-animation
                :from="0.0"
                :to="currentAmount"
                :duration="1000"
                :precision="2"
              />
            </span>
          </div>
          <div class="progress">
            <div
              class="blod"
              :style="{ paddingLeft: Number(speed) / 1.2 + '%' }"
            >
              {{ Number(speed).toFixed(2) + "%" }}
            </div>
            <div class="bar">
              <div class="line" :style="{ width: schedule }"></div>
            </div>
            <div class="tips blod">
              Ainda e necessário <span>{{ diff }}</span> para sacar para o PIX
            </div>
          </div>
        </div>
        <van-button
          size="large"
          color="#1a795b"
          @click="
            beforeBack();
            showShareVisible = true;
          "
        >
          Compartilhe com amigos
        </van-button>
        <p @click="beforeBack">
          Desista do saque de
          <span style="color: #f3e615">{{ currentAmount }}</span>
          BRL
        </p>
      </div>
    </h-center-popup>
    <!-- 点击分享展示 -->
    <h-center-popup
      v-model="showShareBoxVisible"
      title="Em breve poderá sacar"
      contentBgcolor="#053230"
    >
      <div class="container">
        <p class="tips">Total de dinheiro a ser pago em breve</p>
        <div class="flex-ct money">
          <h-img width="1.5rem" src="turntable/qian.png" />
          <span class="flex-ct">
            R$&nbsp;
            <number-animation
              :from="0.0"
              :to="currentAmount"
              :duration="1000"
              :precision="2"
            />
          </span>
        </div>
        <div class="blocks">
          <div class="flex-sb">
            <span>Conta de saque </span>
            <span>{{ userStore.userInfo.uid }} </span>
          </div>
          <div class="flex-sb">
            <span>Formas de Pagamentos</span>
            <span>PIX</span>
          </div>
        </div>
        <div class="content" style="padding: 0.1rem">
          <van-steps
            direction="vertical"
            :active="1"
            active-color="#44997a"
            inactive-color="#79807f"
          >
            <van-step>O pedido de pagamento foi submetido</van-step>
            <van-step>
              Ainda e necessario {{ diff }} para sacar para o PIX
            </van-step>
            <van-step>200 BRL serão pagos na sua conta PIX</van-step>
          </van-steps>
        </div>
        <van-button
          size="large"
          color="#1a795b"
          @click="
            showShareBoxVisible = false;
            showShareVisible = true;
          "
        >
          Convide ammigos para ajudar com
        </van-button>
      </div>
    </h-center-popup>
  </div>
</template>

<script setup lang="ts">
import Nav from "./nav/index.vue";
import Tabs from "./tabs/index.vue";
import Notice from "./notice/index.vue";
import Lottery from "./lottery/index.vue";
import Draw from "./draw/index.vue";
import Share from "./share/index.vue";
import AwardRecord from "./award-record/index.vue";
import HelpList from "./helpList/index.vue";
import Rules from "./rules/index.vue";
import {
  ref,
  computed,
  onBeforeMount,
  onUnmounted,
  nextTick,
  watchEffect,
} from "vue";
import { getCurrentTime, toTimeStamp, fomartName, getAssets } from "@/utils";
import { useBaseStore } from "@/stores/modules/base";
import { useUserStore } from "@/stores/modules/user";
import router from "@/router";
import { decimalNumber } from "@/utils";
import storage, { actions } from "@/utils/storage";

const baseStore = useBaseStore();
const userStore = useUserStore();
// tab
const current = ref(0);
// 旋转次数
const drawNumber = ref(0);
const timeRef = ref();
const drawRef = ref();
// 分享活动
const showShareVisible = ref(false);
// 分享活动2
const showShareBoxVisible = ref(false);
// 邀请好友
const showShareBackVisible = ref(false);
// 返回点击步数
const backTip = ref(0);
// 倒计时
const countDownNum = ref();
// 当前金额
const currentAmount = ref(0);

// 是否有任务
const hasTask = computed(() => {
  if (
    baseStore.turntableConfig &&
    baseStore.turntableConfig.helpTurntable2TaskList &&
    baseStore.turntableConfig.helpTurntable2TaskList.rows.length
  ) {
    return true;
  }
  return false;
});
// 获取我的任务
const myTask = computed(() => {
  if (hasTask.value) {
    return baseStore.turntableConfig.helpTurntable2TaskList?.rows[0];
  }
  return {};
});

// 进度
const schedule = computed(() => {
  return myTask.value.taskProgress / 100 + "%";
});
// 进度
const speed = computed(() => {
  return myTask.value.taskProgress / 100;
});

// 任务目标
const task = computed(() => {
  if (Object.keys(myTask.value).length) {
    return baseStore.turntableConfig.helpTurntable2List.find(
      (i: any) => i._id == myTask.value.rewardId
    );
  }
});
// 任务金额目标
const taskNum = computed(() => {
  if (task.value) {
    return task.value.propsList[0].num / 10000;
  }
  return 99.99;
});

// 活动过期时间
const expireTime = computed(() => {
  if (hasTask.value) {
    return toTimeStamp(
      baseStore.turntableConfig.helpTurntable2TaskList.rows[0].expireTime
    );
  }
  return 0;
});

const diff = computed(() => {
  return decimalNumber(taskNum.value, currentAmount.value, "sub");
});

const nickName = computed(() => {
  return unescape(userStore.userInfo.nickname);
});

// 旋转结束
const onDraw = () => {
  init();
};

const init = () => {
  drawNumber.value = baseStore.turntableConfig.helpTurntable2Count;
};

const drawFinished = () => {
  let p = myTask.value.taskProgress / 10000;
  currentAmount.value = decimalNumber(taskNum.value, p, "mul");
};

const lotteryFindished = () => {
  drawRef.value.setShow(true);
};

// 倒计时执行函数
const countdown = () => {
  clearInterval(countDownNum.value);
  countDownNum.value = null;
  const time = getCurrentTime();
  var d, h, m, s;
  var lastTime = Number(expireTime.value) - time;
  if (lastTime && timeRef.value) {
    countDownNum.value = setInterval(() => {
      lastTime--;
      d = Math.floor(lastTime / 60 / 60 / 24);
      h = Math.floor(lastTime / 60 / 60) % 24;
      m = Math.floor((lastTime / 60) % 60);
      s = lastTime % 60;
      s = s < 10 ? "0" + s : s;
      m = m < 10 ? "0" + m : m;
      timeRef.value.innerHTML = d + "day " + h + ":" + m + ":" + s;
      if (d == 0 && h == 0 && m == 0 && s == 0) {
        clearInterval(countDownNum.value);
        timeRef.value.innerHTML = "";
        countDownNum.value = null;
        router.replace("/");
      }
    }, 1000);
  }
};
// 自定义返回
const handleBack = () => {
  if (backTip.value == 1) {
    router.back();
    return;
  }
  showShareBackVisible.value = true;
};
// 返回函数
const beforeBack = () => {
  backTip.value = 1;
  showShareBackVisible.value = false;
};

watchEffect(() => {
  if (baseStore.refreshTurntable) {
    drawFinished();
  }
});

onBeforeMount(() => {
  if (!hasTask.value) {
    setTimeout(() => {
      router.replace("/");
      storage.setSessionStorage(actions.DRAW_POPUP, 0);
    }, 1000);
  } else {
    drawFinished();
    init();
    baseStore.refreshHelpList({
      _id: myTask.value._id,
      uid: userStore.userInfo.uid,
      pageIndex: 1,
      pageSize: 10,
    });
    nextTick(() => {
      countdown();
    });
  }
});

onUnmounted(() => {
  clearInterval(countDownNum.value);
  countDownNum.value = null;
});
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>
