<!--
 * @FilePath: \daping\src\views\InPlantProducts\child\bottom.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">
        <remarks ref="remarksRef"></remarks>
      </el-col>
      <el-col :span="8">
        <bottomtip ref="bottomtip1"> </bottomtip>
      </el-col>
      <el-col :span="8">
        <sensor ref="sensorRef"></sensor>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, watch } from "vue";
import { calcWH } from "@/components/ts/selfAdaption";
import bottomtip from "./component/bottomtip.vue";
import remarks from "./component/remarks.vue";
import sensor from "./component/sensor.vue";
//   import detail1 from './component/Details.vue'
//   import { getnoiseData } from "@/http/environment";
// import { getnoiseData } from "@/http/generalEnvironment";
import {gettime} from "@/utils/time"
import { useInPlantProductsStore } from "@/store/module/InPlantProducts";
const store = useInPlantProductsStore();
let props = defineProps<{
  width: number;
  height: number;
}>();

watch(
  () => props,
  (newVal, oldVal) => {
    //监听父组件宽高变化，随时重置本组件尺寸
    reset(newVal);
  },
  { immediate: true, deep: true, flush: "post" }
);
watch(
  () => store.DeviceSensorinfo,
  (newVal, oldVal) => {
    //动态更新echarts
    setdata(newVal);
  },
  { deep: true, flush: "post" }
);
watch(
  () => store.DeviceInfo,
  (newVal, oldVal) => {
    //动态更新echarts
    remarksRef.value.setData(newVal.remarkInformation);
  },
  { deep: true, flush: "post" }
);

//内容dom-------------------------
let remarksRef = ref();
let sensorRef = ref();
let bottomtip1 = ref();

//   let originRef=ref()
//   let detailsRef=ref()

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

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

function reset(val: any) {
  //宽高为0时跳出该方法
  if (!val.width && !val.height) return;
  remarksBox(val.width, val.height);
  // detailsBox(val.width,val.height)
}

const remarksBox = (width: any, height: any) => {
  let a = calcWH(height, width, 1, 3, 0);

  //   a.oHeight=a.oHeight
  //修改高度
  remarksRef.value.setchartWH(a.oWidth, a.oHeight);
  sensorRef.value.setchartWH(a.oWidth, a.oHeight);
  bottomtip1.value.setchartWH(a.oWidth, a.oHeight);
};

function setdata(val: any) {
  
  bottomtip1.value.setData(
    reactive({name:val.name,severror:val.severror,Timestamp:val.Timestamp?gettime(val.Timestamp-0):'----.--.--',Alarlmnformation:val.Alarlmnformation})
  )
  sensorRef.value.setData(
    reactive([
      {
        name: "剪刀回位",
        status: val.ScissorsReturn,
      },
      {
        name: "启动按钮",
        status: val.StartButton1,
      },
      {
        name: "暂停按钮",
        status: val.PauseButton1,
      },
      {
        name: "主框架x零位",
        status: val.MFrameX_Z,
      },
      {
        name: "主框架y零位",
        status: val.MFrameY_Z,
      },
      {
        name: "点动按钮",
        status: val.JogButton1,
      },
      {
        name: "主框架x负限位",
        status: val.MFrameX_N,
      },
      {
        name: "主框架y负限位",
        status: val.MFrameY_N,
      },
      {
        name: "主框架x正限位",
        status: val.MFrameX_P,
      },
      {
        name: "主框架y正限位",
        status: val.MFrameY_P,
      },
    ])
  );
}
onMounted(() => {
  // getnoiseDatafun()
  // setdata()
});
</script>

<style scope>
.content-left {
  width: 100%;
}
</style>
