<template>
  <div class="scrolling-data-container">
    <!-- 固定顶部 -->
    <div class="fixed-header">
      <h3>数据展示</h3>
    </div>
    
    <!-- 滚动数据区域 -->
    <div class="scrolling-data-wrapper" ref="scrollWrapper">
      <div 
        class="data-item" 
        v-for="(item, index) in visibleData" 
        :key="item.id"
        :style="{ height: itemHeight + 'px' }"
      >
        <el-card shadow="hover" class="data-card">
          <div class="item-content">
            <span class="item-title">{{ item.title }}</span>
            <span class="item-value">{{ item.value }}</span>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ScrollingData',
  props: {
    data: {
      type: Array,
      required: true
    },
    itemHeight: {
      type: Number,
      default: 28
    },
    visibleCount: {
      type: Number,
      default: 5
    },
    refreshInterval: {
      type: Number,
      default: 30000 // 30秒
    },
    scrollInterval: {
      type: Number,
      default: 3000 // 3秒滚动一次
    }
  },
  data() {
    return {
      currentIndex: 0,
      scrollTimer: null,
      refreshTimer: null,
      isScrolling: false
    }
  },
  computed: {
    visibleData() {
      // 如果数据不足5条，直接显示所有数据
      if (this.data.length <= this.visibleCount) {
        return this.data
      }
      
      // 计算当前应该显示的数据范围
      let endIndex = this.currentIndex + this.visibleCount
      if (endIndex > this.data.length) {
        // 如果超出数组长度，从开头补足
        return [
          ...this.data.slice(this.currentIndex),
          ...this.data.slice(0, endIndex - this.data.length)
        ]
      } else {
        return this.data.slice(this.currentIndex, endIndex)
      }
    }
  },
  mounted() {
    this.initScroll()
    this.initRefresh()
  },
  beforeDestroy() {
    this.clearTimers()
  },
  methods: {
    initScroll() {
      this.clearScrollTimer()
      
      // 如果数据不足5条，不需要滚动
      if (this.data.length <= this.visibleCount) {
        return
      }
      
      this.scrollTimer = setInterval(() => {
        this.scrollToNext()
      }, this.scrollInterval)
    },
    
    scrollToNext() {
      if (this.isScrolling) return
      
      this.isScrolling = true
      const wrapper = this.$refs.scrollWrapper
      
      // 添加过渡效果
      wrapper.style.transition = 'transform 0.5s ease-in-out'
      wrapper.style.transform = `translateY(-${this.itemHeight}px)`
      
      // 动画结束后更新数据
      setTimeout(() => {
        wrapper.style.transition = 'none'
        wrapper.style.transform = 'translateY(0)'
        
        // 更新当前索引
        this.currentIndex = (this.currentIndex + 1) % this.data.length
        
        // 强制重新渲染以确保DOM更新
        this.$nextTick(() => {
          this.isScrolling = false
        })
      }, 500)
    },
    
    initRefresh() {
      this.clearRefreshTimer()
      this.refreshTimer = setInterval(() => {
        this.$emit('refresh-data')
      }, this.refreshInterval)
    },
    
    clearScrollTimer() {
      if (this.scrollTimer) {
        clearInterval(this.scrollTimer)
        this.scrollTimer = null
      }
    },
    
    clearRefreshTimer() {
      if (this.refreshTimer) {
        clearInterval(this.refreshTimer)
        this.refreshTimer = null
      }
    },
    
    clearTimers() {
      this.clearScrollTimer()
      this.clearRefreshTimer()
    }
  },
  watch: {
    data() {
      // 数据更新时重置索引
      this.currentIndex = 0
      this.initScroll()
    }
  }
}
</script>

<style scoped>
.scrolling-data-container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

.fixed-header {
  padding: 15px;
  background-color: #f5f7fa;
  border-bottom: 1px solid #ebeef5;
  position: sticky;
  top: 0;
  z-index: 10;
}

.scrolling-data-wrapper {
  width: 100%;
}

.data-item {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
}

.data-card {
  width: 100%;
}

.item-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item-title {
  font-weight: bold;
}

.item-value {
  color: #409eff;
}
</style>