<script setup lang="ts">
import { type VxeGridInstance, type VxeGridProps } from 'vxe-table'
import { useRowClickStyle } from '@/hooks/rowClickStyle'

const tableData = ref<VxeGridProps<any>>({
  border: true,
  minHeight: 70,
  maxHeight: 440,
  columns: [
    {
      field: 'milestones',
      title: 'Milestones',
      minWidth: 120
    },
    {
      field: 'dateTime',
      title: 'Date Time',
      minWidth: 80
    },
    {
      field: 'locations',
      title: 'Locations',
      minWidth: 80
    },
    {
      field: 'remarks',
      title: 'Remarks',
      minWidth: 80
    }
  ],
  data: [
    {
      milestones: 'Milestone 1',
      dateTime: 'Jun-08-2024 12:00 AM',
      locations: 'Shenzhen',
      remarks: 'Remarks 1'
    },
    {
      milestones: 'Milestone 2',
      dateTime: 'Jun-10-2024 12:00 AM',
      locations: 'Valencia',
      remarks: 'Remarks 2'
    }
  ],
  scrollY: { enabled: true, oSize: 20, gt: 30 },
  stripe: true,
  emptyText: ' ',
  showHeaderOverflow: true,
  showOverflow: true,
  headerRowStyle: {
    backgroundColor: 'var(--color-table-header-bg)'
  },
  columnConfig: { resizable: true, useKey: true },
  rowConfig: { isHover: true }
})

const tableRef = ref<VxeGridInstance | null>(null)
// 实现行点击样式
useRowClickStyle(tableRef)
</script>

<template>
  <div class="containers">
    <vxe-grid ref="tableRef" :style="{ border: 'none' }" v-bind="tableData"> </vxe-grid>
  </div>
</template>

<style lang="scss" scoped>
.containers {
  padding: 8px 16px 16px;
}
</style>
