<template>
  <div class="autoScrollTable">
    <el-table ref="table" :data="tableList" style="height: 100%" class="table">
      <el-table-column label="操作时间" prop="operTime" width="160" />
      <el-table-column label="操作人" prop="operName" show-overflow-tooltip />
      <el-table-column label="操作类型" prop="title" show-overflow-tooltip />
      <el-table-column label="操作行为" prop="remark" show-overflow-tooltip />
    </el-table>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
const { proxy } = getCurrentInstance();
const props = defineProps({
  tableData: {
    type: Array,
    default: () => [],
  },
});
const tableList = ref(JSON.parse(JSON.stringify(props.tableData)));
let elScrollbarWrap = null;
let req = null;
const tableScroll = ref(true);

const autoScrollUp = () => {
  const tr = elScrollbarWrap.querySelector('.el-table__body .el-table__row');
  if (!tr) return;
  if (elScrollbarWrap.offsetHeight > tr.offsetHeight * (tableList.value.length - 1)) return;
  elScrollbarWrap.addEventListener('mouseover', onMouseover);
  elScrollbarWrap.addEventListener('mouseout', onMouseout);
  const render = () => {
    if (tableScroll.value) {
      if (elScrollbarWrap.scrollTop >= tr.offsetHeight) {
        const item = tableList.value.shift();
        tableList.value.push(item);
        elScrollbarWrap.scrollTop -= tr.offsetHeight;
      }
      elScrollbarWrap.scrollTop += 1;
    }
  };
  render();
  req = window.setInterval(render, 30);
};

const onMouseover = () => {
  tableScroll.value = false;
  elScrollbarWrap.style.overflow = 'hidden';
};

const onMouseout = () => {
  tableScroll.value = true;
  elScrollbarWrap.style.overflow = 'auto';
};

onMounted(() => {
  elScrollbarWrap = proxy.$refs.table.$refs.bodyWrapper.querySelector('.el-table__body-wrapper .el-scrollbar__wrap');
  setTimeout(() => {
    autoScrollUp();
  }, 500);
});

onBeforeUnmount(() => {
  elScrollbarWrap.removeEventListener('mouseover', onMouseover);
  elScrollbarWrap.removeEventListener('mouseout', onMouseout);
  window.clearInterval(req);
});
</script>

<style lang="scss" scoped>
.autoScrollTable {
  height: 100%;
  :deep(.table) {
    .el-table__body-wrapper {
      .el-scrollbar__bar {
        display: none;
      }
    }
  }
}
</style>