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

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

const topHstRef = ref<any>(null)
const bottomHstRef = ref<any>(null)

// 第一个表格：调整、附注名称、附注内容
const topColumns = ref<any[]>([
  { type: 'checkbox', data: 'adjustment', title: '调整' },
  { type: 'text', data: 'noteName', title: '附注名称' },
  { type: 'text', data: 'noteContent', title: '附注内容' }
])

const topMockData = () => {
  return Array.from({ length: 10 }, (_, index) => ({
    adjustment: index % 2 === 0, // checkbox 类型使用 boolean 值
    noteName: `附注${index + 1}`,
    noteContent: `附注内容说明${index + 1}`
  }))
}

const topSettings = {
  data: topMockData(),
  columns: topColumns.value,
  colWidths: 150,
  height: 135
}

// 第二个表格：名称、定额值、实际值
const bottomColumns = ref<any[]>([
  { type: 'text', data: 'name', title: '名称' },
  { type: 'text', data: 'quotaValue', title: '定额值' },
  { type: 'text', data: 'actualValue', title: '实际值' }
])

const bottomMockData = () => {
  return Array.from({ length: 10 }, (_, index) => ({
    name: `项目${index + 1}`,
    quotaValue: (Math.random() * 100 + 10).toFixed(2),
    actualValue: (Math.random() * 100 + 10).toFixed(2)
  }))
}

const bottomSettings = {
  data: bottomMockData(),
  columns: bottomColumns.value,
  colWidths: 150,
  height: 135
}

watch(
  () => props.height,
  (newHeight) => {
    console.log('QuotaAdjustment newHeight', newHeight)
    if (newHeight) {
      const tableHeight = (newHeight - 50 - 15) / 2 // 平均分配给两个表格
      
      if (topHstRef.value?.hotInstance) {
        topHstRef.value.hotInstance.updateSettings({
          height: tableHeight
        })
        topHstRef.value.hotInstance.render()
      }
      
      if (bottomHstRef.value?.hotInstance) {
        bottomHstRef.value.hotInstance.updateSettings({
          height: tableHeight
        })
        bottomHstRef.value.hotInstance.render()
      }
    }
  },
  { immediate: true }
)

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

defineExpose({ topHstRef, bottomHstRef })
</script>

<template>
  <div class="w-full h-full flex flex-col gap-2">
    <div class="flex-1">
      <DbHst ref="topHstRef" :settings="topSettings" />
    </div>
    <div class="flex-1">
      <DbHst ref="bottomHstRef" :settings="bottomSettings" />
    </div>
  </div>
</template>

<style scoped>
</style>
