<!--
 * @FilePath: \screenFront\src\views\Mechanics\child\son\index.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-02-21 14:13:42
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
-->
<template>
    <div :class="$style['container']">
        <div class="header">
        <!-- <div class="title" @click="backrouter"> -->
          <div class="title">
          <header2 :width="'100%'" :height="'100px'" :title="t('messages.machineryDevStatus')" :titleTip="[]" :typeFun="['comback','time']" :alarmType="['']"></header2>
        </div>
      </div>
  
      <div class="content" ref="Acontent" >
        <div class="left ">
            <toptip ref="toptip1ref1" :type="1"> </toptip>
            <toptip ref="toptip1ref2" :type="1"> </toptip>
            <toptip ref="toptip1ref3" :type="1"> </toptip>
            <toptip ref="toptip1ref4" :type="2"> </toptip>
            <toptip ref="toptip1ref5" :type="2"> </toptip>
            <toptip ref="toptip1ref6" :type="2"> </toptip>
        </div>
        <div class="center ">
            <TopImg ref="imgRef"></TopImg>
            <!-- <water1 ref="progressref1" title="MTBF" :data="0"></water1> -->
            <!-- <water1 ref="progressref2" title="MTTR" :data="0"></water1> -->
            <MTTF  ref="MTTFref" title="MTTF"></MTTF>
        </div>
        <div class="right ">
          <timeguagu ref="timeguaguref" :title="t('messages.TimeUtilizationRate')"></timeguagu>
          <statuscontrast ref="contrastref" :title="t('messages.DevRunComparison')"></statuscontrast>
        </div>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { onBeforeMount, onMounted, onUnmounted, reactive, ref } from "vue";
  import header2 from '@/components/headerBox/header2.vue'
  import toptip from './components/toptip1.vue'
  import timeguagu from './components/timeguagu.vue'
  import progress from './components/progress.vue'
  import water1 from './components/water.vue'
  import TopImg from './components/imageTop.vue'
  import MTTF from './components/MTTF.vue'
  import {imgurlAddXhr} from '@/utils/devSever'
  import statuscontrast from './components/contrast.vue'
  import {calcWH} from '@/components/ts/selfAdaption'
  import { gatdeviceStatusInfoMF } from "@/http/Mechanics";
  import { useRoute,useRouter } from "vue-router";
import {useMechanicsStore} from "@/store/module/Mechanics"
import { useI18n } from 'vue-i18n'
let {t} = useI18n();
const store = useMechanicsStore()
const route=useRoute()
const router=useRouter()
  
  let Acontent=ref()
  let time=ref(null)
  let toptip1ref1=ref()
  let toptip1ref2=ref()
  let toptip1ref3=ref()
  let toptip1ref4=ref()
  let toptip1ref5=ref()
  let toptip1ref6=ref()
  let imgRef = ref()
  let timeguaguref=ref()
  // let progressref1=ref()
  // let progressref2=ref()
  let MTTFref=ref()
  let contrastref=ref()
//   let {timeHtml}=useNowTime()
//   let arr=reactive(null)
  let size=reactive({
    oWidth:0,
    oHeight:0
  });
  function WH(div:HTMLElement){
    let a=calcWH(div.offsetHeight,div.offsetWidth,24,24,0)
  size.oWidth=a.oWidth
  size.oHeight=a.oHeight
  toptip1(a.oWidth*4-50,a.oHeight*8-50)
  // toptip2(a.oWidth*3,a.oHeight*2)
  guagebox(a.oWidth*8-50,a.oHeight*12-50)
  contrasttbox(a.oWidth*8-50,a.oHeight*12-50)
  }
  function toptip1(width:any,height:any){
    if(!toptip1ref1.value&&!toptip1ref2.value) return
    if(!toptip1ref3.value&&!toptip1ref4.value&&!toptip1ref5.value&&!toptip1ref6.value) return
    toptip1ref1.value.setchartWH(width,height)
    toptip1ref2.value.setchartWH(width,height)
    toptip1ref3.value.setchartWH(width,height)
    toptip1ref4.value.setchartWH(width,height)
    toptip1ref5.value.setchartWH(width,height)
    toptip1ref6.value.setchartWH(width,height)
  }
  function guagebox(width:any,height:any){
    if(!MTTFref.value&&!imgRef.value) return
    imgRef.value.setchartWH(width,height)
      // progressref1.value.setchartWH(width,height)
      // progressref2.value.setchartWH(width,height)
      MTTFref.value.setchartWH(width,height)
  }
    function contrasttbox(width:any,height:any){
      if(!contrastref.value&&!timeguaguref.value) return
      timeguaguref.value.setchartWH(width,height)
      contrastref.value.setchartWH(width,height)
  }
  async function gatdeviceStatusInfoMFfun(){  
    let result:any = await gatdeviceStatusInfoMF({id:route.params.dev})
   
    if(result.code==200){
      console.log(result,"dadadadasdafafdsagdsgafg");
      setdata(result.data)
    }
  }
  function setdata(val:any){
let data={
    name:val.name, //设备名称
    status:val.status=='H_E_STOP'?t('messages.STOP'):val.status=='H_OFF'?t('messages.Standby'):val.status=='H_ON'?t('messages.work'):t('messages.halt'), //设备状态
    starttime:val.ontime,//启动时长
    endtime:val.offtime,//待机时长
    stoptime:val.stoptime,//急停时长
    data:'2020-05-06',//采购日期
    src:imgurlAddXhr(val.data),//设备图片
    timeguagu:95,//时间稼动率
    MTBF:2724,//MTBF
    MTTR:169,//MTTR
    MTTF:2555,//MTTF
}
    toptip1ref1.value.setData({title:t('messages.DevName'),value:data.name})
    toptip1ref2.value.setData({title:t('messages.procureDate'),value:data.data})
    toptip1ref3.value.setData({title:t('messages.DevStatus'),value:data.status})
    toptip1ref4.value.setData({title:t('messages.workTime'),value:data.starttime})
    toptip1ref5.value.setData({title:t('messages.StandbyTime'),value:data.endtime})
    toptip1ref6.value.setData({title:t('messages.haltTime'),value:data.stoptime})
    timeguaguref.value.setData(data.timeguagu)
    imgRef.value.setData(data.src)
    // progressref1.value.setData(data.MTBF)
    // progressref2.value.setData(data.MTTR)
    MTTFref.value.setData({title:data.name,value:{MTTF:data.MTTF,MTBF:data.MTBF,MTTR:data.MTTR}})
    contrastref.value.setData({title:[t('messages.firing'),t('messages.Standby'),t('messages.STOP')],value:[data.starttime,data.endtime,data.stoptime]})
  }
  function backrouter(){
    router.push({
    name:'Mechanicschild',
    params:{
      id:store.page||route.params.id
    }
  })
  }
  // 
  onMounted(() => {
    let contentBox=Acontent.value
    // let Timedombox=Timedom.value
    window.document.title=t('messages.machineryDevStatus')
    WH(contentBox)

    window.addEventListener('resize',()=>{
      if(time.value){
        clearTimeout(time.value)
        time.value=null
      }
      time.value = setTimeout(() => {WH(contentBox)
      }, 1000);
    })
    gatdeviceStatusInfoMFfun()
  })
  
  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{
      width:100%;
      --header:100px;
      height:calc(1080px - var(--header));
      display:flex;
  }
  .center{
    margin: 0 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }
  .left{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: flex-end;
  }

  .right{
    margin-right: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
  }
  </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>
  