<!--
  Description: 虚拟滚动列表 -- 适用于不分页 数据量大的 table表格
  Author: 李亚光
  Date: 2025-04-15
 -->
<script lang="ts" setup name="VirtualTable">
import type { TableColumn } from '@/components/NormalTable/table_interface'
const props = defineProps({
  // 数据
  data: {
    type: Array,
    default() {
      return []
    },
  },
  // 数据列配置
  columns: {
    type: Array<TableColumn>,
    default() {
      return []
    },
  },
  // 表格高度
  height: {
    type: Number,
    default() {
      return null
    },
  },
  // loading状态
  listLoading: {
    type: Boolean,
    default: false,
  },
})
</script>

<template>
  <vxe-table v-loading="props.listLoading" :data="props.data" :height="height - 48" :virtual-scroll="{ itemSize: 35 }"
    :cell-config="{ height: 40 }" stripe border style="width: 100%;" show-overflow>
    <slot name="preColumns" />
    <vxe-column v-for="item in columns" :key="item.text + item.value" :title="item.text" showOverflow :width="item.width"
      align="center">
      <template #default="{ row, rowIndex }">
        <span v-if="!item.isCustom"> {{ String(row[item.value]) && String(row[item.value]) !== 'null' && String(row[item.value]) !== 'undefined' && String(row[item.value]) !== 'NaN' ? row[item.value] : '-' }}</span>
        <div v-if="item.isCustom" style="text-align: center;">
          <slot name="isCustom" :scope="{ row, $index: rowIndex }" :column="item" />
        </div>
      </template>
    </vxe-column>
    <slot name="columns" />
  </vxe-table>
</template>

<style lang="scss" scoped>
// #f2f6ff
// 表头颜色
::v-deep(.vxe-header--row) {
  background-color: #f2f6ff !important;
}

::v-deep(.row--stripe) {
  background-color: #f2f6ff !important;
}
::v-deep(.vxe-table--scroll-y-top-corner) {
  background-color: #f2f6ff !important;
}

::v-deep(.vxe-body--row) {
  &:hover {
    background-color: #f2f6ff !important;
  }
}
</style>