<template>
  <!-- <h-center-popup
    contentBgcolor="#053230"
    :modelValue="modelValue"
    @on-close="onClose"
  >
    <template #title>
      <h-img
        width=".8rem"
        style="margin-right: 0.2rem"
        src="turntable/qian.png"
      />
      Receba R$
      <span style="margin: 0 0.1rem">
        {{ formatDigit(taskNum) }}
      </span>
      de graça
    </template>
    <div class="draw-content flex-ct">
      <div class="top flex-ct">
        <h-img width="2rem" src="turntable/biao.png" />
        <span>SAQUE RAPIDO</span>
      </div>
      <Draw
        :number="drawNumber"
        @draw="onDraw"
        @finished="drawFinished"
        @no-number="onNumber"
      />
      <div class="bottom">Giros Grátis & Ganhar Dinheiro Real</div>
    </div>
  </h-center-popup> -->
  <van-overlay :z-index="1000" :show="modelValue" lock-scroll>
    <div class="draw-content flex-ct">
      <div class="title">
        <h-img type="local" src="zhuanpan/title.png" />
        <h-img
          type="local"
          class="close"
          src="zhuanpan/gb.png"
          @click="onClose"
        />
      </div>

      <Draw
        :number="drawNumber"
        @draw="onDraw"
        @finished="drawFinished"
        @no-number="onNumber"
      />
    </div>
  </van-overlay>

  <!-- 小转盘抽奖后 -->
  <h-center-popup
    contentBgcolor="#053230"
    v-model="showInfoVisible"
    :z-index="1000"
  >
    <template #title>
      <h-img
        width=".8rem"
        style="margin-right: 0.2rem"
        src="turntable/qian.png"
      />
      Receba R$
      <span style="margin: 0 0.1rem">
        {{ formatDigit(taskNum) }}
      </span>
      de graça
    </template>
    <div style="padding: 0 0 0.5rem 0">
      <div class="info flex-ct">
        <div class="bg"></div>
        <div class="more">
          <div class="top flex-ct">
            <h-img width="2rem" src="turntable/biao.png" />
            <span>SAQUE RAPIDO</span>
          </div>
          <div class="info-content flex-ct">
            <p class="blod">Parabéns pela sua boa sorte, você ganhou</p>
            <div class="flex-ct">
              <h-img width="1.2rem" src="turntable/qian.png" />
              <div class="qian flex-ct">
                <span>R$</span>
                <number-animation
                  :from="0.0"
                  :to="currentAmount"
                  :duration="1000"
                  :precision="2"
                />
              </div>
            </div>
            <div class="progress">
              <div
                class="blod"
                :style="{ paddingLeft: Number(speed) / 1.1 + '%' }"
              >
                {{ 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 style="color: #f3e615">{{ diff }}</span>
              </div>
            </div>
            <van-button color="#ba7a22" class="button" @click="next">
              Reivindique mais para sacar
            </van-button>
          </div>
        </div>
      </div>
      <div class="gundong">
        <div class="item" v-for="(item, index) in list" :key="index">
          <span>
            {{ fomartName(item.nickname) }}
          </span>
          <span> acabou de sacar</span>
          <span class="flex-ct">
            <span style="color: #f3e615; padding-right: 0.1rem"> +200 </span>
            <h-img width=".6rem" height=".6rem" src="base/jinbi.png" />
          </span>
        </div>
      </div>
    </div>
  </h-center-popup>
</template>

<script setup lang="ts">
import { ref, computed, watchEffect } from "vue";
import Draw from "../draw/index.vue";
import { formatDigit, fomartName } from "@/utils";
import { useRouter } from "vue-router";
import { useBaseStore } from "@/stores/modules/base";
import { decimalNumber } from "@/utils";
import { toast } from "@/utils/toast";
import storage, { actions } from "@/utils/storage";
import { prizeValue } from "../utils";

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

const emit = defineEmits(["update:modelValue"]);
const props = defineProps({
  modelValue: { type: Boolean, default: false, required: true },
});

const showInfoVisible = ref(false);
const drawNumber = ref(0);
const token = computed(() => storage.getStorage(actions.USER_TOEKN));

watchEffect(() => {
  if (!token.value) {
    drawNumber.value = 1;
  } else if (baseStore.turntableConfig.helpTurntable2Count) {
    drawNumber.value = 1;
  } else {
    drawNumber.value = 0;
  }
});

const onNumber = () => {
  toast("No lucky draw times!");
};

const onClose = () => {
  emit("update:modelValue");
  storage.setSessionStorage(actions.DRAW_POPUP, 1);
};

// 获取我的任务
const myTask = computed(() => {
  return baseStore.turntableConfig.helpTurntable2TaskList?.rows[0];
});

// 任务目标
const task = computed(() => {
  if (baseStore.turntableConfig.helpTurntable2List) {
    if (myTask.value) {
      return baseStore.turntableConfig.helpTurntable2List.find(
        (i: any) => i._id == myTask.value.rewardId
      );
    }
    return baseStore.turntableConfig.helpTurntable2List.find(
      (i: any) => i.awardType == 1
    );
  }
});
// 任务金额目标
const taskNum = computed(() => {
  if (task.value) {
    return decimalNumber(task.value.propsList[0].num, 10000, "div");
  }
});
// 金额差
const diff = computed(() => {
  // console.log(taskNum.value, currentAmount.value, "diff");
  return decimalNumber(taskNum.value, currentAmount.value, "sub");
});

// 当前金额
const currentAmount = computed(() => {
  if (task.value) {
    const taskNum = decimalNumber(task.value.propsList[0].num, 10000, "div");
    const myTaskNum = decimalNumber(myTask.value.taskProgress, 10000, "div");
    // console.log(taskNum, myTaskNum, "currentAmount");
    return decimalNumber(taskNum, myTaskNum, "mul");
  }
  return 99.99;
});

const list = computed(() => {
  return baseStore.turntableConfig.helpTurntable2AwardRecord;
});

const setAmount = computed(() => {
  return (item: any) => {
    const info = baseStore.turntableConfig.helpTurntable2List.find(
      (i: any) => (i._id = item.rewardId)
    );
    console.log(info);
    return prizeValue(info);
  };
});

const onDraw = () => {
  drawNumber.value = 0;
};

const drawFinished = () => {
  setTimeout(() => {
    showInfoVisible.value = true;
    emit("update:modelValue");
  }, 1000);
};

const next = () => {
  router.push("/turntable");
};

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

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