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

<script setup lang="tsx">
import { DialogService, ToastService } from '@/utils/primevue';
import dialogContent from './dialog-content.vue';

const dynamicComponent = defineComponent({
  props: {
    'defining-props': {
      type: Object as PropType<Record<string, unknown>>,
      default: () => ({}),
    },
  },
  setup(props, ctx) {
    const dialogRef = inject<ComputedRef<DynamicDialogOptions>>('dialogRef');
    return () => (
      <div>
        <button onClick={() => ctx.emit('close')}>emit('close')</button> <hr />
        <pre>{JSON.stringify({ 'dialogRef?.data': dialogRef!.value.data }, null, 2)}</pre> <hr />
        <div>PrimeVue DynamicDialog</div> <hr />
        <pre>{`${JSON.stringify({ 'ctx.attrs': ctx, props }, null, 2)}`}</pre> <hr />
        <pre>{JSON.stringify({ "inject('dialogRef')": dialogRef!.value }, null, 2)}</pre> <hr />
      </div>
    );
  },
});

// https://primevue.org/dynamicdialog/
const openDialog = async () => {
  const dialog1 = DialogService.open(dynamicComponent, {
    props: {
      header: 'Header1 可以拖动',
      position: 'bottomleft',
      draggable: true,
      pt: { mask: { class: 'backdrop-blur-sm' } }, // 相当于: 'pt:mask:class': 'backdrop-blur-sm',
    },
    data: {
      用inject接收: '定义在-DynamicDialogOptions.data-的数据',
    },
    emits: {
      // https://github.com/primefaces/primevue/blob/bd7161298a472c8cd954e35e6a538a8bd1b1b386/packages/primevue/src/dynamicdialog/DynamicDialog.vue#L5
      //   ↑v-bind="instance.options.emits", 所以 props 也可以通过 emits 传递给 content 的组件
      'defining-props': {
        '用-props-接收': '定义在-DynamicDialogOptions.emits-的数据',
      },
      绑定给组件的attrs: '定义在-DynamicDialogOptions.emits-的数据，',
      onClose: () => dialog1.close(),
    },
  });

  await nextTick();
  // if ($__DEV__) return;

  await new Promise((resolve) => setTimeout(resolve, 300));
  DialogService.open(dialogContent, {
    props: {
      header: 'Header2',
      position: 'bottomright',
      // draggable: false, // Header1的 draggable: true 会影响 Header2，如果指定 draggable: false，则不会受到影响。
    },
  });
};
const openToast = () => {
  ToastService.add({ severity: 'info', summary: 'Info', detail: 'Message Content', life: 3000 });
};
</script>

<template>
  <div class="primevue">
    <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="openToast"> ToastService </Button>
    <Button @click="openDialog"> DialogService </Button>
  </div>
</template>

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