<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: 'baseType', title: '基数类型' },
  { type: 'text', data: 'quantity', title: '数量' },
  { type: 'text', data: 'unit', title: '单位' },
  { type: 'text', data: 'laborCost', title: '人工费' },
  { type: 'text', data: 'materialCost', title: '材料费' },
  { type: 'text', data: 'machineCost', title: '机械费' },
  { type: 'text', data: 'totalCost', title: '合计' }
])

const mockData = () => {
  const categories = ['人工', '材料', '机械', '其他']
  const baseTypes = ['直接费', '间接费', '利润', '税金']
  return Array.from({ length: 12 }, (_, index) => ({
    category: categories[index % categories.length],
    baseType: baseTypes[index % baseTypes.length],
    quantity: (Math.random() * 100 + 10).toFixed(2),
    unit: '元',
    laborCost: (Math.random() * 10000 + 1000).toFixed(2),
    materialCost: (Math.random() * 20000 + 2000).toFixed(2),
    machineCost: (Math.random() * 15000 + 1500).toFixed(2),
    totalCost: (Math.random() * 50000 + 5000).toFixed(2)
  }))
}

const settings = {
  data: mockData(),
  columns: columns.value,
  colWidths: 120,
  height: 400
}

onMounted(() => {
  console.log('BaseSummary mounted')
})

defineExpose({ hstRef })
</script>

<template>
  <div class="base-summary">
    <DbHst ref="hstRef" :settings="settings" />
  </div>
</template>

<style scoped>
.base-summary {
  width: 100%;
  height: 100%;
}
</style>
