<script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from "vue";
import SubjectTree from "./components/subject-tree/SubjectTree.vue";
import ToolBar from "./components/tool-bar/ToolBar.vue";
import CostTable from "./components/cost-table/CostTable.vue";
import BottomTabs from "./components/bottom-tabs/BottomTabs.vue";
import StdBill from "./components/std-bill/StdBill.vue";
import LibRation from "./components/lib-ration/LibRation.vue";
import { SubjectTreeNodeType } from '@/constants/subject'
import { Subject } from "@/types/subject";
import useSummaryLayout from './scripts/useSummaryLayout'
import { registerRefreshCallback } from '@/composables/useRefresh'

// 布局相关代码
const {
  subjectTreeSize,
  mainContentSize,
  mainLeftSize,
  mainRightSize,
  mainLeftTopSize,
  mainLeftBottomSize,
  rightStdBillVisible,
  rightLibRationVisible,

  costTableRef,
  bottomTabsRef,
  stdBillRef,
  libRationRef,

  handleSubjectTreeSize,
  handleMainContentSize,
  handleMainLeftSize,
  handleMainRightSize,
  handleMainLeftTopSize,
  handleMainLeftBottomSize,
} = useSummaryLayout()

const loading = ref(true)

// 侧边树结构数据
const treeData = reactive<Subject.ISubjectTreeNode[]>([])

onMounted(async () => {
  setTimeout(() => {
    treeData.push({
      id: '1',
      label: '市妇幼保健院新址配套市政道路',
      icon: 'dsk-city-one',
      type: SubjectTreeNodeType.CONSTRUCTION,
      children: [
        {
          id: '1.1',
          label: '单项工程1',
          icon: 'dsk-home-two',
          type: SubjectTreeNodeType.SINGLE,
          children: [
            {
              id: '1.1.1',
              label: '单位工程1.1',
              type: SubjectTreeNodeType.UNIT,
            },
            {
              id: '1.1.2',
              label: '单位工程1.2',
              type: SubjectTreeNodeType.UNIT,
            },
          ],
        },
        {
          id: '1.2',
          label: '单项工程2',
          icon: 'dsk-home-two',
          type: SubjectTreeNodeType.SINGLE,
          children: [
            {
              id: '1.2.1',
              label: '单位工程2.1',
              type: SubjectTreeNodeType.UNIT,
            },
            {
              id: '1.2.2',
              label: '单位工程2.2',
              type: SubjectTreeNodeType.UNIT,
            },
          ],
        },
      ],
    })

    loading.value = false
  }, 1000);
})

const mainLayout = ref<ResizableLayout.IResizableLayoutComponent>()
const handleRightVisibleChange = async (needRender: boolean) => {
  if (needRender) {
    setTimeout(() => {
      costTableRef.value && costTableRef.value.Render();
      bottomTabsRef.value && bottomTabsRef.value.Render();
    }, 100)
  }
  mainLayout.value && mainLayout.value.Refresh()
}

// 顶部刷新按钮点击事件
registerRefreshCallback(() => {
  console.log('summary 顶部刷新按钮被点击了')
})
</script>

<template>
  <article class="summary-page" v-loading="loading">
    <resizable-layout>
      <resizable-layout-item
        :weight="subjectTreeSize"
        :min-width="180"
        @resize="handleSubjectTreeSize"
      >
        <!-- 左侧项目结构树 -->
        <subject-tree :tree-data="treeData" />
      </resizable-layout-item>
      <resizable-layout-item
        :weight="mainContentSize"
        :min-width="500"
        @resize="handleMainContentSize"
      >
        <!-- 工具栏 -->
        <tool-bar @right-visible-change="handleRightVisibleChange" />
        <resizable-layout style="height: calc(100% - 41px)" ref="mainLayout">
          <resizable-layout-item
            :weight="mainLeftSize"
            :min-width="150"
            @resize="handleMainLeftSize"
          >
            <resizable-layout direction="vertical">
              <resizable-layout-item
                :weight="mainLeftTopSize"
                :min-height="100"
                @resize="handleMainLeftTopSize"
              >
                <!-- 造价书表格 -->
                <cost-table ref="costTableRef" />
              </resizable-layout-item>
              <resizable-layout-item
                :weight="mainLeftBottomSize"
                :min-height="100"
                @resize="handleMainLeftBottomSize"
              >
                <!-- 底部 tabs -->
                <bottom-tabs ref="bottomTabsRef" />
              </resizable-layout-item>
            </resizable-layout>
          </resizable-layout-item>
          <!-- 右侧布局：标准清单 -->
          <resizable-layout-item
            :weight="mainRightSize"
            :min-width="150"
            @resize="handleMainRightSize"
            v-if="rightStdBillVisible"
          >
            <std-bill ref="stdBillRef" />
          </resizable-layout-item>
          <!-- 右侧布局：定额库 -->
          <resizable-layout-item
            :weight="mainRightSize"
            :min-width="150"
            @resize="handleMainRightSize"
            v-if="rightLibRationVisible"
          >
            <lib-ration ref="libRationRef" />
          </resizable-layout-item>
        </resizable-layout>
      </resizable-layout-item>
    </resizable-layout>
  </article>
</template>

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