<!-- 今日工单 -->
<template>
    <div>
        <div class="title">昨日IPQC列表</div>
        <el-table height="300" :data="dataList" v-loading="loading" ref="tableRef" highlight-current-row @mouseover.native="clearScroll" @mouseleave.native="createScroll">
            <el-table-column prop="lineCode" label="产线" :show-overflow-tooltip="true" />
            <el-table-column prop="defectDesciption" label="描述" :show-overflow-tooltip="true" />
            <el-table-column prop="defectQuantity" label="数量" :show-overflow-tooltip="true" />
        </el-table>
    </div>
</template>

<script setup>
const { proxy } = getCurrentInstance()
import { getMoudle05 } from '@/api/smartScreen/QualityScreen/index.js'
const loading = ref(false)
const dataList = ref([])
function getList() {
    getMoudle05().then((res) => {
        const { code, data } = res
        if (code == 200) {
            dataList.value = data
        }
    })
}
// 查询
function handleQuery() {
    getList()
}
handleQuery()
// 自动获取数据
let timer1 = null
const clearSearchTimer = () => {
    clearInterval(timer1)
    timer1 = null
}
const createSearchTimer = () => {
    clearSearchTimer()
    timer1 = setInterval(() => {
        handleQuery()
    }, 1000 * 60 * 5)
}

// 自动滚动
let timer2 = null
let tableRef = ref(null)

const clearScroll = () => {
    clearInterval(timer2)
    timer2 = null
}
const createScroll = () => {
    clearScroll()
    // 拿到 table
    const _table = tableRef.value.layout.table.refs
    // // 拿到可以滚动的元素
    const tableWrapper = _table.bodyWrapper.firstElementChild.firstElementChild
    timer2 = setInterval(() => {
        tableWrapper.scrollTop += 1
        // 判断是否滚动到底部，如果到底部了置为0（可视高度+距离顶部=整个高度）
        if (tableWrapper.clientHeight + tableWrapper.scrollTop >= tableWrapper.scrollHeight) {
            tableWrapper.scrollTop = 0
        }
    }, 100)
}

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

<style scoped>
@import './table.css';
</style>
