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

<template>
  <div class="content-left">
    <div class="top">
      <div>
        <!-- <title1 ref="titleRef"> </title1> -->
        <origin1 ref="originRef"> </origin1>
      </div>

      <div style="margin-left: 50px;">
        <toptip1 ref="toptip1Ref"></toptip1>
        <detail1 ref="detailsRef"></detail1>
      </div>
      <!-- <gateway ref="gateway2" :title="'服装军团网管状态'"> </gateway> -->
    </div>
    <!-- <div class="bottom">
          
          <div style="margin-left: 50px;">
            <axle  ref="axleRef"></axle>
          </div>
          
    </div> -->
  </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 axle from "./component/axle.vue";
//   import { getnoiseData } from "@/http/environment";
// import { getnoiseData } from "@/http/generalEnvironment";
import { useInPlantProductsStore } from "@/store/module/InPlantProducts";
import { useRoute } from "vue-router";
import { useI18n } from 'vue-i18n'
let {t} = useI18n();
const route = useRoute();
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 data={
//       productName:'机器名称',
//       devinfo:[{name:'机架号',value:''},{name:'供应商名称',value:''}],
//       devdetail:[{name:'主板页面',value:''},{name:'机器型号',value:''}],
//       //imgtip中time：预计交货日期,src为img图片，status：当前状态，realityTime：交付日期
//       imgTip:{date:'2023年01月18日',src:'',status:'已交付',realityTime:'2023年01月18日'},
//       axleList:[{name:'x轴',value:''},{name:'y轴',value:''}],
//       LedList:[{name:'剪刀回位',value:''},{name:'启动按钮',value:''}]
//     }
//     let originData = [
//       ["设备名称", newVal.productName],
//       ["机架号", newVal.rackNumber],
//       ["供应商名称", newVal.partnerName],
//       ["贸易类型", newVal.tradeType],
//       ["客户名称", newVal.customerName],
//       ["客户业务员", newVal.customerSalesman],
//       ["订单号", newVal.saleON],
//       ["销往目的地", newVal.soldToDestination],
//       ["销往目的地(终端)", newVal.soldToDestinationFinal],
//       ["机器型号", newVal.planProductionDate],
//       ["预计工厂交货日期", newVal.planProductionDate],
//       ["约定交期", newVal.planProductionDate],
//       ["机器版本", newVal.planProductionDate],
//       ["界面版本", newVal.planProductionDate],
//       ["产量设定", newVal.planProductionDate],
//     ];
//     originRef.value.setData(originData,'设备信息');
//     let detailsData = [];
//     //有则显示
//     // newVal.productName
//     //   ? detailsData.push(["设备名称", newVal.productName])
//     //   : detailsData.push(["设备名称", newVal.productName]);
//     newVal.InterfaceVersion
//       ? detailsData.push(["主板界面", newVal.InterfaceVersion])
//       : detailsData.push(["主板界面", newVal.InterfaceVersion]);
//     newVal.productModel
//       ? detailsData.push(["机器型号", newVal.productModel])
//       : detailsData.push(["机器型号", 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(["运行时间", newVal.RunningTime])
//       : detailsData.push(["运行时间", newVal.RunningTime]);
//     newVal.electricGroup
//       ? detailsData.push(["电装组", newVal.electricGroup])
//       : detailsData.push(["电装组", newVal.electricGroup]);
//     newVal.assemblyGroup
//       ? detailsData.push(["装配组", newVal.assemblyGroup])
//       : detailsData.push(["装配组", newVal.assemblyGroup]);

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



//     // axleRef.value.setData(
//     //   reactive([
//     //     {
//     //       name: "x轴",
//     //       status: 1,
//     //     },
//     //     {
//     //       name: "y轴",
//     //       status: 1,
//     //     },
//     //     {
//     //       name: "z轴",
//     //       status: 1,
//     //     },
//     //     {
//     //       name: "z轴",
//     //       status: 1,
//     //     },
//     //     {
//     //       name: "z轴",
//     //       status: 1,
//     //     },
//     //     {
//     //       name: "z轴",
//     //       status: 1,
//     //     },
//     //     {
//     //       name: "z轴",
//     //       status: 1,
//     //     },
//     //     {
//     //       name: "z轴",
//     //       status: 1,
//     //     },
//     //     {
//     //       name: "z轴",
//     //       status: 1,
//     //     },
//     //     {
//     //       name: "z轴",
//     //       status: 1,
//     //     },
//     //     {
//     //       name: "z轴",
//     //       status: 1,
//     //     },
//     //     {
//     //       name: "z轴",
//     //       status: 1,
//     //     },
//     //     {
//     //       name: "z轴",
//     //       status: 1,
//     //     },
//     //     {
//     //       name: "z轴",
//     //       status: 1,
//     //     },
//     //     {
//     //       name: "z轴",
//     //       status: 1,
//     //     },
//     //     {
//     //       name: "z轴",
//     //       status: 1,
//     //     },
        
//     //   ])
//     // );
//   },
//   { deep: true, flush: "post" }
// );
//新修改数据
watch(
  () => store.newPageData,
  (newVal, oldVal) => {
    //动态更新
    let originData=[
    [t('messages.RackNum'),route.params.label],
    [t('messages.DevName'),route.params.name],
    [t('messages.SupplierSalesperson'),newVal.devInfo.partnerName],
    [t('messages.TradeType'),newVal.devInfo.tradeType],
    [t('messages.ModelNo'),newVal.devInfo.productModel],
    [t('messages.productName'),newVal.devInfo.productName],
    [t('messages.OrderNo'),newVal.devInfo.saleON],
    [t('messages.SoldDest'),newVal.devInfo.soldToDestination],
    [t('messages.SoldDest_terminal'),newVal.devInfo.soldToDestinationFinal],
    [t('messages.orderManufactureDate'),newVal.devInfo.planProductionDate],
    [t('messages.ClientName'),newVal.devInfo.customerName],
    [t('messages.ClientSalesman'),newVal.devInfo.customerSalesman],
    ]
    originRef.value.setData(originData,t('messages.DevInfo'));


    let detailsData = [];
    // console.log(newVal.devdetail);
    
    newVal.devDetail.forEach(res=>{
      detailsData.push([res.name,res.value?res.value:''])
    })
    detailsRef.value.setData(detailsData);

    
    let toptipData=newVal.imgTip
    toptip1Ref.value.setData(toptipData);
  },
  { deep: true }
);
//内容dom-------------------------
let titleRef = ref();
let originRef = ref();
let detailsRef = ref();
let toptip1Ref = ref();
// let axleRef=ref()
//---------------------------

//---------------------------

function reset(val: any) {
  //宽高为0时跳出该方法
  if (!val.width && !val.height) return;
  boxtop(val);
  boxbottom(val);
}
function boxtop(val: any) {
  let a = calcWH(val.height, val.width, 1, 2, 0);
  // titleRef.value.setchartWH(a.oWidth, 100);
  originRef.value.setchartWH(a.oWidth-20, a.oHeight -100);

}
function boxbottom(val: any) {
  let a = calcWH(val.height, val.width, 3, 2, 0);
  toptip1Ref.value.setchartWH(a.oWidth-20, a.oHeight * 2);
  detailsRef.value.setchartWH(a.oWidth-20, a.oHeight);
  // axleRef.value.setchartWH(a.oWidth-20, a.oHeight);
}
function setdata() {}
onMounted(() => {
  // getnoiseDatafun()
  setdata();
});
</script>

<style scope>
.content-left {
  /* width: 100%;/ */
}
.top{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
  margin-left: 5px;
}
.bottom{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    margin-left: 5px;
}
</style>
