<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { DbHst } from '#/components/db-hst'

const hstRef = ref<any>(null)

const columns = ref<any[]>([
  { type: 'text', data: 'code', title: '编码' },
  { type: 'text', data: 'name', title: '其他项目名称' },
  { type: 'text', data: 'type', title: '类型' },
  { type: 'text', data: 'amount', title: '金额' },
])

const settings = {
  columns: columns.value,
}

const mockData = Array.from({ length: 20 }, (_, index) => ({
  code: `OTH${String(index + 1).padStart(6, '0')}`,
  name: `其他项目${index + 1}`,
  type: '其他',
  amount: `${(index + 1) * 500}`,
}))

onMounted(() => {
  setTimeout(() => {
    if (hstRef.value) {
      hstRef.value.loadData(mockData)
    }
  }, 100)
})
</script>

<template>
  <div class="h-full">
    <DbHst ref="hstRef" :settings="settings" />
  </div>
</template>
