<template>
  <div style="display: inline-block;width: 100%;height: 100% ">
    <div style="background-color: #094170">
      <div class="scrollTable" style="font-weight: bold;" :style="`width:calc(${100/defaultData.th.length}%)`"
           v-for="i in defaultData.th">
        {{ i }}
      </div>
    </div>
    <!--        <vue-seamless-scroll-->
    <!--          :visibleCount="3"-->
    <!--          :list="tableData"-->
    <!--          :hover="true"-->
    <!--          :step="0.5"-->
    <!--          class="case-item"-->
    <!--          style="height: 84%;overflow: hidden;"-->
    <!--        >-->
    <div
      v-for="(item, index) in tableData"
      :key="index"

    >
      <div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '>
        <div
          class="scrollTable" v-for="i in defaultData.td" :style="`width:calc(${100/defaultData.td.length}%)`">
          {{ item[i] }}
        </div>
      </div>
    </div>
    <!--        </vue-seamless-scroll>-->
  </div>
</template>

<script setup>
// import vueSeamlessScroll from 'vue3-seamless-scroll';

import { queryGlobalCfg } from '@/api/configure/configuration/globalCfg.js';

const props = defineProps({
  defaultData: Object,
  defaultTableData: Object
});

const { defaultData, defaultTableData } = toRefs(props);

const tableData = ref([]);
const $getFinalData = inject('$getFinalData');

watch(() => defaultData, (newVal) => {
    getOption();
  }, { deep: true }
);
watch(() => defaultTableData, (newVal) => {
    getOption();
  }, { deep: true }
);

onMounted(async () => {
  await getData();
  getOption();
  setInterval(async () => {
    await getData();
  }, 1000 * 10);
});

const getData = async (e) => {
  let data = await $getFinalData(defaultData.value.requests);
  // networkData.value = data
};
const getOption = () => {
  tableData.value = defaultTableData.value;
};

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

<style>


.scrollTable {
  color: rgb(185, 186, 192);
  margin: auto 0px;
  padding: 4px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  display: inline-block;

}
</style>
