<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>
    <div style="height: 84%;overflow: hidden;">
      <!--            <vue3-seamless-scroll-->
      <!--              :list="tableData"-->
      <!--              ref="tableRef"-->
      <!--            >-->
      <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>
      <!--            </vue3-seamless-scroll>-->
    </div>
  </div>
</template>
<script setup>
// import vueSeamlessScroll from 'vue3-seamless-scroll';

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

const { defaultData } = toRefs(props);
const tableData = ref([]);
const tableV = ref(true);
const tableKey = ref(0);
const $getFinalData = inject('$getFinalData');
const tableRef = ref();

onMounted(async () => {
  await getData();
  setInterval(async () => {
    await getData();
  }, 1000 * 10);
});
const getData = async () => {
  let data = await $getFinalData(defaultData.value.requests);
  tableData.value = data[defaultData.value.tableDataKey];
};
</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>
