<script setup lang="ts">
import { PageSearch, usePageSearch } from "/@/components/PageSearch";
import searchConfig from "./config/search.config";
import { ref } from "vue";
import TreeMenu from "./components/menu-tree.vue";
import contentConfig from "./config/content.config";
import { PageContent } from "/@/components/PageContent";
import { IMenuTree } from "./types";
import { usePermission } from "/@/hooks/usePermission";
import EditModel from "./components/edit-dialog.vue";
const { pageContentRef, handleResetClick, handleSearchClick } = usePageSearch(
  undefined,
  undefined,
  searchConfig
);
const modelRef = ref<InstanceType<typeof EditModel>>(null);
const menuid = ref("");
const pageName = "setBtn";

const { hasPermissionWithCode, permissions } = usePermission(pageName);
//节点选择
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 });
}
function handleAddChangeCheck(item: any, id: string, type: string) {
  modelRef.value.show(item, id, type, menuid.value);
}
</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">
          <PageSearch
            :form-config="searchConfig"
            @search-btn-click="handleSearchClick"
            @reset-btn-click="handleResetClick"
          >
            <template #action>
              <el-button
                type="primary"
                @click="handleAddChangeCheck({}, '', 'create')"
                v-if="hasPermissionWithCode('002')"
              >
                新增
              </el-button>
            </template>
          </PageSearch>
          <PageContent
            ref="pageContentRef"
            :powers="permissions"
            :content-config="contentConfig"
            @preview-btn-click="
              row => handleAddChangeCheck(row, row.id, 'view')
            "
            @update-btn-click="row => handleAddChangeCheck(row, row.id, 'edit')"
          />
        </el-col>
      </el-row>
      <EditModel ref="modelRef" @reload="pageContentRef.onSearch()" />
    </div>
  </PageAuth>
</template>
