<!--
 * @FilePath: \wwwd:\code\screenFront\src\views\InPlantProducts\child\component\Details.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-02-16 11:51:32
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
-->
<template>
  <div :style="{ width: '95%', height: '100%' }">
    <border1 ref="refborder1" :title="t('messages.DevDetails')">
      <template v-slot>
        <!-- <div class="box">
            <h2>产品信息</h2>
            <p>{{ data }}</p>
        </div> -->
        <div class="devList-box" :style="{
              width: detailslistBoxSize.width,
              height: detailslistBoxSize.height,
            }">
          <dv-scroll-board
            ref="devList"
            :config="value"
            @click="dvClick"
            @mouseover="dvMouseover"
            @mouseend="dvmouseleave"
            :style="{
              width: detailslistSize.width,
              height: detailslistSize.height,
            }"
          />
        </div>
      </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 } from "vue";
import { gatewayType } from "@/type/InPlantProducts";
import border1 from "@/components/borderBox/border1.vue";
import { useI18n } from 'vue-i18n'
let {t} = useI18n();
let value = reactive({
  data: null,
  oddRowBGC: "",
  evenRowBGC: "",
  hoverPause: true,
  rowNum: 5,
  align: ["center"],
});
let refborder1 = ref();
let devList = ref();
//弹窗显示与隐藏
let visible = ref(false);
//存储弹窗dom
let triggerRef = ref(null);
//弹窗文本
let tipcontent = ref(null);
const detailslistSize = reactive({
  height: "0px",
  width: "0px",
});
const detailslistBoxSize = reactive({
  height: "0px",
  width: "0px",
});
onMounted(() => {
  initdata();
});

function setchartWH(width: any, height: any) {
  detailslistSize.height = height - 100 + "px";
  detailslistSize.width = width - 80 + "px";
  console.log(detailslistSize);
  
  detailslistBoxSize.height = height-50 + "px";
  detailslistBoxSize.width = width+ "px";
  refborder1.value.resetWH();
}
const initdata = () => {
  value = reactive({
    data: [
    ],
    oddRowBGC: "#1F223C",
    evenRowBGC: "#0B0F2A",
    hoverPause: true,
    rowNum: 5,
    columnWidth:[270,270],
    align: ["left", "left"],
  });
};

const setData = (data: any) => {
  if(data.length<5){
    let setdatanum=5-data.length
    
    for(let i=0;i<setdatanum;i++){
      data.push(['',''])
    }
  }
  value = reactive({
    data: data,
    oddRowBGC: "#1F223C",
    evenRowBGC: "#0B0F2A",
    hoverPause: true,
    rowNum: 5,
    columnWidth:[270,270],
    align: ["left", "left"],
  });
  devList.value.updateRows(value.data, {
    oddRowBGC: "#1F223C",
    evenRowBGC: "#0B0F2A",
    hoverPause: true,
    rowNum: 5,
    waitTime: 1000,
    columnWidth:[270,270],
    align: ["left", "left"],
  });
};
/**
 * @函数功能: 鼠标移入组件方法
 * @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;
};
const dvClick = (value) => {
  // console.log(value.row[0]);
  console.log(devList.value.dom);
};
defineExpose({
  setchartWH,
  setData,
});
</script>

<style scoped>
h2 {
  color: #fff;
  text-align: left;
  margin-top: 3px;
  margin-left: 3px;
}
p {
  margin: 0 10px 0 10px;
  color: #fff;
  font-size: 20px;
}
.box {
  width: 100%;
  height: 100%;
}
.dv-scroll-board :deep(.ceil) {
  /* white-space: pre-wrap;
  overflow: visible; */
  font-size: 1.2rem;
  padding: 0 50px 0 50px;
}
.devList-box{
    display: flex;
    justify-content: center;
    align-items: center;
}
/* .dv-scroll-board :deep(.row-item) {
  line-height: normal !important;
  align-items: center;
} */
/* .dv-scroll-board :deep(.row-item) {
    margin:0px 50px 0px 50px
} */
</style>
