<!--
 * @FilePath: \screenFront\src\views\electronicControl\index.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-04-11 13:50:05
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
-->
<template>
  <div class="container">
    <div class="header">
      <div class="title">
        <header2 ref="headerref" :width="'100%'" :height="'100px'" :title="t('messages.electronicControl')" :titleTip="[]"
          :typeFun="['comback', 'time']" :alarmType="[]"></header2>
      </div>
    </div>
    <div class="content" ref="Acontent">
      <el-row>
        <el-col :span="7">
          <left :width="size.oWidth * 7" :height="size.oHeight" ref="leftRef"></left>
        </el-col>
        <el-col :span="11">
          <center :width="size.oWidth * 11" :height="size.oHeight" ref="centerRef"></center>
        </el-col>
        <el-col :span="6">
          <right :width="size.oWidth * 6" :height="size.oHeight" ref="rightRef"></right>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, reactive, ref } from "vue"
import devSwiper from "@/components/EquipmentStatusDiagram/EquipmentStatusDiagram.vue"
import header2 from '@/components/headerBox/header2.vue'
import { calcWH } from '@/components/ts/selfAdaption'
import { Offsite } from "@/store/module/offsite";
import { getElectronDevice,getElectronDeviceStatus } from '@/http/electronicControl/index'
import left from "./childContent/left.vue"
import center from "./childContent/center.vue"
import right from "./childContent/right.vue"
import { useRoute, useRouter } from "vue-router";
import { useI18n } from 'vue-i18n'
let {t} = useI18n();
const route = useRoute();
const store = Offsite()
let Acontent = ref()
let time = ref(null)
let routeCity = route.params.city

let leftRef = ref()
let centerRef = ref()
let rightRef = ref()
let size = reactive({
  oWidth: 0,
  oHeight: 0
});
function WH(div: HTMLElement) {
  let a = calcWH(div.offsetHeight, div.offsetWidth, 1, 24, 0)
  size.oWidth = a.oWidth - 2
  size.oHeight = a.oHeight - 50

}
async function getdata() {
  try {
    let res:any = await getElectronDevice()  
  let alarmList:any = await getElectronDeviceStatus('8')
    if (res.code == 200) {
      alarmList = alarmList.data.map((item: any) => {
        //{ name: "富怡精密绣花机", id: 1 ,label:154862,time:"2023-3-28 15:25:02",status:true}
        return { name: item.name, id: item.deptId, label: item.label, time: item.ts, status: JSON.parse(item.status)}
      })
      let images = res.data.devlist.map((item: any) => {
        // return {image:item.image,id:item.id}
        return item.image
      })
      let imgArr = [...new Set(images)]
      
      
      leftRef.value.setDataList({ statusnum: res.data.statusnum, devlist: res.data.devlist })

      centerRef.value.setDataList({ devnum: res.data.devnum[0],imgArr})
      rightRef.value.setDataList({alarmList:alarmList,typenum:res.data.typenum})
    }
  } catch (error) {
    
  }
  
  


}

//判断图片是否存在
function checkImgExists(imgurl) {
    return new Promise(function(resolve, reject) {
      var ImgObj = new Image();
      ImgObj.src = imgurl;
      ImgObj.onload = function(res) {
        resolve(true);
      }
      ImgObj.onerror = function(err) {
        reject(false)
      }
    })
}
onMounted(() => {
  getdata()
  let contentBox = Acontent.value
  window.document.title = t('messages.electronicControl')
  WH(contentBox)
})
onUnmounted(() => {
  clearTimeout(time)
  // store.resetAllData()
})
</script>

<style scoped>
.container {
  height: 1080px;
  width: 1920px;
  color: #20aec5;
  background-color: #100c2a;
}

.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))
}
</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>