<script lang="ts" setup>
defineEmits(['submit'])
</script>

<template>
  <Drawer>
    <DrawerTrigger as-child class="min-w-[20rem]">
      <Button variant="ghost" size="icon" class="md:hidden">
        <Settings class="size-4" />
        <span class="sr-only">参数设置</span>
      </Button>
    </DrawerTrigger>
    <DrawerContent class="max-h-[80vh]">
      <DrawerHeader>
        <DrawerTitle />
      </DrawerHeader>
      <form class="grid min-w-[20rem] w-full items-start gap-6 overflow-auto p-4 pt-0">
        <fieldset class="grid gap-6 border rounded-lg p-4">
          <legend class="px-1 text-sm font-medium -ml-1">
            参数设置
          </legend>
          <div class="grid gap-3">
            <slot />
            <Button type="submit" class="mt-5 w-full" @click.prevent="$emit('submit')">
              绘制
            </Button>
          </div>
        </fieldset>
      </form>
    </DrawerContent>
  </Drawer>
</template>
