<template>
  <sar-notify
    :root-style="innerProps.rootStyle"
    :root-class="innerProps.rootClass"
    v-model:visible="innerProps.visible"
    :type="innerProps.type"
    :message="innerProps.message"
    :color="innerProps.color"
    :background="innerProps.background"
    :position="innerProps.position"
    :duration="innerProps.duration"
    ref="elRef"
  />
</template>

<script lang="ts">
import { defineComponent as _defineComponent } from "vue";
import { onMounted, onUnmounted, ref } from "vue";
import SarNotify from "../notify/notify.vue";
import { notifyAgentProps, mapIdImperative } from "./common";
const __default__ = {
  options: {
    virtualHost: true,
    styleIsolation: "shared"
  }
};
export default /* @__PURE__ */ _defineComponent({
  ...__default__,
  __name: "notify-agent",
  props: notifyAgentProps,
  setup(__props, { expose: __expose }) {
    __expose();
    const props = __props;
    const innerProps = ref({ ...props });
    const elRef = ref();
    const imperative = {
      show(newProps) {
        innerProps.value = {
          ...props,
          ...newProps,
          visible: true
        };
        elRef.value?.reHideLater();
      },
      hide() {
        innerProps.value = {
          ...innerProps.value,
          visible: false
        };
        elRef.value?.cancelHide();
      }
    };
    onMounted(() => {
      if (innerProps.value.id) {
        mapIdImperative[innerProps.value.id] = imperative;
      }
    });
    onUnmounted(() => {
      if (innerProps.value.id) {
        delete mapIdImperative[innerProps.value.id];
      }
    });
    const __returned__ = { props, innerProps, elRef, imperative, SarNotify };
    return __returned__;
  }
});
</script>
