<template>
    <div class="hc-datav-table-main hc-full">
        <el-table ref="tableRef" class="top-table tablebox" :data="tableData" border @mouseover="clearScroll" @mouseleave="createScroll">
            <el-table-column prop="key1" label="项目阶段" align="center" />
            <el-table-column prop="key2" label="项目类型" align="center" />
            <el-table-column prop="key3" label="计划总投资" align="center">
                <template #default="scope">
                    <span style="color: #06A3FF;" class="font-bold">{{ scope.row.key3 }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="key4" label="实际已投资" align="center">
                <template #default="scope">
                    <span style="color: #10C90F;" class="font-bold">{{ scope.row.key4 }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="key5" label="未完成投资" align="center">
                <template #default="scope">
                    <span style="color: #D7A70D;" class="font-bold">{{ scope.row.key5 }}</span>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup>
import { onMounted, onUnmounted, ref, watch } from 'vue'

//参数
const props = defineProps({
    datas: {
        type: Array,
        default: () => ([]),
    },
})

//监听
const tableData = ref(props.datas)
watch(() => props.datas, (val) => {
    tableData.value = val
}, { deep: true })

let timer = null
const tableRef = ref(null)

const clearScroll = () => {
    clearInterval(timer)
    timer = null
}
const createScroll = () => {
    clearScroll()
    // 拿到 table
    const table = tableRef.value.layout.table.refs
    // 拿到可以滚动的元素
    const wrapper = table.bodyWrapper.firstElementChild.firstElementChild

    timer = setInterval(() => {
        wrapper.scrollTop += 1
        // 判断是否滚动到底部，如果到底部了置为0（可视高度 + 距离顶部 = 整个高度）
        if (wrapper.clientHeight + wrapper.scrollTop === wrapper.scrollHeight) {
            wrapper.scrollTop = 0
        }
    }, 50)
}

onMounted(() => {
    createScroll()
})
onUnmounted(() => {
    clearScroll()
})
</script>
