<template>
  <div class="lottery">
    <div class="top flex-sb">
      <div class="left flex-ct">
        <h-img width="1.2rem" src="turntable/qian.png" />
        <div class="amount">
          <span>R$</span>
          <number-animation
            :from="0.0"
            :to="amount"
            :duration="1000"
            :precision="2"
            @finished="finished"
          />
        </div>
      </div>
      <div class="right flex-ct" @click="receive">
        <h-img width=".7rem" src="turntable/ixq.png" />
        <span v-if="speed == 100">SACAR</span>
        <span v-else>compartilhar</span>
      </div>
    </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" v-if="speed !== 100">
        Ainda e necessário <span style="color: #f3e615">{{ diff }}</span>
        para sacar para o PIX
      </div>
      <div v-else>Parabéns, você concluiu a tarefa do grande prêmio</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { decimalNumber } from "@/utils";
import socketApi from "@/socket/socketApi";
import { useBaseStore } from "@/stores/modules/base";
import { useUserStore } from "@/stores/modules/user";
import { closeLoading, showLoading, toast } from "@/utils/toast";
import { useRouter } from "vue-router";
import http from "@/https/index";

const router = useRouter();
const baseStore = useBaseStore();
const userStore = useUserStore();

const props = defineProps({
  myTask: { type: Object, default: {}, required: false },
  amount: { type: Number, default: 0, required: false },
  taskNum: { type: Number, default: 100, required: false },
  schedule: { type: String, default: "0%", required: false },
  speed: { type: Number, default: 0, required: false },
});
const emit = defineEmits(["lottery-finished", "share"]);

const finished = () => {
  emit("lottery-finished");
};

const receive = () => {
  if (props.speed !== 100) {
    emit("share");
    return;
  }
  showLoading();
  http.helpTurntableTaskAward({
    _id:props.myTask._id
  }).then(async (res: any) => {
    if (res.code !== 0) {
      toast(res.txt);
      console.log("领取失败", res);
      closeLoading();
      return;
    }
    await baseStore.getHelpTurntable();
    await baseStore.clearTurntableInfo();
    await userStore.getUserInfo();
    closeLoading();
    setTimeout(() => {
      router.replace("/");
    }, 300);
  });
};

const diff = computed(() => {
  return decimalNumber(props.taskNum, props.amount, "sub");
});
</script>

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