<template>
  <Teleport to="body">
    <div v-if="open" class="workflow-drawer-mask" @click.self="emit('close')">
      <aside class="workflow-drawer form-drawer" :class="drawerClass" :aria-describedby="description ? descriptionId : undefined">
        <header class="workflow-drawer-head">
          <div>
            <p class="eyebrow">{{ eyebrow }}</p>
            <div class="drawer-title-row" :title="description || undefined">
              <h3>{{ title }}</h3>
            </div>
            <p v-if="description" :id="descriptionId" class="form-drawer-description">{{ description }}</p>
          </div>
          <div class="workflow-drawer-head-actions">
            <span v-if="tag" class="panel-tag">{{ tag }}</span>
            <button class="ghost-button icon-button" type="button" aria-label="关闭" title="关闭" @click="emit('close')">
              <AppIcon name="close" />
            </button>
          </div>
        </header>

        <section class="workflow-section-card form-drawer-body">
          <slot />
        </section>
      </aside>
    </div>
  </Teleport>
</template>

<script setup>
import { computed, toRef, useId } from "vue";

import { useBodyScrollLock } from "../composables/useBodyScrollLock";
import AppIcon from "./AppIcon.vue";

const props = defineProps({
  open: {
    type: Boolean,
    default: false
  },
  eyebrow: {
    type: String,
    default: "资料维护"
  },
  title: {
    type: String,
    required: true
  },
  description: {
    type: String,
    default: ""
  },
  tag: {
    type: String,
    default: ""
  },
  wide: {
    type: Boolean,
    default: false
  },
  size: {
    type: String,
    default: "normal"
  }
});

const emit = defineEmits(["close"]);
const descriptionId = `form-drawer-description-${useId()}`;

const drawerClass = computed(() => {
  const normalizedSize = ["normal", "wide", "xl", "fullscreen"].includes(props.size) ? props.size : "normal";
  return {
    "form-drawer-wide": props.wide || normalizedSize === "wide",
    "form-drawer-xl": normalizedSize === "xl",
    "form-drawer-fullscreen": normalizedSize === "fullscreen"
  };
});

useBodyScrollLock(toRef(props, "open"));
</script>
