<template>
  <Fieldset
    legend="Form 1"
    pt:content:class="flex justify-center"
  >

    <form
      class="flex flex-col gap-4 w-full"
      @submit.prevent="onFormSubmit"
    >

      <div class="flex flex-col gap-2">
        <label for="username">Username</label>
        <InputText
          id="username"
          type="text"
          placeholder="Username"
          fluid
          :invalid="true"
        />
        <Message
          icon="pi pi-key"
          severity="warn"
          size="small"
          variant="simple"
        >消息 warn</Message>
      </div>

      <FormField
        name="FormField"
        initialValue="1"
        class="flex flex-col gap-2"
      >
        <label
          for="password"
          class="font-bold block mb-2"
        >Password</label>
        <Password
          name="password"
          placeholder="Password"
          :feedback="false"
          toggleMask
          fluid
        />
        <Message
          severity="error"
          size="small"
          variant="simple"
        >
          <ul class="my-0 px-4 flex flex-col gap-1">
            <li
              v-for="(error, index) in [
                { message: '错误1' },
                { message: '错误2' }
              ]"
              :key="index"
            >{{ error.message }}</li>
          </ul>
        </Message>

      </FormField>

      <Button
        type="submit"
        severity="secondary"
        label="Submit"
      />
    </form>
  </Fieldset>
</template>

<script setup lang="ts">
import Message from 'primevue/message';

function onFormSubmit(...args: any[]) {
  console.debug(`args :>> `, args);
  console.log('Form submitted');
}
</script>
