<template>
  <a-modal
    :open="open"
    title="添加页面"
    ok-text="添加"
    cancel-text="取消"
    :confirm-loading="loading"
    @update:open="emit('update:open', $event)"
    @ok="emit('ok')"
  >
    <a-form layout="vertical" class="add-page-form">
      <a-form-item label="key（页面唯一标识）" required>
        <a-input
          :model-value="modelKey"
          placeholder="如 home、list_1"
          allow-clear
          @update:model-value="emit('update:modelKey', $event)"
        />
      </a-form-item>
      <a-form-item label="title（页面标题）" required>
        <a-input
          :model-value="modelTitle"
          placeholder="如 首页、列表页"
          allow-clear
          @update:model-value="emit('update:modelTitle', $event)"
        />
      </a-form-item>
      <a-form-item v-if="template" label="模板">
        <span>{{ template }}</span>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import type { PageTemplateType } from '../composables/usePageList';

defineProps<{
  open: boolean;
  modelKey: string;
  modelTitle: string;
  template: PageTemplateType | null;
  loading: boolean;
}>();

const emit = defineEmits<{
  (e: 'update:open', v: boolean): void;
  (e: 'update:modelKey', v: string): void;
  (e: 'update:modelTitle', v: string): void;
  (e: 'ok'): void;
}>();
</script>
