<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: 'category', title: '类别' },
  { type: 'text', data: 'count', title: '数量' },
  { type: 'text', data: 'totalAmount', title: '合计金额' },
  { type: 'text', data: 'remark', title: '备注' },
])

const settings = {
  columns: columns.value,
}

const mockData = [
  { category: '分部分项', count: '50', totalAmount: '500000', remark: '' },
  { category: '措施项目', count: '20', totalAmount: '100000', remark: '' },
  { category: '其他项目', count: '10', totalAmount: '50000', remark: '' },
  { category: '合计', count: '80', totalAmount: '650000', remark: '' },
]

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

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