<!--
 * @FilePath: \wwwd:\code\screenFront\src\views\Offsite\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>
        <ZdScrollBoard
          ref="devList"
          :config="listdata"
          @mouseover="dvMouseover"
          @mouseend="dvmouseleave"
          @click="dvClick"
          :style="{
            width: devlistSize.width,
            height: devlistSize.height,
            marginTop: '40px',
          }"
        />
      </template>
    </border2>
    <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,
  nextTick,
  onMounted,
  reactive,
  ref,
  watch,
} from "vue";
import ZdScrollBoard from "@/components/data-view/index.vue";
import { EDataPerson, devListType } from "@/type/InPlantProducts";
import border2 from "@/components/borderBox/border2.vue";
import { useRouter } from "vue-router";
import { Offsite } from "@/store/module/offsite";
import { useI18n } from 'vue-i18n'
let {t} = useI18n();
// const { proxy } = getCurrentInstance() as any;
let props = defineProps<{
  title: string;
}>();

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();
let listenerTime = ref();
const router = useRouter();

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

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

  val.forEach((res) => {
    data.push([
      res.index,
      res.name,
      res.model,
      res.label,
      res.city,
      // res.unit,//单位
      res.deviceType,
      res.deviceStatus == "false" ? "否" : "是",
    ]);
  });
  listdata.header = [
  t('messages.SerialNum'),
  t('messages.DevName'),
  t('messages.model'),
    t('messages.RackNum'),
    t('messages.province'),
    t('messages.type'),
    t('messages.OnlineOrNot'),
  ];
  listdata.data = data;
  listdata.headerBGC = "#00BAFF";
  listdata.oddRowBGC = "#100C2A";
  listdata.evenRowBGC = "#100C2A";
  listdata.rowNum = data.length < 10 ? data.length : 10;
  listdata.waitTime = 3000;
  listdata.carousel = "page";
  listdata.hoverPause = true;
  listWH.width
    ? (listdata.columnWidth = [listWH.width * 0.1, listWH.width * 0.25,listWH.width * 0.15,listWH.width * 0.15,listWH.width * 0.1125])
    : (listdata.columnWidth = [80, 200, 120, 120, 90, 70]);

  listdata.align = [
    "center",
    "center",
    "center",
    "center",
    "center",
    "center",
    "center",
    "center",
    "center",
  ]
  listdata.wrap = [false, true, false, true, false, false, false, false, false  ]

    devList.value.updateRows(listdata.data, { ...listdata });
};

function setchartWH(width: any, height: any) {
  // devList.value.style.height = height + "px";
  // devList.value.style.width = width + "px";
  listWH.height = height;
  listWH.width = width;
  devlistSize.height = height - 40 + "px";
  devlistSize.width = width + "px";

  refborder2.value.resetWH();
}
/**
 * @函数功能: 鼠标移入组件方法
 * @param {*} value
 * @出口参数:
 * @函数备注:
 */
const dvMouseover = (value) => {
  if (value.toElement && value.toElement.innerHTML&&value.toElement.className.split(' ').includes('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]);
};
onMounted(() => {
  let a = document.getElementsByClassName("dv-scroll-board")[0];

  let itemRow = null;
  let cityarr = [];
  let newcity = null;
  //监听dom用于更改地图高亮
  a.addEventListener("DOMSubtreeModified", () => {
    if (listenerTime.value) {
      clearTimeout(listenerTime.value);
      listenerTime.value = null;
    }
    listenerTime.value = setTimeout(() => {
      let content = document.getElementsByClassName("content-left")[0];
      itemRow = content.getElementsByClassName("row-item");
      cityarr = [];
      if (itemRow.length > 10) {
        for (let i = 10; i <= 19; i++) {
          cityarr.push(itemRow[i].children[4].innerText);
        }
      } else {
        for (let i = 0; i < itemRow.length; i++) {
          cityarr.push(itemRow[i].children[4].innerText);
        }
      }
      newcity = [...new Set(cityarr)];

      Offsite().setcity(newcity);
    }, 500);
  });
});

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

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

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