<!--
 * @FilePath: \wwwd:\code\screenFront\src\views\Temp\Large_Format\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>
        <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.newPageData,
  (newVal, oldVal) => {
    //动态更新
    let originData=[
    [t('messages.RackNum'),'11201104'],
    [t('messages.DevName'),'再登大幅面轮廓智能缝'],
    // ['供应商业务员',newVal.devInfo.partnerName],
    ['贸易类型',newVal.devInfo.tradeType],
    ['机器型号',newVal.devInfo.productModel],
    ['产品名称',newVal.devInfo.productName],
    // ['订单号',newVal.devInfo.saleON],
    // ['销往目的地',newVal.devInfo.soldToDestination],
    // ['销往目的地(终端)',newVal.devInfo.soldToDestinationFinal],
    // ['下单安排生产日期',newVal.devInfo.planProductionDate],
    // ['客户名称',newVal.devInfo.customerName],
    // ['客户业务员',newVal.devInfo.customerSalesman],
    ]


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

    originRef.value.setData(originData,'设备信息');
    
    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);
  console.log(a,"leftboxtop");
  
  // 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);
  console.log(a,"boxbottom");
  toptip1Ref.value.setchartWH(a.oWidth+100, a.oHeight * 3);
  // 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>
