<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";

import useStore from "@/store";
import { storeToRefs } from "pinia";
const { user } = storeToRefs(useStore());

const props = defineProps({});
const list = [1, 2, 3, 4, 5];
const timer = ref(null);
const offset = ref(0);

onMounted(async () => {
  timer.value = setInterval(() => {
    if (offset.value <= -100 * list.length) {
      offset.value = 100;
    } else {
      offset.value -= 0.2;
    }
  }, 10);
});
onBeforeUnmount(() => {
  clearInterval(timer.value);
});
</script>

<template>
  <view class="notice-bar">
    <image src="../static/announce.png" mode="heightFix" />
    <view>
      <view
        v-for="(item, index) in list"
        :key="item"
        :style="{
          transform: `translateX(${offset}%)`,
        }"
      >
        <image src="../static/user-icon.png" mode="widthFix" />
        <text class="truncate">{{ index + 1 }}毛毛丛</text>
        <text>成功晋升</text>
        <text>荣耀王者</text>
        <text>段位，从此横着走！</text>
      </view>
    </view>
    <image src="../static/enter.png" mode="widthFix" />
  </view>
</template>

<style scoped>
.notice-bar {
  margin-top: 10rpx;
  background: linear-gradient(180deg, #2f2d2b 0%, #252831 100%);
  border-radius: 25rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
}
.notice-bar > image:first-child {
  height: 100%;
}
.notice-bar > view {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.notice-bar > view > view {
  flex-shrink: 0;
  font-size: 24rpx;
  padding-left: 15rpx;
  color: #999;
  display: flex;
  align-items: center;
}
.notice-bar > view > view > image {
  width: 48rpx;
  height: 48rpx;
  margin-right: 10rpx;
  border-radius: 50%;
}
.notice-bar > view > view > text {
  word-break: keep-all;
  display: inline-block;
}
.notice-bar > view > view > text:nth-child(2) {
  color: #fff;
  width: 100rpx;
  display: block;
}
.notice-bar > view > view > text:nth-child(4) {
  color: #e7ba80;
}
.notice-bar > image:last-child {
  width: 30rpx;
  height: 30rpx;
  margin: 0 20rpx;
}
</style>
