<!--
 * @FilePath: \screenFront\src\views\Temp\Large_Format\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 + 'px'" :height="'100px'" :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 getDeviceDetailfun() {
  setTimeout(() => {
    let result = {
      "code": 200,
      "msg": null,
      "data": {
        "LedList": [
          {
            "name": "X零位",
            "value": "1"
          },
          {
            "name": "Y零位",
            "value": "1"
          },
          {
            "name": "X降速",
            "value": "1"
          },
          {
            "name": "Y降速",
            "value": "1"
          },
          {
            "name": "X限位开关",
            "value": "1"
          },
          {
            "name": "Y限位开关",
            "value": "1"
          }
        ],
        "axleList": [
          {
            "name": "X轴驱动电机",
            "value": "1"
          },
          {
            "name": "y轴驱动电机",
            "value": "1"
          },
          {
            "name": "针电机",
            "value": "1"
          },
          {
            "name": "梭电机",
            "value": "1"
          },
          {
            "name": "升降电机",
            "value": "1"
          }
        ],
        "imgTip": {
          "realityTime": "",
          "src": "3c92b5010e6845229311385a05f864aa.png",
          "deliveryDate": "",
          "prtDeliveryDate": "2023年08月12日",
          "status": "调试中"
        },
        "devDetail": [
          {
            "name": "装配组",
            "value": "白建中"
          },
          {
            "name": "电装组",
            "value": "金占祥"
          }
        ],
        "devInfo": {
          "saleON": "S21876",
          "soldToDestinationFinal": "国内",
          "productModel": "RPQP-NM-S1S-1-3200×3200-SDM-RH-VR2-SBD-1P220",
          "partnerName": "",
          "soldToDestination": "国内",
          "productName": "再登大幅面轮廓智能缝",
          "customerName": "再登",
          "realityTime": "",
          "planProductionDate": "2023年04月11日",
          "customerSalesman": "王佳美",
          "progress": "70",
          "salesPerson": "王佳美",
          "deliveryDate": "",
          "tradeType": "外贸",
          "prtDeliveryDate": "2023年06月25日"
        }
      }
    }
    
  store.setnewPageData(result.data)
  });
}
function getdata() {
  getDeviceDetailfun()
  let data = null
}
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>
