<template>
  <div class="award-record" ref="listRef">
    <div class="item" v-for="(item, index) in list" :key="index">
      <span style="padding-right: 0.1rem">
        {{ fomartName(item.nickname) }}
      </span>
      <span> acabou de sacar</span>
      <span class="flex-ct">
        <span style="color: #f3e615; padding-right: 0.1rem">
          +{{ setAmount(item) }}
        </span>
        <h-img width=".6rem" height=".6rem" src="base/jinbi.png" />
      </span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { fomartName } from "@/utils";
import { ref, nextTick, onMounted } from "vue";
import { useBaseStore } from "@/stores/modules/base";
import { noticeValue } from "../utils";
const baseStore = useBaseStore();

const listRef = ref();
const infiniteScrollTimer = ref();

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)
    );
    return noticeValue(info);
  };
});

const infiniteScroll = () => {
  infiniteScrollTimer.value = setInterval(() => {
    if (listRef.value) {
      listRef.value.scrollTop++;
      if (listRef.value.scrollTop > listRef.value.scrollHeight / 2) {
        listRef.value.scrollTop = 0;
      }
    }
  }, 40);
};
onMounted(() => {
  nextTick(() => {
    infiniteScroll();
  });
});
</script>

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