<script lang="ts"></script>

<script setup lang="tsx">
import type { ToastMessageOptions } from 'primevue/toast';
import { openConfirm, openDialog } from './fns';
</script>

<template>
  <div class="primevue py-4 flex items-start flex-wrap gap-6">
    <ProgressSpinner class="w-6! h-6! m-0!" />
    <FloatLabel>
      <InputText default-value="DEFAULT_VALUE" id="username" />
      <label for="username">Username</label>
    </FloatLabel>

    <FloatLabel>
      <Select
        :options="[
          { name: '纽约', code: 'NY' },
          { name: '罗马', code: 'RM' },
          { name: '伦敦', code: 'LDN' },
          { name: '伊斯坦布尔', code: 'IST' },
          { name: '巴黎', code: 'PRS' },
        ]"
        optionLabel="name"
        class="min-w-[200px]"
      />
      <label>SELECT</label>
    </FloatLabel>

    <FloatLabel w-full>
      <UploadDemo />
      <label>FileUpload</label>
    </FloatLabel>

    <FloatLabel>
      <FileUpload name="demo[]" url="/api/upload" :maxFileSize="1000000" />
      <label>FileUpload</label>
    </FloatLabel>

    <FloatLabel>
      <DatePicker showButtonBar dateFormat="dd/mm/yy" :default-value="new Date()" />
      <label>DatePicker</label>
    </FloatLabel>

    <!-- <Button @click="openToast">提示服务</Button> -->
    <Card>
      <template #title>提示服务</template>
      <template #content>
        <div flex="~ wrap" gap="4">
          <!-- oastService.add({ severity: 'info', summary: '提示', life: 3000, detail: '消息内容' }); -->
          <!-- oastService.add({ severity: 'info', summary: '提示', life: 0, detail: '消息内容' }); -->
          <Button
            outlined
            v-for="severity in [
              'success',
              'info',
              'warn',
              'error',
              'secondary',
              'contrast',
              undefined,
            ] satisfies ToastMessageOptions['severity'][]"
            :key="severity"
            @click="
              ToastService.add({ severity: severity, summary: `severity: ${severity}`, life: 5000, detail: '消息内容' })
            "
          >
            {{ `${severity}` }}
          </Button>
        </div>
      </template>
    </Card>

    <Button @click="openDialog">对话框服务</Button>
    <Button @click="openConfirm">确认服务</Button>
  </div>
</template>
