<script setup lang="ts">
import { computed, ref } from "vue";
import Description from "./description.vue";
import { ActionType } from "/@/components/PageContent";
import { createBasicTitle } from "./utils/create-basic-title";
import { modalProps } from "./types";

const props = defineProps(modalProps);
// const emit = defineEmits(["confirmBtnClick"]);

const type = ref<ActionType>("preview");
const dialogVisible = ref(false);
const confirmLoading = ref(false);

//状态是否处于预览详情
const isPreview = computed(() => type.value === "preview");

const title = computed(() => {
  const basicTitle = createBasicTitle(type.value);
  return type.value === "preview"
    ? props.modalConfig.title + basicTitle
    : basicTitle + props.modalConfig.title;
});

const width = computed(() => {
  return props.modalConfig.width;
});

defineExpose({
  dialogVisible,
  confirmLoading,
  type
});
</script>

<template>
  <el-dialog
    :title="title"
    v-model="dialogVisible"
    center
    top="8vh"
    destroy-on-close
    :width="width ? width : '1024px'"
  >
    <!--插槽  -->
    <template v-if="!isPreview">
      <slot />
    </template>
    <Description
      v-if="isPreview"
      :config="modalConfig"
      :default-info="defaultInfo"
    />
  </el-dialog>
</template>
