<!--
 * @FilePath: \wwwd:\code\screenFront\src\views\InPlantProducts\child\component\RotationTable.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-02-16 15:09:06
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
-->
<template>
  <div
    class="marginbox"
    :style="{
      width: devlistSize.width + 'px',
      height: devlistSize.height + 'px',
    }"
  >
    <border1 ref="refborder2"  :title="'机器详细内容'">
      <template v-slot>
        <div class="box">
          <h2>{{ props.title }}</h2>
        </div>
        <dv-scroll-board
          ref="devList"
          :config="props.data.data"
          @click="dvClick"
          @mouseover="dvMouseover"
          @mouseend="dvmouseleave"
          :style="{
            width: devlistSize.width - 20 + 'px',
            height: devlistSize.height - 60 + 'px',
            marginTop: '40px',
          }"
        />
      </template>
    </border1>
    <el-tooltip
      v-model:visible="visible"
      :content="tipcontent"
      placement="top"
      effect="dark"
      trigger="click"
      virtual-triggering
      :virtual-ref="triggerRef"
    />
  </div>
</template>

<script setup lang="ts">
import { getCurrentInstance, onMounted, reactive, ref, watch } from "vue";
import { EDataPerson, devListType } from "@/type/InPlantProducts";
import border2 from "@/components/borderBox/border2.vue";
import border1 from "@/components/borderBox/border1.vue"
import { useRouter } from "vue-router";
import { Offsite } from "@/store/module/offsite";
// const { proxy } = getCurrentInstance() as any;
let props = defineProps<{
  title: string;
  data: any;
}>();

let devList = ref();
//弹窗显示与隐藏
let visible = ref(false);
//存储弹窗dom
let triggerRef = ref(null);
//弹窗文本
let tipcontent = ref(null);
// watch(()=>devList.value,(newVal, oldVal)=>{
//     //监听父组件宽高变化，随时重置本组件尺寸
//     console.log(newVal);

//   },{immediate:true,deep:true,flush:'post'})

let refborder2 = ref();
const router = useRouter();

const listdata = reactive<devListType>({});
const devlistSize = reactive({
  height: 0,
  width: 0,
});

// const setData = (val:any) => {
//   let data = [];

//   val.forEach((res) => {
//     data.push([
//       res.index,
//       res.name,
//       res.machineModel,
//       res.lable,
//       res.city,
//       res.unit,
//       res.isExhibition,
//       res.deviceType,
//       res.deviceStatus=='false'?"否":"是",
//     ]);
//   });
//     listdata.header=['序号','物品名称','型号','机架号','省份','单位','是否在展区','类型','是否在线']
//     listdata.data=data
//     listdata.headerBGC='#00BAFF'
//     listdata.oddRowBGC='#003B51'
//     listdata.evenRowBGC='#0A2732'
//     listdata.rowNum=data.length<10?data.length:10
//     listdata.waitTime=3000
//     listdata.carousel='page'
//     listdata.hoverPause=true
//     listdata.align=['center','center','center','center','center','center','center','center','center'],
//     devList.value.updateRows(listdata.data, {...listdata});

// };
const changeData = (val: any) => {
  devList.value.updateRows(val.data, { ...val });
};
/**
 * @函数功能: 鼠标移入组件方法
 * @param {*} value
 * @出口参数:
 * @函数备注:
 */
 const dvMouseover = (value) => {
  if (value.toElement && value.toElement.innerHTML&&value.toElement.className == 'ceil') {
    triggerRef.value = value.toElement;
    tipcontent.value = value.toElement.innerHTML;
    visible.value = true;
  }
};
/**
 * @函数功能:  鼠标移出组件方法
 * @出口参数:
 * @函数备注:
 */
 const dvmouseleave = () => {
  triggerRef.value = null;
  tipcontent.value = null;
  visible.value = false;
};
function setchartWH(width: any, height: any) {
  // devList.value.style.height = height + "px";
  // devList.value.style.width = width + "px";
  devlistSize.height = height;
  devlistSize.width = width;
  refborder2.value.resetWH();
}

const dvClick = (value) => {
  // console.log(value.row[0]);
  console.log(devList.value.dom);
};
onMounted(() => {});

// return{setchartWH}
defineExpose({
  setchartWH,
  changeData,
});
</script>

<style scoped>
.marginbox {
  position: relative;
}

.box {
  position: absolute;
  top: 10px;
}
h2 {
  color: #fff;
}
</style>
