<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: 'unit', title: '单位' },
  { type: 'text', data: 'quantity', title: '工程量' },
])

const settings = {
  columns: columns.value,
}

const mockData = Array.from({ length: 20 }, (_, index) => ({
  code: `SUB${String(index + 1).padStart(6, '0')}`,
  name: `分部分项${index + 1}`,
  unit: 'm²',
  quantity: `${(index + 1) * 10}`,
}))

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

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