<template>
	<div ref="refContainer" class="table-container">
		<table ref="refTable">
			<thead>
				<tr>
					<th scope="col">序号</th>
					<th scope="col">工厂</th>
					<th scope="col">产量</th>
					<th scope="col">库存</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="(item, index) in data" :key="index">
					<td>{{ index + 1 }}</td>
					<td>{{ item.name }}</td>
					<td>{{ item.hobby }}</td>
					<td>{{ item.address }}</td>
				</tr>
			</tbody>
		</table>
	</div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';

const data = new Array(100).fill(0).map(() => ({ name: '工厂1', date: '711', hobby: '133', address: '0.333' }));
const refContainer = ref<HTMLTableElement | null>(null);
const refTable = ref<HTMLTableElement | null>(null);
const scrollSpeed = ref(1); // 滚动速度，可以根据需要调整
const scrollInterval = 16; // 滚动间隔，单位为毫秒

const scrollTable = () => {
	if (refTable.value != null && refContainer.value != null) {
		refContainer.value.scrollTop += scrollSpeed.value;
		if (
			refContainer.value.scrollTop + 1 >= refTable.value.clientHeight - refContainer.value.clientHeight ||
			refContainer.value.scrollTop <= 0
		) {
			scrollSpeed.value = -scrollSpeed.value;
		}
	}
};

onMounted(() => {
	// 开始滚动
	setInterval(scrollTable, scrollInterval);
});
</script>

<style lang="scss" scoped>
.table-container {
	position: relative;
	width: 100%;
	height: calc(100vh - 810px);
	margin: 15px 0 0 0;
	overflow: hidden;

	table {
		width: 100%;
		height: 100%;
		font-size: 15px;
		color: #fff;
	}

	thead {
		position: sticky;
		top: 0;
		background-color: #002134;
		z-index: 999;

		th {
			height: 30px;
			text-align: center;
		}
	}

	tbody {
		td,
		th {
			height: 30px;
			text-align: center;
		}

		tr:nth-child(2n) {
			background-color: #001a27;
		}
	}
}
</style>
