<template>
  <div
    class="message-list"
    @mouseenter="pauseScroll"
    @mouseleave="resumeScroll"
    data-testid="message-list-container"
  >
    <div class="message-wrapper" ref="messageWrapper" data-testid="message-wrapper">
      <div
        class="message-item"
        v-for="(message, index) in extendedList"
        :key="index"
        :data-testid="`message-item-${index}`"
      >
        <span class="time">{{ message.date }}</span>
        <div class="content" data-testid="message-content">
          <span class="title">{{ message.dusterName }}</span
          >{{ message.message }}
        </div>
      </div>
    </div>
  </div>
</template>

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

const props = defineProps({
  msgList: {
    type: Array,
    default: () => [],
  },
});

const extendedList = ref([]);
const messageWrapper = ref(null);
const itemHeight = 34; // 一条消息高度
const scrollInterval = 3000; // 每 2 秒滚动一次
let timer = null;
let isPaused = false;

// 滚动逻辑：每 2 秒滚动一条（50px）
const startScroll = () => {
  stopScroll();
  const wrapper = messageWrapper.value;
  if (!wrapper) return;

  timer = setInterval(() => {
    if (isPaused) return;

    const currentTop =
      parseInt(
        wrapper.style.transform.replace("translateY(", "").replace("px)", "")
      ) || 0;
    const nextTop = currentTop - itemHeight;

    wrapper.style.transition = "transform 0.5s";
    wrapper.style.transform = `translateY(${nextTop}px)`;

    const listHeight = (extendedList.value.length / 2) * itemHeight;
    if (Math.abs(nextTop) >= listHeight) {
      // 到底了，重置
      setTimeout(() => {
        wrapper.style.transition = "none";
        wrapper.style.transform = "translateY(0)";
      }, 500); // 等待动画完成后重置
    }
  }, scrollInterval);
};

const stopScroll = () => {
  if (timer) {
    clearInterval(timer);
    timer = null;
  }
};

const pauseScroll = () => {
  isPaused = true;
};
const resumeScroll = () => {
  isPaused = false;
};

// 数据更新时刷新滚动状态
const updateScroll = () => {
  stopScroll();
  if (props.msgList.length < 5) {
    extendedList.value = [...props.msgList];
    nextTick(() => {
      if (messageWrapper.value) {
        messageWrapper.value.style.transform = "translateY(0)";
        messageWrapper.value.style.transition = "none";
      }
    });
  } else {
    extendedList.value = [...props.msgList, ...props.msgList]; // 实现无缝滚动
    nextTick(() => {
      if (messageWrapper.value) {
        messageWrapper.value.style.transform = "translateY(0)";
        messageWrapper.value.style.transition = "none";
      }
      startScroll();
    });
  }
};

// 生命周期钩子
onMounted(() => {
  updateScroll();
});
onBeforeUnmount(() => {
  stopScroll();
});

watch(
  () => props.msgList,
  () => {
    updateScroll();
  },
  { deep: true }
);
</script>

<style scoped>
.message-list {
  position: relative;
  overflow: hidden;
  max-height: 170px; /* 7条 * 50px */
  width: 100%;
  height: calc(100% - 22px);
}
.message-wrapper {
  width: 100%;
}
.message-item {
  display: flex;
  align-items: center;
  font-size: 14px;
  height: 32px;
  line-height: 32px;
  padding: 1px 0;
  max-width: 100%;
  cursor: pointer;
}
.message-item:hover {
  background: #000000;
}
.message-item .time {
  color: #CCC;
  margin-right: 5px;
  min-width: 80px;
  flex-shrink: 0;
}
.message-item .title {
  margin-right: 5px;
  color: #8d8d8d;
  font-weight: bold;
}
.message-item .content {
  flex: 1;
  color: #CCC;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
