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

<script setup lang="ts">
import { getCurrentInstance, onMounted, reactive, ref } from "vue";
import { EDataPerson, devListType } from "@/type/InPlantProducts";
import border2 from "@/components/borderBox/border2.vue";
import { useRouter } from "vue-router";
import { useI18n } from 'vue-i18n'
let {t} = useI18n();
// const { proxy } = getCurrentInstance() as any;
let props = defineProps<{
  title: string;
}>();
let devList = ref();

let refborder2 = ref();

const router = useRouter();

const listdata = reactive<devListType>({});
let severdata = reactive([]); //暂存
//弹窗显示与隐藏
let visible = ref(false);
//存储弹窗dom
let triggerRef = ref(null);
//弹窗文本
let tipcontent = ref(null);
const devlistSize = reactive({
  height: "0px",
  width: "0px",
});

const setData = (val: any) => {
  let data = [];
  val.forEach((res) => {
    data.push([
      res.index,
      res.label,
      res.name,
      res.belongTo,
      res.deviceStatus == "t" ? t('messages.onLine') : t('messages.offline'),
      res.progress + "%",
      res.deliveryDate,
    ]);
  });
  listdata.header = [
  t('messages.SerialNum'),
  t('messages.RackNum'),
  t('messages.DevName'),
  t('messages.ofLegion'),
  t('messages.DevStatus'),
  t('messages.DebugProgress'),
  t('messages.deliveryDay'),
  ];
  listdata.data = data;
  listdata.headerBGC = "#3469F3";
  listdata.oddRowBGC = "#100C2A";
  listdata.evenRowBGC = "#100C2A";
  listdata.rowNum = 10;
  listdata.waitTime = 3000;
  listdata.carousel = "page";
  listdata.hoverPause = true;
  listdata.align = [
    "center",
    "center",
    "center",
    "center",
    "center",
    "center",
    "center",
  ];
  listdata.columnWidth = [60, 130, 400, 100, 100];
  severdata = val;
  devList.value.updateRows(listdata.data, {
    headerBGC: "#00BAFF",
    oddRowBGC: "#100C2A",
    evenRowBGC: "#100C2A",
    hoverPause: true,
    waitTime: 3000,
    carousel: "page",
    rowNum: 10,
    align: [
      "center",
      "center",
      "center",
      "center",
      "center",
      "center",
      "center",
    ],
    columnWidth: [60, 130, 400, 100, 100],
  });
};

function setchartWH(width: any, height: any) {
  devlistSize.height = height - 40 + "px";
  devlistSize.width = width + "px";
  refborder2.value.resetWH();
}

const dvClick = (value) => {
  if (value.row) {
    severdata.forEach((res) => {
      if (res.index == value.row[0]) {
        router.push({
          name: "devItem",
          params: {
            id: res.id,
            label: res.label,
            name: res.name,
          },
        });
      }
    });
  }
};
/**
 * @函数功能: 鼠标移入组件方法
 * @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;
};
onMounted(() => {
  // setData();
});

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

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

.box {
  position: absolute;
  top: 10px;
}
h2 {
  color: #fff;
}
.dv-scroll-board :deep(.ceil) {
  font-size: 1.2rem;
}
.dv-scroll-board :deep(.header-item) {
  font-size: 1.2rem;
}
</style>
