import { defineComponent, inject, ref, watch, unref } from "vue";
import { FormConfig, PageSearch } from "../../PageSearch";
import type { Events, Hooks } from "./types";

import { type ModalConfig, PageModal } from "../../PageModal";

import { Notice } from "../../Notice"

import {
  PageContent,
  type ContentConfig,
  type PageContentInstance
} from "/@/components/PageContent";

const PageContainer = defineComponent({
  name: "PageContainer",
  props: {
    pageName: {
      type: String,
      default: ""
    },
    contentConfig: {
      type: Object as PropType<ContentConfig>
    },
    searchConfig: {
      type: Object as PropType<FormConfig>
    },
    modalConfig: {
      type: Object as PropType<ModalConfig>
    },
    getContentRef: {
      type: Function as PropType<(ref: PageContentInstance) => any>
    },
    getModalRef: {
      type: Function as PropType<(ref: PageContentInstance) => any>
    },
    hooks: {
      type: Object as PropType<Hooks>,
      default: () => ({})
    },
    events: {
      type: Object as PropType<Events>,
      default: () => ({})
    },
    notice: {
      type: Boolean,
      default: true
    },
    isPageStart: {
      type: Boolean,
      default: false
    },
    otherParams: {
      type: Object,
      default: () => ({ })
    },
    onlySelf: {
      type: Boolean,
      default: false
    }
  },
  emits: ["content-select-change"],
  setup(props, { slots, emit, expose }) {
    const loading = ref(false)

    const { pageSearchHook, pageModalHook } = props.hooks as Hooks;
    const search = pageSearchHook ? pageSearchHook() : ({} as any);
    const innerContentRef = search.pageContentRef
      ? search.pageContentRef
      : ref(null);

    const modal = pageModalHook ? pageModalHook(innerContentRef) : ({} as any);
    const innerModalRef = modal.pageModalRef ? modal.pageModalRef : ref(null);
    const { permissions } = inject<AuthProvide>("Auth", {
      permissions: ref([])
    });

    function renderPageContent() {
      const { contentConfig, events, otherParams } = props;
      const { content: contentEvents = {} } = events as any;
      if (!contentConfig) return;
      return (
        <PageContent
          class="h-full"
          onlySelf={props.onlySelf}
          ref={innerContentRef}
          contentConfig={contentConfig}
          powers={permissions.value}
          otherParams={otherParams}
          onLoadingChange={value => loading.value = value}
          onPreviewBtnClick={contentEvents.preview || modal.handlePreviewData}
          onUpdateBtnClick={contentEvents.update || modal.handleUpdateData}
          onCreateBtnClick={contentEvents.create || modal.handleCreateData}
          onSelectionChange={value => emit("content-select-change", value)}
          onGetReuslt={data =>
            contentEvents.result && contentEvents.result(data)
          }
          onGetHandleResult={data => contentEvents.handleResult && contentEvents.handleResult(data) }
          v-slots={{
            table_header: () => slots.content_table_header && slots.content_table_header(),
            header: () => slots.content_header && slots.content_header(),
            title: () => slots.content_title && slots.content_title(),
            custom: row => slots.content_action && slots.content_action(row),
            expand: row => slots.expand && slots.expand(row),
            confirm_button: () => slots.content_confirm_button &&  slots.content_confirm_button
          }}
        />
      );
    }

    function renderPageSearch() {
      const { searchConfig, events} = props;
      const { search: searchEvents = {} } = events as any;
      if (!searchConfig) return null;
      return (
        <PageSearch
          formConfig={searchConfig}
          onlySelf={props.onlySelf}
          onResetBtnClick={searchEvents.reset ? searchEvents.reset : search.handleResetClick}
          onSearchBtnClick={search.handleSearchClick}
          v-slots={{ 
            custom: () => slots.search_field && slots.search_field(),
            action: () => slots.search_action && slots.search_action(),
           }}
        />
      );
    }

    function renderPageModal() {
      const { modalConfig } = props;
      if (!modalConfig) return null;
      return (
        <PageModal
          ref={innerModalRef}
          modalConfig={modalConfig}
          defaultInfo={modal.defaultInfo.value}
          onConfirmBtnClick={modal.handleConfrim}
        />
      );
    }

    watch(
      () => innerContentRef,
      () => {
        const contentRef = unref(innerContentRef);
        const { getContentRef } = props;
        if (contentRef && getContentRef) getContentRef(contentRef);
      },
      { deep: true }
    );

    watch(
      () => innerModalRef,
      () => {
        const modalRef = unref(innerModalRef);
        const { getModalRef } = props;
        if (modalRef && getModalRef) getModalRef(modalRef);
      },
      { deep: true }
    );

    expose({
      getContent: () => innerContentRef
    });


    const list = ['系统需求和问题，请点击右上角工单填写，工程师会逐一回复并处理。','系统需求和问题，请点击右上角工单填写，工程师会逐一回复并处理。']
    return () => {
      return (
        <div class={`w-full h-full  ${props.isPageStart ? 'container-page-start' : ''}`} v-loading={loading.value}>
          {props.notice && <Notice list= {list}  direction="y" duration={5000} /> }
          {renderPageSearch()}
          {renderPageContent()}
          {renderPageModal()}
        </div>
      );
    };
  }
});

export default PageContainer;
