<template>
  <div class="scrolling-table-container">
    <el-table
      :data="visibleData"
      :height="tableHeight"
	  stripe
      style="width: 100%;background: transparent;"
      header-row-class-name="fixed-header"
      ref="scrollTable"
    >
	<el-table-column
	align='center'
	  prop="date"
	  label="告警任务"
	  width="100">
	</el-table-column>
	<el-table-column
	align='center'
	  prop="name"
	  label="告警内容"
	  width="90">
			  <template slot-scope="scope">
			             <span :class="[scope.row.name == '1'||scope.row.name == '5'? 'coa' : scope.row.name == '2'? 'cob':scope.row.name == '3'||scope.row.name == '4'? 'coc'  : '']"  >{{ statusFormat(scope.row.name,statusOptions)}}</span>
			    </template>
	</el-table-column>
	<el-table-column
	align='center'
	  prop="createTime"
	  label="告警时间">
	  <!-- <template slot-scope="scope">
	    <span>{{ parseTime(scope.row.createTime) }}</span>
	  </template> -->
	</el-table-column>

    </el-table>
  </div>
</template>

<script>
export default {
  name: 'ScrollingTable',
  props: {
    data: {
      type: Array,
      required: true,
      default: () => []
    },
	statusOptions:{
		type: Array,
		required: true,
		default: () => []
	},
    // columns: {
    //   type: Array,
    //   required: true,
    //   default: () => []
    // },
    rowHeight: {
      type: Number,
      default: 28 // ElementUI默认行高
    },
    visibleRows: {
      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,
      tableHeight: null,
    }
  },
  computed: {
    visibleData() {
      // 如果数据不足visibleRows条，直接显示所有数据
      if (this.data.length <= this.visibleRows) {
        return this.data
      }
      
      // 计算当前应该显示的数据范围
      let endIndex = this.currentIndex + this.visibleRows
      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.calculateTableHeight()
    // this.initScroll()
    // this.initRefresh()
    
    // 监听窗口变化重新计算高度
    window.addEventListener('resize', this.calculateTableHeight)
  },
  beforeDestroy() {
    this.clearTimers()
    window.removeEventListener('resize', this.calculateTableHeight)
  },
  methods: {
	  statusFormat(row, list) {
	    return this.selectDictLabel(list, row);
	  },
    calculateTableHeight() {
      // 计算表格高度 = 表头高度 + 可见行数 * 行高
      const headerHeight = 48 // ElementUI默认表头高度
      this.tableHeight = headerHeight + (this.visibleRows * this.rowHeight)
    },
    
    initScroll() {
      this.clearScrollTimer()
      
      // 如果数据不足visibleRows条，不需要滚动
      if (this.data.length <= this.visibleRows) {
        return
      }
      
      this.scrollTimer = setInterval(() => {
        this.scrollToNext()
      }, this.scrollInterval)
    },
    
    scrollToNext() {
      if (this.isScrolling) return
      
      this.isScrolling = true
      const tableBody = this.$refs.scrollTable.$el.querySelector('.el-table__body-wrapper')
      
      // 添加过渡效果
      tableBody.style.transition = 'transform 0.5s ease-in-out'
      tableBody.style.transform = `translateY(-${this.rowHeight}px)`
      
      // 动画结束后更新数据
      setTimeout(() => {
        tableBody.style.transition = 'none'
        tableBody.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()
    },
    visibleRows() {
      this.calculateTableHeight()
    }
  }
}
</script>

<style scoped lang="scss">
	.coa{color: #FFBB37;}
	.cob{color: #0096FF;}
	.coc{color: #00FFFF;}
::v-deep .el-table tr{background-color: transparent;color: #fff;}
::v-deep .el-table td{border:none;font-size: 14px;height: 28px;padding: 0;}
::v-deep .el-table .el-table__header-wrapper th{background-color: #011C39 !important;color: #fff;padding: 2px 0;height: 27px;box-sizing: border-box;font-size: 14px;border: none;z-index: 10;}
::v-deep .el-table__row--striped{background: rgba(185, 223, 250, 0.05) !important}
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell{background-color: transparent;}
::v-deep  .el-table .current-row > td {
  background-color: transparent !important; /* 或者你想要的颜色 */
}
::v-deep .el-table--enable-row-hover .el-table__body tr:hover{
	background-color: transparent !important; /* 或者你想要的颜色 */
}
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell{
	background-color: transparent !important; /* 或者你想要的颜色 */
}
::v-deep .el-table::before{height: 0;}
.scrolling-table-container {
  width: 100%;
  overflow: hidden;
}

/* 固定表头样式 */
.fixed-header {
  position: sticky;
  top: 0;
  z-index: 10;
  // background-color: #fff;
}

/* 表格滚动区域样式 */
.el-table__body-wrapper {
  overflow: hidden;
}
</style>