<template>
  <div class="custom-t-table">
    <TTable
      class="reset-t-table"
      row-key="index"
      :data="list"
      :columns="columns"
      hover
      :loading="loading"
    >
    </TTable>
  </div>
</template>

<script lang="ts" setup>
import { Table as TTable } from 'tdesign-vue-next';
import { ref } from 'vue';
const props = defineProps<{
  columns: any[];
  list: any[];
}>();
const loading = ref(false);
</script>

<style lang="less">
@import '@/style/variables.less';
.reset-t-table {
  background-color: transparent;
  .t-table__content {
    background-color: transparent;
  }
  thead {
    tr {
      background-color: transparent;
      th {
        border: none;
        background: #000000;
        color: white;
        font-size: @font-size-16;
        font-weight: 400;
      }
      & > :first-child {
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
      }
      & > :last-child {
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
      }
    }
  }
  tbody {
    .t-table__empty-row {
      background-color: transparent;
      &:hover {
        background-color: transparent;
      }
      .t-table__empty {
        color: white;
      }
    }
  }
}
</style>
