<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>
import vueSeamlessScroll from "vue3-seamless-scroll";

export default {
  props: ['defaultData'],
  components: {
    vueSeamlessScroll,
  },
  data() {
    return {
      tableData:[],
    }
  },
  async mounted() {
    await this.getData()
    setInterval(async () => {
      await this.getData()
    }, 1000*10)
  },
  methods: {
    async getData() {
      let data = await this.$getFinalData(this.defaultData.requests)
      this.tableData = data[this.defaultData.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>
