<template>
  <div class="notice flex-sb">
    <h-img width="1.5rem" src="turntable/biao.png" />
    <div class="logs flex-ct">
      <div class="log" v-for="(item, index) in logs" :key="index">
        <span>{{ fomartName(item.nickname) }} acabou de sacar </span>
        <span> R$ {{ setAmount(item) }}</span>
        <span>,</span>
      </div>
    </div>
  </div>
</template>

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

const logs = 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);
  };
});
</script>

<style lang="scss" scoped>
.notice {
  margin-bottom: 0.2rem;
  width: 100%;
  overflow: hidden;
  .logs {
    flex: 1;
    margin: 0 0.1rem;

    overflow: hidden;
    .log {
      white-space: nowrap;
      margin-left: 0.1rem;
      color: #21d1a5;
      font-size: 0.4rem;
      animation: myMove 30s linear infinite; // 重点，定义动画
      animation-fill-mode: forwards;
      span:nth-child(2) {
        color: $font-text1;
      }
    }
  }
}

@keyframes myMove {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-1000px);
  }
}
</style>
