<script setup lang="ts">
// @ts-expect-error - Ignore missing types
import ToastEventBus from 'primevue/toasteventbus';
import type { ToastServiceMethods } from 'primevue/toastservice';

// https://github.com/primefaces/primevue/blob/61929eae7526015af0362fc5889f2af7527403d1/packages/primevue/src/toastservice/ToastService.js
const ToastService: ToastServiceMethods = {
  add: (message) => {
    ToastEventBus.emit('add', message);
  },
  remove: (message) => {
    ToastEventBus.emit('remove', message);
  },
  removeGroup: (group) => {
    ToastEventBus.emit('remove-group', group);
  },
  removeAllGroups: () => {
    ToastEventBus.emit('remove-all-groups');
  },
};
</script>

<template>
  <div class="primevue">
    <Toast />
    <InputText />
    <Select
      :options="[
        { name: 'New York', code: 'NY' },
        { name: 'Rome', code: 'RM' },
        { name: 'London', code: 'LDN' },
        { name: 'Istanbul', code: 'IST' },
        { name: 'Paris', code: 'PRS' },
      ]"
      optionLabel="name"
      placeholder="选择城市"
      class="min-w-[200px]"
    />

    <DatePicker dateFormat="dd/mm/yy" />

    <Button @click="ToastService.add({ severity: 'info', summary: 'Info', detail: 'Message Content', life: 3000 })">
      ToastService
    </Button>
  </div>
</template>

<style>
.p-toast {
  max-width: calc(100% - 50px);
}
.p-toast .p-toast-message-text {
  margin-top: -0.2rem;
}
</style>
