<!--
 * @FilePath: \code\gitscreenFront\src\views\Mechanics\components\scrollBoard.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-06-13 08:33:37
 * @Description: 
 * 
 * 版权信息         : 2023 by ${RAS}, All Rights Reserved.
-->
<template>
    <div class="box">

        <ZdScrollBoard ref="devList" @click="dvClick" :config="newConfig" @mouseover="dvMouseover"
            @mouseout="dvmouseleave" :style="{
                width: '100%',
                height: '100%',
            }" />
        <el-tooltip v-model:visible="visible" :content="tipcontent" effect="light" placement="top" trigger="click"
            popper-class="tooltip-class" virtual-triggering :virtual-ref="triggerRef" />

    </div>
</template>

<script setup lang='ts'>
import { getCurrentInstance, onMounted, reactive, ref, watch,computed } from "vue";
import ZdScrollBoard from "@/components/ZdScrollBoard/index.vue";
import { useRouter } from "vue-router"

const prop = defineProps({
    config: Object,
    data: <any>Array
})
let newConfig: any = computed(() => {
    return {
        ...prop.config,
        data: prop.data
    }
})
const router = useRouter()
const emit: any = defineEmits()
//弹窗文本
let tipcontent = ref(null)
//弹窗显示与隐藏
let visible = ref(false)
//存储弹窗dom
let triggerRef = ref(null)
let devList = ref(null)
/**
 * @函数功能: 鼠标移入组件方法
 * @param {*} value 
 * @出口参数: 
 * @函数备注: 
 */
const dvMouseover = (value) => {
    if (value.toElement && value.toElement.innerHTML && value.toElement.className == 'ceil') {        
        triggerRef.value = value.toElement
        tipcontent.value = value.toElement.innerText
        visible.value = true
    }

};
// watch(
//     () => prop.data,
//     (val) => {

//         devList.value.updateRows(val)

//     },
//     { deep: true, immediate: false }
// );


/**
 * 点击表格事件
 */
const dvClick = (value) => {

    if (value.row) {
        emit('dvclick', value)
    }

}
/**
 * @函数功能:  鼠标移出组件方法
 * @出口参数: 
 * @函数备注: 
 */
const dvmouseleave = () => {
    triggerRef.value = null
    tipcontent.value = null
    visible.value = false
};
</script>

<style scoped>
.box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.box-title {
    width: 100%;
    font-size: 20px;
    margin: 5px 0 10px 0;
    color: #fff;
    text-align: center;
    font-weight: bold;
}

.box-body {
    width: 100%;
    flex: 1;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

:deep(.dv-scroll-board .rows .ceil) {
    overflow: auto;
    white-space: pre-wrap;
    text-overflow: none
}

:deep(.dv-scroll-board .rows .row-item) {
    font-size: 16px;
}
</style>
<style>
.el-popper.tooltip-class {
    color: #fff !important;
}
</style>