<!--
 * @FilePath: \wwwd:\code\screenFront\src\views\InPlantProducts\child\top.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-02-16 11:30:31
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
-->

<template>
    <div class="content-left">
      <el-row>
          <el-col :span="8"> 
            <title1 ref="titleRef"> </title1>
            <origin1 ref="originRef"> </origin1>
          </el-col>
          <el-col :span="8"> 
            <!-- <gateway ref="gateway2" :title="'服装军团网管状态'"> </gateway> -->
            <toptip1 ref="toptip1Ref"></toptip1>
          </el-col>
          <el-col :span="8"> 
            <detail1 ref="detailsRef"></detail1>
          </el-col>
      </el-row>
    </div>
  </template>
  
  <script setup lang="ts">
  import {onMounted, reactive, ref, watch} from "vue"
  import {calcWH} from '@/components/ts/selfAdaption'
  import title1 from "./component/title.vue"
  import origin1 from "./component/origin.vue"
  import detail1 from './component/Details.vue'
  import toptip1 from './component/toptip.vue'
//   import { getnoiseData } from "@/http/environment";
  // import { getnoiseData } from "@/http/generalEnvironment";
  import {useInPlantProductsStore} from "@/store/module/InPlantProducts"
  import { useI18n } from 'vue-i18n'
let {t} = useI18n();
  const store = useInPlantProductsStore()
  let props=defineProps<{
      width:number,
      height:number,
      }>()
  
  watch(()=>props,(newVal, oldVal)=>{
    //监听父组件宽高变化，随时重置本组件尺寸  
    reset(newVal)
  },{immediate:true,deep:true,flush:'post'})
  
  watch(
  () => store.DeviceInfo,
  (newVal, oldVal) => {
    //动态更新
    let originData=[
    [t('messages.RackNum'),newVal.rackNumber],
    [t('messages.SupplierName'),newVal.partnerName],
    [t('messages.TradeType'),newVal.tradeType],
    [t('messages.ClientName'),newVal.customerName],
    [t('messages.ClientSalesman'),newVal.customerSalesman],
    [t('messages.OrderNo'),newVal.saleON],
    [t('messages.SoldDest'),newVal.soldToDestination],
    [t('messages.SoldDest_terminal'),newVal.soldToDestinationFinal],
    [t('messages.orderManufactureDate'),newVal.planProductionDate],
    ]
    let detailsData=[]
    //有则显示
    newVal.InterfaceVersion?detailsData.push(['主板界面',newVal.InterfaceVersion]):detailsData.push(['主板界面',newVal.InterfaceVersion])
    newVal.productModel?detailsData.push([t('messages.ModelNo'),newVal.productModel]):detailsData.push([t('messages.ModelNo'),newVal.productModel])
    newVal.embHeadNumbers?detailsData.push(['绣花机头个数',newVal.embHeadNumbers]):''
    newVal.embneedleNumbers?detailsData.push(['绣花机头针数',newVal.embneedleNumbers]):''
    newVal.hookMode?detailsData.push(['主轴驱动',newVal.hookMode]):detailsData.push(['主轴驱动',newVal.hookMode])
    newVal.spindleZeroSta?detailsData.push(['主轴零位状态',newVal.spindleZeroSta]):detailsData.push(['主轴零位状态',newVal.spindleZeroSta])
    newVal.RunningTime?detailsData.push([t('messages.runTime'),newVal.RunningTime]):detailsData.push([t('messages.runTime'),newVal.RunningTime])
    newVal.electricGroup?detailsData.push([t('messages.electronicGroup'),newVal.electricGroup]):detailsData.push([t('messages.electronicGroup'),newVal.electricGroup])
    newVal.assemblyGroup?detailsData.push([t('messages.AssemblyGroup'),newVal.assemblyGroup]):detailsData.push([t('messages.AssemblyGroup'),newVal.assemblyGroup])


    titleRef.value.setData(newVal.productName)
    originRef.value.setData(originData)
    detailsRef.value.setData(detailsData)
    let toptipData={
      data:newVal.deliveryDate,
      src:newVal.image,
      active:newVal.active
    }
    toptip1Ref.value.setData(toptipData)

  },
  { deep: true, flush: "post" }
);


  //内容dom-------------------------
  let titleRef=ref()
  let originRef=ref()
  let detailsRef=ref()
  let toptip1Ref = ref()
  
  //---------------------------
  
  //---------------------------
  
  function reset(val:any){
    //宽高为0时跳出该方法
    if(!val.width && !val.height) return
    title1box(val.width,val.height)
    detailsBox(val.width,val.height)
  }
  
  const title1box=(width:any,height:any)=>{
  let a=calcWH(height,width,4,3,0)
  console.log(a,"111");
  
//   a.oHeight=a.oHeight
  //修改高度
  titleRef.value.setchartWH(a.oWidth,a.oHeight)
  originRef.value.setchartWH(a.oWidth,a.oHeight*3)
}
const detailsBox=(width:any,height:any)=>{
  let a=calcWH(height,width,1,3,0)
  console.log(a,"222");
//   a.oHeight=a.oHeight
  //修改高度
  detailsRef.value.setchartWH(a.oWidth,a.oHeight)
  toptip1Ref.value.setchartWH(a.oWidth,a.oHeight)
}
  
//   async function getnoiseDatafun(){
//     let result:any = await getnoiseData()
   
//     if(result.code==200){
//       console.log(result);
//       refnoise.value.setData(result.data)
//       // setData(room,year,result.title)
//     }
//   }
function setdata(){
    
}
  onMounted(()=>{
    // getnoiseDatafun()
    setdata()
  })
  </script>
  
  <style scope>
  .content-left{
      width: 100%;
  }
  
  </style>
  