<script setup lang="ts">
import { onMounted, ref } from "vue";
import { Tree, TreeNode } from '@sc/tree';
import { expandAllTreeNode } from '@/utils/frontend/tree';
import useHotRef from '@/composables/useHotRef';
import rawData from '@/constants/tmp/table-data.json'
import tblColMeta from '@/constants/tmp/table-columns-meta'
import { Hot } from "@/types/components";

const { getHotRef, notNull } = useHotRef();
const hotRef = getHotRef();

const tree = new Tree([]);
const tableTreeData: TreeNode[] = tree.data;
const loading = ref(true);
// 模拟异步获取表格数据
setTimeout(() => {
  const hot = hotRef.value as Hot.IHandsontableComponent;
  tree.insert(rawData);
  // tableTreeData.push(...new Tree(rawData).data);
  expandAllTreeNode(tableTreeData);

  loading.value = false;
  hot.Load();
}, 1000);

const tableSettings = {
  columnsMeta: tblColMeta,
  manualRowMove: true,
  // fixedColumnsLeft: 2,
  groupingHeaders: [
    [
      { label: '项目编码', rowspan: 2 },
      { label: '项目名称', rowspan: 2 },
      { label: '计量单位', rowspan: 2 },
      { label: '工程量', rowspan: 2 },
      { label: '初始报价', colspan: 2 },
      { label: '目标造价', colspan: 2 },
      { label: '调整后报价', colspan: 2 },
      { label: '消耗量调整系数', colspan: 5 },
      { label: '子目工程量调整系数', rowspan: 2 },
    ],
    [
      '综合单价',
      '综合合价',
      '综合单价',
      '综合合价',
      '综合单价',
      '综合合价',
      '人工',
      '材料',
      '机械',
      '主材',
      '设备',
    ],
  ],
};

const Render = () => {
  // 重新渲染
  hotRef.value && hotRef.value.Render();
}

defineExpose({
  Render
})
</script>

<template>
  <section class="cost-table">
    <handsontable
      :data="tableTreeData"
      :settings="tableSettings"
      tree
      ref="hotRef"
      :loading="loading"
    />
  </section>
</template>

<style lang="scss" src="./style.scss" scoped></style>
