<!--
 * @FilePath: \gitscreenFront\src\views\InPlantProducts\child\component\origin.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="refborder6" :title="title">
      <template v-slot>
        <!-- <div class="box">
            <h2>产品信息</h2>
            <p>{{ data }}</p>
        </div> -->
        <div class="devlistbox" >
          <dv-scroll-board
            ref="devList"
            :config="value"
            :style="{
              width: originlistSize.width,
              height: originlistSize.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,
  nextTick,
  onMounted,
  reactive,
  ref,
  watch,
} from "vue";
import { gatewayType } from "@/type/InPlantProducts";
import border6 from "@/components/borderBox/border6.vue";
import border1 from "@/components/borderBox/border1.vue";
import { useInPlantProductsStore } from "@/store/module/InPlantProducts";
import { useI18n } from 'vue-i18n'
let {t} = useI18n();
const store = useInPlantProductsStore();

let value = reactive({
  data: null,
  oddRowBGC: "",
  evenRowBGC: "",
  hoverPause: true,
  rowNum: 10,
  align: ["left", "left"],
  columnWidth: [300, 500],
});
let value2 = ref({
  data: null,
  oddRowBGC: "",
  evenRowBGC: "",
  hoverPause: true,
  rowNum: 10,
});
let refborder6 = ref();
let devList = ref();
//弹窗显示与隐藏
let visible = ref(false);
//存储弹窗dom
let triggerRef = ref(null);
//弹窗文本
let tipcontent = ref(null);
let title = ref("");
const originlistSize = reactive({
  height: "0px",
  width: "0px",
});
const originlistBoxSize = reactive({
  height: "0px",
  width: "0px",
});
onMounted(() => {
  initdata();
});

function setchartWH(width: any, height: any) {
  originlistSize.height = height + "px";
  originlistSize.width = width + "px";
  originlistBoxSize.height = height+ "px";
  originlistBoxSize.width = width + "px";
  refborder6.value.resetWH();
}
const initdata = () => {
  value = reactive({
    data: [
      [t('messages.RackNum'), ""],
      [t('messages.SupplierName'), ""],
      [t('messages.TradeType'), ""],
      [t('messages.ClientName'), ""],
      [t('messages.ClientSalesman'), ""],
      [t('messages.OrderNo'), ""],
      [t('messages.SoldDest'), ""],
      [t('messages.SoldDest_terminal'), ""],
      [t('messages.orderManufactureDate'), ""],
    ],
    // oddRowBGC:'#0A1446',
    // evenRowBGC:'',
    oddRowBGC: "#1F223C",
    evenRowBGC: "#0B0F2A",
    hoverPause: true,
    rowNum: 9,
    align: ["left"],
    columnWidth: [300, 500],
  });
};
/**
 * @函数功能: 鼠标移入组件方法
 * @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);
};
const setData = (data: any, datatitle: any) => {
  title.value = datatitle;
  value = {
    data: data,
    oddRowBGC: "#1F223C",
    evenRowBGC: "#0B0F2A",
    hoverPause: true,
    rowNum: data.length,
    align: ["left", "left"],
    columnWidth: [250],
  };
  //参数二，为需要修改的样式
  devList.value.updateRows(value.data, {
    oddRowBGC: value.oddRowBGC,
    evenRowBGC: value.evenRowBGC,
    hoverPause: value.hoverPause,
    rowNum: value.rowNum,
  });
};

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 30px 0 30px;
}
.devlistbox{
    display: flex;
    justify-content: center;
    align-items: center;
}
.dv-scroll-board :deep(.ceil) {
  white-space: pre-wrap;
    overflow: visible;
  font-size: 18px;
  padding: 0 50px 0 50px;
}
.dv-scroll-board :deep(.row-item) {
  line-height: normal !important;
    align-items: center;
  margin: 0px 30px 0px 30px;
}
.devlistbox {
  height: 880px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
