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

import { httpActionAll } from "/@/api/system/setBtn";
import { usePermission } from "/@/hooks/core/usePermission";
import PagePower from "/@/components/PagePower/PagePower.vue";

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

const config = ref(modalConfig);

const {
  pageModalRef,
  handleCreateData,
  handleUpdateData,
  handlePreviewData,
  handleConfrim,
  defaultInfo
} = usePageModal({
  pageContentRef,
  confirmCallback: ({ action_id }) => {
    console.log(menuid.value);
    return {
      menu_id: unref(menuid),
      action_id
    };
  }
});

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

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

onMounted(async () => {
  const { code, data } = await httpActionAll({ status: "1" });
  if (code !== 1) return;
  const options = data.map(({ action_name, id }) => ({
    label: action_name,
    value: id
  }));

  config.value.formItems[0].options = options;
});

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

<template>
  <div class="main role">
    <page-power :is-show="hasPermissionWithCode('3')">
      <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>

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