<script setup lang="ts">
import { ref, unref } from "vue";
import TreeMenu from "./components/menu-tree.vue";
import { PageModal, usePageModal } from "/@/components/PageModal";
import { PageContent, PageContentInstance } from "/@/components/PageContent";
import { usePermission } from "/@/hooks/core/usePermission";
import contentConfig from "./config/content.config";
import modalConfig from "./config/modal.config";
import btnList from "/@/utils/btnList";
import { IMenuTree } from "./types";

const menuid = ref("");
const pageContentRef = ref<PageContentInstance>(null);

const {
  handlePreviewData,
  handleCreateData,
  handleUpdateData,
  handleConfrim,
  pageModalRef,
  defaultInfo
} = usePageModal({ pageContentRef, confirmCallback: ({ action_code }) => ({
    action_name: btnList.find(b => Number(b.code) ===  Number(action_code))?.name,
    menuid: unref(menuid)
  })
});

//节点选择
function handleTreeNodeSelect(node: IMenuTree) {
  const { pid, id } = node;
  const isPage = String(pid) !== '0';
  if (!isPage) return;
  menuid.value = id;
  pageContentRef.value.getPageData({ id });
}

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

const { permissions, hasPermissionWithCode } = usePermission("setBtn");
</script>

<template>
  <div class="main role">
    <PagePower :isShow="hasPermissionWithCode('001')">
      <div w-full flex>
        <TreeMenu
          @tree-select-change="handleTreeNodeSelect"
          @init-table-data="initTableData"
        />
        <PageContent
          ref="pageContentRef"
          :powers="permissions"
          :content-config="contentConfig"
          @create-btn-click="handleCreateData"
          @preview-btn-click="handlePreviewData"
          @update-btn-click="handleUpdateData"
        />
      </div>
    </PagePower>

    <PageModal
      ref="pageModalRef"
      :modal-config="modalConfig"
      :default-info="defaultInfo"
      @confirm-btn-click="handleConfrim"
    />
  </div>
</template>
