<!--
 * @FilePath: \wwwd:\code\screenFront\src\views\Offsite\child\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>
      <el-col>
        <offsitegateway
          ref="offsitegatewayref"
          :title="t('messages.GatewayStatus')"
        ></offsitegateway>
      </el-col>
      <el-col>
        <devImage ref="devImageRef" :title="t('messages.DevPreviewChart')"></devImage>
      </el-col>
    </el-row>
  </div>
</template>

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

let devImageRef = ref();
let offsitegatewayref = 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
  //修改高度
  devImageRef.value.setchartWH(a.oWidth, a.oHeight*3);
  offsitegatewayref.value.setchartWH(a.oWidth, a.oHeight*2);
};
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 setDataList(val:any){
offsitegatewayref.value.setData(val.devnum);
let imagedata=[]
//添加线上路径并拿出所有图片路径
val.citylist.forEach(res=>{
  //拼接路径
  if(res.image){
    res.image=imgurlAddXhr(res.image)
  imagedata.push(res.image)
  }

})
//删除相同图片
let a = [...new Set(imagedata)]
//删除图片后处理
imagedata=[]
a.forEach((res,index)=>{
  imagedata.push({image:res,id:index})
})

devImageRef.value.setData(imagedata);
}
onMounted(() => {
  

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

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