<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">
    <FloatLabel>
      <InputText default-value="DEFAULT_VALUE" id="username" />
      <label for="username">Username</label>
    </FloatLabel>

    <FloatLabel>
      <DatePicker :manualInput="false" inputId="datepicker" showButtonBar dateFormat="dd/mm/yy" />
      <label for="datepicker">DatePicker</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>

    <!-- <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>
    <Paginator
      :template="{
        '640px': 'PrevPageLink CurrentPageReport NextPageLink',
        '960px': 'FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink',
        '1300px': 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink',
        default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink JumpToPageDropdown JumpToPageInput',
      }"
      :rows="10"
      :totalRecords="120"
    >
    </Paginator>

    <ProgressSpinner class="w-6! h-6! m-0!" />

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