<!--
 * @FilePath: \wwwd:\code\screenFront\src\views\Mechanics\child\main\index.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-02-23 08:46:19
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
-->
<template>
    <div :class="$style['container']">
      <div class="header">
        <div class="title">
          <header2 :width="'100%'" :height="'150px'" :title="t(props.title)" :titleTip="titleTip" :typeFun="['comback','time']" :alarm-type="['']">
          </header2>
        </div>
      </div>
      <dv-loading v-show="!loading">Loading...</dv-loading>
      <div class="content" ref="Acontent" v-show="loading">
        <devitem v-for="item in arr" :key="item.id" :dev="item.id" :status="item.status" :url="item.imgsrc" :devName="item.name"></devitem>

      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { nextTick, onBeforeMount, onMounted, onUnmounted, reactive, ref, watch } from "vue";
  import devitem from '../components/devItemStyle.vue'
  import header2 from '@/components/headerBox/header2.vue'
  import {calcWH} from '@/components/ts/selfAdaption'
  import { ElRow, ElCol } from "element-plus";
  import {useMechanicsStore} from "@/store/module/Mechanics"
  import { useI18n } from 'vue-i18n'
let {t} = useI18n();
  const store = useMechanicsStore()
  let props=defineProps<{
      title:string,
      type:string
      }>()

      let Acontent=ref()
  let time=ref(null)
//   let Timedom=ref()
//   let {timeHtml}=useNowTime()
  let arr=ref()
  let keynum=ref(0)
  let loading=ref(false)
  let titleTip=[{
  color:'#EE6666',
  name:t('messages.STOP')
},{
  color:'#FAC858',
  name:t('messages.Standby')
},{
  color:'#91CC75',
  name:t('messages.work')
},{
  color:'#aaa',
  name:t('messages.halt')
}]
  let size=reactive({
    oWidth:0,
    oHeight:0
  });
  function WH(div:HTMLElement){
    let a=calcWH(div.offsetHeight,div.offsetWidth,1,10,0)
  size.oWidth=a.oWidth
  size.oHeight=a.oHeight
    
  }
  watch(
  () => store.mechanicsData,
  (newVal, oldVal) => {
    //动态更新echarts
    newVal.forEach(res=>{
      if(res.type==props.type){
        setdata(res.data)
        
      }
    })
    
  },
  { deep: true, flush: "post" }
);
//监听是否加载完成
watch(
  () => store.loading,
  (newVal, oldVal) => {
    //动态更新echarts
    
    loading.value=newVal
  },
  { deep: true, flush: "post" }
);

  const setdata=(data:any)=>{
    arr.value=data
    // keynum.value++
  }
  // 
  onBeforeMount(() => {
  }),
  onMounted(() => {
    let contentBox=null
    contentBox = Acontent.value
    // let Timedombox=Timedom.value
    window.document.title='设备详情'
    WH(contentBox)

    

    window.addEventListener('resize',()=>{
      if(time.value){
        clearTimeout(time.value)
        time.value=null
      }
      time.value = setTimeout(() => {WH(contentBox)
      }, 1000);
    })
      
  })
  
  onUnmounted(() => {
    clearTimeout(time)
    store.changeloading(false)
  })
  
  </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;
  }
  /* .tip{
    position: absolute;
    bottom: 10px;
    left: 10px;
  } */
  .red{
    background-color: #EE6666;
  }
  .yellow{
    background-color: #FAC858;
  }
  .green{
    background-color: #91CC75;
  }
  .fff{
    background-color: #aaa;
  }
  .red,.yellow,.green,.fff{
    width: 16px;
    height: 16px;
    border-radius: 8px;
  }
  .tipstring{
    font-size: 20px;
    color: #fff;
  }
  .tipspan{
    display: flex;
    margin-left: 30px;
    align-items: center;
  }
  .header{
      position: relative;
  }
  .header p{
      position: absolute;
      right: 50px;
      bottom: 20px;
      font-size:20px;
  }
  .content{
      width:100%;
      height:calc(1080px - 150px);
      display:flex;
      flex-wrap: wrap;
      overflow: auto !important;
  }
  </style>
  