<template>
  <div class="carousel-container">
    <div
        class="carousel-list"
        ref="carousel"
        :style="{ transform: `translateY(${-currentIndex * 40}px)` }"
    >
      <div v-for="(item, index) in loopedList" :key="item.id" class="carousel-item" :class="{ odd: index % 2 === 0 }"
      >
        <div class="item-rank">{{ item.rank }}</div>
        <div class="item-num-name">{{ item.name }}</div>
        <div class="item-num">{{ item.num2 }}</div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      currentIndex: 0, // 控制滚动位置
      list: [
        {id: 1, rank: '1', name: '一种基于区块链的车联网安全通信方法与系统', num2: 12},
        {id: 2, rank: '2', name: '一种面向智能制造的高效节能热交换设备及其控制方法', num2: 24},
        {id: 3, rank: '3', name: '一种多模式结合的深海无人潜航器姿态稳定装置与算法', num2: 53},
        {id: 4, rank: '4', name: '基于光谱融合分析的农作物病虫害快速诊断系统及装置', num2: 77},
        {id: 5, rank: '5', name: '面向智慧城市的多源异构数据实时融合处理平台的实现方法', num2: 12},
        {id: 6, rank: '6', name: '一种新型抗菌耐磨复合医用植入材料及其制备工艺', num2: 83},
        {id: 7, rank: '7', name: '一种利用风光互补的海上浮式绿色能源供给装置与方法', num2: 21},
        {id: 8, rank: '8', name: '一种高分辨率卫星影像的多尺度语义分割训练模型', num2: 99},
        {id: 9, rank: '9', name: '面向自动驾驶的激光雷达与毫米波融合环境感知算法系统', num2: 34},
        {id: 10, rank: '10', name: '一种可降解高强度柔性电子皮肤传感器的制备方法', num2: 51},
        {id: 11, rank: '11', name: '用于电池梯次利用的智能健康评估与剩余寿命预测平台', num2: 10},
        {id: 12, rank: '12', name: '一种基于量子点增强的高效率全彩微型显示器及制备工艺', num2: 99}
      ]
    };
  },
  computed: {
    // 让数据首尾循环，防止滚动到末尾出现空白
    loopedList() {
      if (this.list.length > 10) {
        return [
          ...this.list,
          ...this.list.slice(0, 10).map((item, index) => ({
            ...item,
            id: `${item.id}-extra-${index}`, // 生成唯一 key
          })),
        ];
      } else {
        return [
          ...this.list,
        ]
      }

    },
  },
  methods: {
    startAutoScroll() {
      this.interval = setInterval(() => {
        this.currentIndex++;

        // 监听 `currentIndex` 是否超出数据范围
        if (this.currentIndex >= this.list.length) {
          setTimeout(() => {
            this.currentIndex = 0; // 瞬间回到起点
          }, 500); // 过渡完成后再复位，防止闪烁
        }
      }, 3000);
    },
  },
  mounted() {
    if (this.list.length > 10) {
      this.startAutoScroll();
    }
  },
  beforeDestroy() {
    clearInterval(this.interval);
  },
};
</script>

<style scoped>
.carousel-container {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.carousel-list {
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform 0.5s ease-in-out;
}

.carousel-item {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 16px;
  height: 40px;
  width: calc(100% - 40px);
  margin-left: 20px;
  line-height: 40px;
  text-align: center;
  background: linear-gradient(
      270deg,
      #0D2847 0%,
      rgba(13, 40, 71, 0.21) 48%,
      #103258 100%
  );
  color: #CBE2FF;
  font-weight: bold;
}

.carousel-item.odd {
  background: none;
}

.item-rank {
  flex: 1;
}

.item-num {
  flex: 1;
}

.item-num-name {
  flex: 4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

</style>
