<!--
 * @FilePath: \wwwd:\code\screenFront\src\views\electronicControl\childContent\left.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-04-12 08:46:57
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
-->
<template>
  <div class="content-left">
    <el-row :gutter="10">
      <el-col>
        <offsitegateway ref="offsitegatewayref" :title="t('messages.GatewayStatus')"></offsitegateway>
      </el-col>
      <el-col>

        <div class="tableBoxDiv">
          <table1 :title="tabledata.title" :data="tabledata" ref="tableref"></table1>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, watch } from "vue";
import { calcWH } from "@/components/ts/selfAdaption";
import offsitegateway from "./chart/offsitegateway.vue";
import table1 from "@/components/assembly/RotationTable.vue";
import { useI18n } from 'vue-i18n'
let {t} = useI18n();
let props = defineProps<{
  width: number;
  height: number;
}>();


let offsitegatewayref = ref();
let tableref = ref();
watch(
  () => props,
  (newVal, oldVal) => {
    //监听父组件宽高变化，随时重置本组件尺寸
    reset(newVal);
  },
  { immediate: true, deep: true, flush: "post" }
);

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

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

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

  //   a.oHeight=a.oHeight
  //修改高度

  offsitegatewayref.value.setchartWH(a.oWidth, a.oHeight * 2);
  tableref.value.setchartWH(a.oWidth, a.oHeight * 3);
  listWH.width = a.oWidth
};
let tabledata = reactive({
  title: t('messages.DianKongDevList'),
  data: {
    header: [
    t('messages.SerialNum'),
    t('messages.DevName'),
    t('messages.type'),
    t('messages.DevStatus'),
    t('messages.RunTime'),
      // "设备信号",
    ],
    data: [],
    headerBGC: "#3469F3",
    oddRowBGC: "#100C2A",
    evenRowBGC: "#100C2A",
    rowNum: 10,
    waitTime: 3000,
    carousel: "page",
    hoverPause: true,
    columnWidth: null,
    align: [
      "center",
      "center", 
      "center",
      "center",
      "center"
    ],
  },
});
const listWH = reactive({
  height: 0,
  width: 0,
});
let data1 = [
  { name: "4G", status: true },
  { name: "WIFI", status: true },
];
let data2 = [
  { image: "https://img1.baidu.com/it/u=413643897,2296924942&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500", id: 1 },
  { image: "https://lmg.jj20.com/up/allimg/1114/041621122252/210416122252-1-1200.jpg", id: 2 },
  { image: "https://lmg.jj20.com/up/allimg/1114/062621110J7/210626110J7-10-1200.jpg", id: 3 },
  { image: "https://img1.baidu.com/it/u=2812417321,4100104782&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750", id: 4 },
  { image: "https://img1.baidu.com/it/u=4049022245,514596079&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500", id: 5 },
];

function changedevlist(val: any) {
  let list = [];
  console.log(listWH.width);

  val.forEach((res, index) => {
    list.push([
      index + 1,
      res.name,
      res.devType,
      JSON.parse(res.devstatus) ? t('messages.onLine') : t('messages.offline'),
      '1'
    ]);

  });
  tabledata.data.data = list;
  tabledata.data.rowNum = val.length < 10 ? val.length : 10;
  tabledata.data.waitTime = 3000;
  // tabledata.data.columnWidth=[90,115,115,115,115]
  listWH.width ? tabledata.data.columnWidth = [listWH.width * 0.12, listWH.width * 0.30, listWH.width * 0.15, listWH.width * 0.21] : ''
  tableref.value.changeData(tabledata.data);
}
function setDataList(val: any) {
  offsitegatewayref.value.setData(val.statusnum);
  changedevlist(val.devlist)
}
onMounted(() => {


});
defineExpose({
  setDataList
})
</script>

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

.tableBoxDiv :deep(.ceil) {
  font-size: 1.2rem;
}

.tableBoxDiv :deep(.header-item) {
  font-size: 1.2rem;
}

.el-col {
  margin-bottom: 20px;
}
</style>
