<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">
        <div class="sort" :style="{ backgroundImage: getSortBackground(item.sort) }">
          No.{{ item.sort }}
        </div>
        <div class="progress-name">{{ item.name }}</div>
        <div class="progress-bar-container">
          <div class="progress-bar-background"></div>
          <div class="progress-bar" :style="getBarStyle(item.sort, item.count)"></div>
        </div>
        <div class="progress-num">
          <span style="font-weight: bold; font-size: 16px">{{ item.count }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import rank1bg from '../../assets/images/bg/rank1_bg.png';
import rank2bg from '../../assets/images/bg/rank2_bg.png';
import rank3bg from '../../assets/images/bg/rank3_bg.png';
import rank4bg from '../../assets/images/bg/rank4_bg.png';

export default {
  data() {
    return {
      currentIndex: 0, // 控制滚动位置
      list: [
        {id: 1, sort: 1, name: '科技论文', count: 3693},
        {id: 2, sort: 2, name: '发明专利', count: 2791},
        {id: 3, sort: 3, name: '行业标准', count: 2635},
        {id: 4, sort: 4, name: '公司名称', count: 11187},
        {id: 5, sort: 5, name: '公司名称', count: 1672},
        {id: 6, sort: 6, name: '公司名称', count: 1573},
        {id: 7, sort: 7, name: '公司名称', count: 1274},
        {id: 8, sort: 8, name: '公司名称', count: 1085},
        {id: 9, sort: 9, name: '公司名称', count: 976},
        {id: 10, sort: 10, name: '公司名称', count: 901},
      ],
    };
  },
  computed: {
    // 让数据首尾循环，防止滚动到末尾出现空白
    loopedList() {
      if (this.list.length > 5) {
        return [
          ...this.list,
          ...this.list.slice(0, 5).map((item, index) => ({
            ...item,
            id: `${item.id}-extra-${index}`, // 生成唯一 key
          })),
        ];
      } else {
        return [
          ...this.list,
        ]
      }

    },
  },
  methods: {
    getSortBackground(sort) {
      if (sort === 1) return `url(${rank1bg})`;
      if (sort === 2) return `url(${rank2bg})`;
      if (sort === 3) return `url(${rank3bg})`;
      return `url(${rank4bg})`;
    },
    getBarStyle(sort, count) {
      const maxCount = Math.max(...this.list.map((item) => item.count));
      const width = (count / maxCount) * 100; // 计算比例
      const gradient =
          sort <= 3
              ? 'linear-gradient(270deg, #79D8FF 0%, #2C9AFF 100%)'   // 方案 A 举例
              : 'linear-gradient(270deg, #4CA4FF 0%, #1155CC 100%)';
      return {width: `${width}%`, background: gradient};
    },
    startAutoScroll() {
      this.interval = setInterval(() => {
        this.currentIndex++;

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

    }
  },
  beforeDestroy() {
    clearInterval(this.interval);
  },
};
</script>

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

.carousel-list {
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform 0.5s ease-in-out; /* 平滑滚动 */
}

.carousel-item {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  font-size: 16px;
  border-radius: 8px;
  color: white;
  height: 40px;
  width: 100%;
  gap: 20px;
}

.sort {
  position: relative;
  height: 30px;
  width: 50px;
  color: white;
  margin-top: 5px;
  align-items: center;
  text-align: center;
  display: flex;
  justify-content: center;
  margin-left: 10px;
}

.progress-name {
  position: relative;
  width: 70px;
  height: 30px;
  margin-top: 5px;
  line-height: 30px;
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.progress-num {
  height: 30px;
  margin-top: 5px;
  line-height: 30px;
}

.progress-bar-container {
  position: relative;
  width: 230px;
  height: 10px;
  background-color: #103258;
  border-radius: 5px;
  margin-top: 15px;
}

.progress-bar {
  position: absolute;
  height: 100%;
  border-radius: 5px;
}
</style>
