<template>
  <div>
    <el-table
      class="header-table"
      header-cell-class-name="!bg-[#F7F7F7] font-normal text-size-14px "
      header-row-class-name="h-50px"
      :data="[]"
      style="width: 100%"
    >
      <el-table-column v-for="(item, index) in columns" :key="index" v-bind="item">
      </el-table-column>
    </el-table>
    <div class="h-20px"></div>
    <div v-for="(item, index) in data" :key="index" class="mb-20px">
      <div class="h-50px bg-[#F7F7F7] flex justify-between items-center px-10px">
        <div class="text-black whitespace-nowrap text-left">{{item.number}}</div>
        <div class="text-black text-left whitespace-nowrap">{{item.createTimeStr}}</div>
      </div>
      <el-table
        header-cell-class-name="!bg-[#F7F7F7] font-normal text-size-14px "
        header-row-class-name="data-header"
        :data="[item]"
        style="width: 100%"
        :show-header="false"
      >
        <el-table-column v-for="(item, index) in columns" :key="index" v-bind="item">
          <template v-slot:header>
            <div v-if="index === 0" class="text-black whitespace-nowrap text-left">
              {{item.number}}
            </div>
            <div
              v-if="index === columns.length - 1 && index > 0"
              class="text-black text-left whitespace-nowrap"
            >
              {{item.createTimeStr}}
            </div>
          </template>
          <template v-slot:default="props" v-if="$scopedSlots[index] || $slots[index]">
            <slot :name="index" v-bind="props"> </slot>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    columns: {
      default: [],
    },
    data: [],
  },
  mounted() {
    console.log("this.slot", this.$scopedSlots);
  },
};
</script>

<style>
.header-table .el-table__body-wrapper {
  display: none;
}
.data-header > th:first-child {
  @apply absolute z-50;
}
.data-header > th:last-child {
  /* @apply  absolute z-50;  */
}
</style>
