<template>
  <el-table-v2
    ref="tableRef"
    :columns="columns"
    :data="tableData"
    :width="width"
    :height="height"
    :estimated-row-height="28"
    :header-height="28"
  />
</template>

<script setup lang="ts">
import {
      
       ref, watchEffect, nextTick } from 'vue';
export interface TableHeader {
      
      
  prop: string;
  label: string;
  width?: number;
}
interface Props {
      
      
  tableHeader: TableHeader[];
  tableData?: any;
}
const height = document.getElementsByClassName('content-slot')[0].clientHeight;
const width = document.getElementsByClassName('content-slot')[0].clientWidth;
const columns = ref([]);
watchEffect(() => {
      
      
  if (!props.tableData || props.tableData.length === 0) return;
  const generateColumns = (header: TableHeader[]) =>
    Array.from({
      
       length: header.length }).map((_, columnIndex) => ({
      
      
      ...props,
      key: `${ 
        header[columnIndex].prop}-${ 
        columnIndex}`,
      dataKey: header[columnIndex].prop,
      title: header[columnIndex].label,
      width: header[columnIndex].width || 150,
    }));
  columns.value = generateColumns(props.tableHeader);
  nextTick(() => {
      
      
    scroll();
  });
});

const props = defineProps<Props>();
const tableRef = ref(null);
// 自动滚动
const scroll = () => {
      
      
  let isScroll = true;
  const scrollWrapper = tableRef.value?.$el.querySelector('.el-vl__wrapper')
    .firstChild as HTMLElement;

  // 鼠标放上去，停止滚动；移开，继续滚动
  scrollWrapper.addEventListener('mouseover', () => {
      
      
    isScroll = false;
  });
  scrollWrapper.addEventListener('mouseout', () => {
      
      
    isScroll = true;
  });
  setInterval(() => {
      
      
    if (isScroll) {
      
      
      scrollWrapper.scrollTop += 1; // 设置滚动速度
      if (
        scrollWrapper.clientHeight + scrollWrapper.scrollTop ==
        scrollWrapper.scrollHeight
      ) {
      
      
        scrollWrapper.scrollTop = 0;
      }
    }
  }, 100);
};
</script>
<style lang="scss">
.el-table-v2 {
  --el-bg-color: transparent;

  .el-table-v2__header-row {
    border: none;
    background: #395696;
  }
  .el-table-v2__header-cell {
    font-size: 14px;
    color: #29f8ff;
    line-height: 30px;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
    font-weight: 500;
    border-color: transparent !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .el-table-v2__row-cell {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    border-color: transparent !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .el-table-v2__row {
    background-color: rgba(55, 79, 120, 0.39) !important;
    border: none;
    &:nth-child(even) {
      background-color: transparent !important;
    }
  }
  .el-table-v2__cell-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}