<script setup lang="ts">
// import { usePageSearch } from "/@/components/PageSearch";
import { ref, watch, watchEffect } from "vue";
import TreeMenu from "./components/menu-tree.vue";
import { PageModal, usePageModal } from "/@/components/PageModal";
import contentConfig from "./config/content.config";
import modalConfig from "./config/modal.config";
import { PageContent } from "/@/components/PageContent";
import { IMenuTree } from "./types";
// import { btnList } from "/@/config/btnList";
// import { usePermission PageContentInstance, } from "/@/hooks/usePermission";
// import searchConfig from "./config/search.config";
import type { PageContentInstance } from "/@/components/PageContent";
const pageContentRef = ref<PageContentInstance | null>(null);
const menuid = ref("");
const pageName = "setBtn";
const {
  pageModalRef,
  handleUpdateData,
  handleCreateData,
  handlePreviewData,
  handleConfrim,
  defaultInfo
} = usePageModal({
  pageContentRef,
  confirmCallback: () => ({ menuid: menuid.value })
});

//节点选择
function handleTreeNodeSelect(node: IMenuTree) {
  const { data } = node;
  const { menu_type, id } = data;
  const isPage = menu_type + "" === "2";
  if (!isPage) return;
  menuid.value = id;
  pageContentRef.value.getPageData({ menuid: id });
}

//初始化table
function initTableData(id: string) {
  menuid.value = id;
  pageContentRef.value.getPageData({ menuid: id });
}
</script>

<template>
  <PageAuth :pageName="pageName">
    <div class="main seBtn">
      <el-row>
        <el-col :span="5">
          <TreeMenu
            @tree-select-change="handleTreeNodeSelect"
            @init-table-data="initTableData"
        /></el-col>
        <el-col :span="19" style="padding-left: 18px; background: transparent">
          <PageContent
            ref="pageContentRef"
            :content-config="contentConfig"
            @create-btn-click="handleCreateData"
            @preview-btn-click="row => handlePreviewData(row)"
            @update-btn-click="row => handleUpdateData(row)"
          />
        </el-col>
      </el-row>
      <PageModal
        ref="pageModalRef"
        :modal-config="modalConfig"
        :default-info="defaultInfo"
        @confirm-btn-click="handleConfrim"
      />
    </div>
  </PageAuth>
</template>
