<script setup lang="ts">
import { computed, nextTick, ref } from "vue";
import { PageSearch, usePageSearch } from "/@/components/PageSearch";
import { modalProps } from "./types";
import { PageContent } from "/@/components/PageContent";

const props = defineProps(modalProps);
const modelTitle = computed(() => props.modalConfig.title);
const searchConfig = computed(() => props.modalConfig.searchConfig);
const contentConfig = computed(() => props.modalConfig.contentConfig);
const { pageContentRef, handleResetClick, handleSearchClick } = usePageSearch(
  undefined,
  undefined,
  searchConfig
);

// console.log(modelTitle);
// console.log(searchConfig);
// console.log(contentConfig);
const dialogVisible = ref(false);
async function show(id) {
  dialogVisible.value = true;
  nextTick(() => {
    if (pageContentRef.value) {
      console.log("value" + id);
      pageContentRef.value.getPageData({ id: id });
    }
  });
}
defineExpose({
  show
});
</script>

<template>
  <el-dialog
    :title="modelTitle"
    :close-on-press-escape="false"
    v-model="dialogVisible"
    center
    append-to-body
    destroy-on-close
    width="1040px"
  >
    <PageSearch
      :form-config="searchConfig"
      @search-btn-click="handleSearchClick"
      @reset-btn-click="handleResetClick"
    />
    <PageContent ref="pageContentRef" :content-config="contentConfig" />
  </el-dialog>
</template>
