<!--
 * @FilePath: \gitscreenFront\src\views\InPlantProducts\child\index.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-02-17 15:04:50
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
-->
<template>
  <div :class="$style['container']">
    <div class="header">
      <div class="title">
        <header1
          :width="size.oWidth*3"
          :height="100"
          :title="'67'"
        ></header1>
      </div>
    </div>

    <div class="content" ref="Acontent">
      <left :width="size.oWidth*2" :height="size.oHeight"></left>
      <right :width="size.oWidth" :height="size.oHeight"></right>
      <!-- <el-row>
        <el-col :span="24">
          <top :width="size.oWidth" :height="size.oHeight * 3"></top>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <bottom :width="size.oWidth" :height="size.oHeight"></bottom>
        </el-col>
      </el-row> -->
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, reactive, ref } from "vue";
import top from "./top.vue";
import bottom from "./bottom.vue";
import left from "./left.vue";
import right from "./right.vue";
import header1 from "./component/header1.vue";
import { calcWH } from "@/components/ts/selfAdaption";
// import { ElRow, ElCol } from "element-plus";
import { development, production } from "@/utils/devSever";
import { getDeviceSensorInfo, getDeviceInfo,getDeviceDetail } from "@/http/InPlantProducts";
import { useInPlantProductsStore } from "@/store/module/InPlantProducts";
import { useRoute } from "vue-router";
const route = useRoute();
const store = useInPlantProductsStore();
let Acontent = ref();
let time = ref(null);
//   let Timedom=ref()
//   let {timeHtml}=useNowTime()

let size = reactive({
  oWidth: 0,
  oHeight: 0,
});
function WH(div: HTMLElement) {
  let a = calcWH(div.offsetHeight, div.offsetWidth, 1, 3, 0);
  size.oWidth = a.oWidth;
  size.oHeight = a.oHeight;
}
//
// async function getDeviceSensorInfofun() {
//   let result: any = await getDeviceSensorInfo({ deviceId: route.params.id });
//   // let result:any = await getDeviceSensorInfo({deviceId:'459bc6d0-7af0-11ed-a6d1-63a979215ec8'})
//   //459bc6d0-7af0-11ed-a6d1-63a979215ec8
//   if (result.code == 200) {
//     let data = {};
//     result.data.forEach((res) => {
//       data[res.attributeName] = res.attributeValue;
//     });
//     //将处理好的数据存入pinia
//     store.$patch((state) => {
//       state.DeviceSensorinfo = data;
//     });
//   }
// }

// async function getDeviceInfofun() {
//   let result: any = await getDeviceInfo({ deviceId: route.params.id });
//   // let result:any = await getDeviceInfo({deviceId:'459bc6d0-7af0-11ed-a6d1-63a979215ec8'})
//   //459bc6d0-7af0-11ed-a6d1-63a979215ec8
//   if (result.code == 200) {
//     let data = {};
//     result.data.forEach((res) => {
//       data[res.attributeName] = res.attributeValue;
//       if (res.attributeName == "image") {
//         //按照环境更改src
//         if (process.env.NODE_ENV === "development") {
//           data[res.attributeName] = development.imgxhr + res.attributeValue;
//         } else if (process.env.NODE_ENV === "production") {
//           data[res.attributeName] = production.imgxhr + res.attributeValue; //正式环境+
//         }
//       }
//       if(res.attributeName=='rackNumber'){
//         store.changePublicData(res.attributeName,res.attributeValue)
//       }
//     });
//     //将处理好的数据存入pinia
//     store.$patch((state) => {
//       state.DeviceInfo = data;
//     });
//   }
// }

async function getDeviceDetailfun() {
  let result: any = await getDeviceDetail({ deviceId: route.params.id });
  // let result:any = await getDeviceSensorInfo({deviceId:'459bc6d0-7af0-11ed-a6d1-63a979215ec8'})
  //459bc6d0-7af0-11ed-a6d1-63a979215ec8
  if (result.code == 200) {
    store.setnewPageData(result.data)
  }
}
function getdata(){
  getDeviceDetailfun()
  let data=null
// setTimeout(() => {
//   data={
//     "LedList": [
//         {
//             "name": "剪刀回位",
//             "value": "${ScissorsReturn}"
//         },
//         {
//             "name": "启动按钮",
//             "value": "${StartButton1}"
//         },
// 		{
//             "name": "暂停按钮",
//             "value": "${PauseButton1}"
//         },
// 		{
//             "name": "主框架x零位",
//             "value": "${MFrameX_Z}"
//         },
// 		{
//             "name": "主框架y零位",
//             "value": "${MFrameY_Z}"
//         },
// 		{
//             "name": "点动按钮",
//             "value": "${JogButton1}"
//         },
// 		{
//             "name": "主框架X负限位",
//             "value": "${MFrameX_N}"
//         },
// 		{
//             "name": "主框架X负限位",
//             "value": "${MFrameY_N}"
//         },
// 		{
//             "name": "主框架X正限位",
//             "value": "${MFrameX_P}"
//         },
// 		{
//             "name": "主框架y正限位",
//             "value": "${MFrameY_P}"
//         }
//     ],
//     "axleList": [
//         {
//             "name": "x轴",
//             "value": "1"
//         },
//         {
//             "name": "y轴",
//             "value": "1"
//         },
//         {
//             "name": "Z轴",
//             "value": "1"
//         }
//     ],
//     "devDetail": [
//         {
//             "name": "机器版本",
//             "value": "${MachineEdition}"
//         },
//         {
//             "name": "界面版本",
//             "value": "${InterfaceVersion}"
//         },
// 		{
//             "name": "",
//             "value": "${MachineEdition}"
//         }
//     ],
//     "devInfo": {
//     "供应商名称":"${partnerName}",
// 		"供应商业务员":"${salesPerson}",
// 		"贸易类型":"${tradeType}",	
// 		"机器型号":"${productModel}",	
// 		"产品名称":"${productName}",	
// 		"订单号":"${saleON}",	
// 		"销往目的地":"${soldToDestination}",	
// 		"销往目的地(终端)":"${soldToDestinationFinal}",	
// 		"约定交期":"${deliveryDate}",	
// 		"预计工厂交货日期":"${prtDeliveryDate}",	
// 		"下单安排生产日期":"${planProductionDate}",	
// 		"客户名称":"${customerName}",	
// 		"客户业务员":"${customerSalesman}",	
// 		"实际交付时间":"${realityTime}",
//     "调试进度":"${realityTime}"
//     },
//     "imgTip": {
//         "prtDeliveryDate": "${prtDeliveryDate}",
//         "realityTime": "${realityTime}",
//         "src": "${image}",
//         "status": "${status}"
//     }
// }


// }, 1000);
  }
onMounted(() => {
  getdata()
  let contentBox = Acontent.value;
  // let Timedombox=Timedom.value
  window.document.title = "设备详情";
  WH(contentBox);
  window.addEventListener("resize", () => {
    if (time.value) {
      clearTimeout(time.value);
      time.value = null;
    }
    time.value = setTimeout(() => {
      WH(contentBox);
    }, 1000);
  });
});

onUnmounted(() => {
  clearTimeout(time);
});
</script>

<style module>
.container {
  height: 1080px;
  width: 1920px;
  color: #20aec5;
  background-color: #100c2a;
}
</style>

<style scoped>
.title {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.title > h1 {
  font-size: 30px;
  position: absolute;
  top: 10px;
}
.header {
  position: relative;
}
.header p {
  position: absolute;
  right: 50px;
  bottom: 20px;
  font-size: 20px;
}
.content {
  display: flex;
  width: 100%;
  --header: 100px;
  height: calc(1080px - var(--header));
}

</style>

<style>
body {
 
  /* --content:calc(100vh - var(--header)) */
  overflow: hidden !important;
  -ms-overflow-style: none; /* IE + Edge */
  scrollbar-width: none; /* Firefox */
}
::-webkit-scrollbar {
  display: none;
}
</style>
