<template>
  <n-modal :auto-focus="false" v-model:show="internalVisible">
    <n-card
      :style="cardStyle"
      :bordered="false"
      :size="size"
      role="dialog"
      aria-modal="true"
    >
      <template #header>
        <div class="custom-title">
          <div class="relative">
            {{ title }}
            <n-button
              v-if="generatedRandomly"
              text
              style="
                width: 161px;
               
                position: absolute;
                left: calc(50% + 40px);
                top: 50%;
                transform: translateY(-50%);
              "
              type="primary"
              class="fl-ml-md"
              :loading="state.btnLoading"
              @click="handleGeneratedRandomly"
              >随机生成</n-button
            >
          </div>
        </div>
      </template>
      <template #header-extra>
        <slot name="header-extra"></slot>
      </template>
      <slot></slot>
      <template #footer>
        <slot name="footer"></slot>
      </template>
    </n-card>
  </n-modal>
</template>

<script setup>
import { defineProps, defineEmits, ref, watch, reactive } from "vue";
// 定义组件的 props
const props = defineProps({
  show: {
    type: Boolean,
    required: true,
  },
  title: {
    type: String,
    default: "",
  },
  size: {
    type: String,
    default: "large",
  },
  cardStyle: {
    type: Object,
    default: () => ({ width: "76vw", height: "80vh", overflow: "auto" }),
  },
  generatedRandomly: {
    type: Boolean,
    default: false,
  },
  btnLoading: {
    type: Boolean,
    default: false,
  },
});
const state = reactive({
  btnLoading: false,
});
watch(
  () => props.btnLoading,
  () => {
    state.btnLoading = props.btnLoading;
  }
);
// 定义组件的 emits
const emit = defineEmits(["update:show", "triggerGeneratedRandomly"]);

// 内部状态，绑定到 n-modal 的 v-model:show 上
const internalVisible = ref(props.show);

// 监听 props.show 的变化，更新 internalVisible
watch(
  () => props.show,
  (newVal) => {
    internalVisible.value = newVal;
  }
);

// 监听 internalVisible 的变化，触发 update:show 事件
watch(internalVisible, (newVal) => {
  emit("update:show", newVal);
});
const handleGeneratedRandomly = () => {
  state.btnLoading = true;
  emit("triggerGeneratedRandomly");
};
</script>

<style scoped>
.custom-title {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
}
</style>
