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

const props = defineProps<{
  height?: number
}>()

const hstRef = ref<any>(null)

const columns = ref<any[]>([
  { type: 'text', data: 'code', title: '编码' },
  { type: 'text', data: 'name', title: '名称' },
  { type: 'text', data: 'spec', title: '型号规格' },
  { type: 'text', data: 'unit', title: '单位' },
  { type: 'text', data: 'category', title: '类别' },
  { type: 'text', data: 'taxRate', title: '税率' },
  { type: 'text', data: 'basePriceExTax', title: '除税基价' },
  { type: 'text', data: 'basePriceInTax', title: '含税基价' },
  { type: 'text', data: 'compilePriceExTax', title: '除税编制价' },
  { type: 'text', data: 'compilePriceInTax', title: '含税编制价' },
  { type: 'text', data: 'quotaQuantity', title: '定额消耗量' },
  { type: 'text', data: 'adjustQuantity', title: '调整消耗量' }
])

const mockData = () => {
  const categories = ['人', '人机', '材', '机']
  const units = ['工日', 't', 'm³', 'kg', 'm²']
  return Array.from({ length: 20 }, (_, index) => ({
    code: `SUB${String(index + 1).padStart(6, '0')}`,
    name: `子目项${index + 1}`,
    spec: `规格${index + 1}`,
    unit: units[index % units.length],
    category: categories[index % categories.length],
    taxRate: `${(Math.random() * 5 + 8).toFixed(2)}%`,
    basePriceExTax: (Math.random() * 1000 + 100).toFixed(2),
    basePriceInTax: (Math.random() * 1100 + 110).toFixed(2),
    compilePriceExTax: (Math.random() * 1200 + 120).toFixed(2),
    compilePriceInTax: (Math.random() * 1300 + 130).toFixed(2),
    quotaQuantity: (Math.random() * 10 + 1).toFixed(3),
    adjustQuantity: (Math.random() * 10 + 1).toFixed(3)
  }))
}

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

watch(
  () => props.height,
  (newHeight) => {
    console.log('SubItemMaterials newHeight', newHeight)
    if (newHeight && hstRef.value?.hotInstance) {
      hstRef.value.hotInstance.updateSettings({
        height: newHeight - 50 - 15// 减去 tabs 头部和 padding 的高度,滚动条
      })
      hstRef.value.hotInstance.render()
    }
  },
  { immediate: true }
)

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

defineExpose({ hstRef })
</script>

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

<style scoped>
</style>
