<script setup lang="ts">
import { ref } from "vue";
import { PageSearch, usePageSearch } from "/@/components/PageSearch";
import searchConfig from "./config/search.config";
import contentConfig from "./config/content.config";
import { PageContent } from "/@/components/PageContent";
import { httpDetail } from "/@/api/interest/role";
import type { PageContentInstance } from "/@/components/PageContent";
import addEdit from "./addEdit.vue";
const pageContentRef = ref<PageContentInstance | null>(null);
const pageName = "role";

const { handleResetClick, handleSearchClick } = usePageSearch();

const showModel = ref(false);
const itemId = ref("");
const isDetails = ref("add");
const submitRefresh = () => {
  showModel.value = false;
  pageContentRef.value.getPageData();
};
const submitCancel = () => {
  showModel.value = false;
};
function editItem(id, type) {
  itemId.value = id;
  isDetails.value = type;
  showModel.value = true;
}
</script>

<template>
  <!-- <PageAuth :pageName="pageName"> -->
  <PageSearch
    :form-config="searchConfig"
    @search-btn-click="handleSearchClick"
    @reset-btn-click="handleResetClick"
  />
  <PageContent
    ref="pageContentRef"
    :content-config="contentConfig"
    @create-btn-click="() => editItem('', 'create')"
    @preview-btn-click="row => editItem(row.id, 'preview')"
    @update-btn-click="row => editItem(row.id, 'update')"
  />

  <addEdit
    :itemId="itemId"
    :isDetails="isDetails"
    :show-model="showModel"
    @refresh="submitRefresh"
    @cancel="submitCancel"
  />
  <!-- </PageAuth> -->
</template>
