<template>
  <div class="content-left">
    <el-row>
      <el-col :span="24">
        <!-- <title1 ref="titleRef"> </title1> -->
        <div class="titlebox">
          <topTitle ref="topTitle1"></topTitle>
          <topTitle ref="topTitle2"></topTitle>
          <topTitle ref="topTitle3"></topTitle>
            <topTitle ref="topTitle4"></topTitle>
            <topTitle ref="topTitle5"></topTitle>
          <!-- <topTitle
            v-for="item in dataref"
            :ref="setItemRef"
            :is="item.title"
          ></topTitle> -->
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { onBeforeMount, onMounted, reactive, ref, watch } from "vue";
import { calcWH } from "@/components/ts/selfAdaption";
import topTitle from "./chart/topTitle.vue";
import { Offsite } from "@/store/module/offsite";
const store = Offsite();

let props = defineProps<{
  width: number;
  height: number;
}>();

//内容dom-------------------------
// let dataref = store.itemDevNum;
// const itemRefs = [];
// const setItemRef = (el) => {
//   if (el) {
//     itemRefs.push(el);
//   }
// };
// console.log(setItemRef);

let topTitle1 = ref();
let topTitle2 = ref();
let topTitle3 = ref();
let topTitle4 = ref();
let topTitle5 = ref();

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

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

const boxWH = reactive({
  width: "0px",
  height: "0px",
});

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

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, 1, 5, 0);

  //   a.oHeight=a.oHeight
  //修改高度
  topTitle1.value.setchartWH(a.oWidth, a.oHeight);
  topTitle2.value.setchartWH(a.oWidth, a.oHeight);
  topTitle3.value.setchartWH(a.oWidth, a.oHeight);
  topTitle4.value.setchartWH(a.oWidth, a.oHeight);
  topTitle5.value.setchartWH(a.oWidth, a.oHeight);
};

onMounted(() => {
});

watch(
  () => store.itemDevNum,
  (newVal, oldVal) => {
    setdata(newVal)
  },
  { deep: true, flush: "post" }
);
function setdata(data:any) {
  // console.log(topTitle1.value);

  topTitle1.value.setData(data[0]);
  topTitle2.value.setData(data[1]);
  topTitle3.value.setData(data[2]);
  topTitle4.value.setData(data[3]);
  topTitle5.value.setData(data[4]);
}
</script>

<style scope>
.content-left {
  width: 100%;
}
.titlebox {
  display: flex;
}
</style>
