<template>
  <sar-popup
    :visible="innerVisible"
    :overlay="false"
    :effect="effect"
    :duration="duration"
  >
    <view :class="notifyClass" :style="notifyStyle">{{ message }}</view>
  </sar-popup>
</template>

<script lang="ts">
import { defineComponent as _defineComponent } from "vue";
import { computed, ref, watch, nextTick } from "vue";
import { classNames, stringifyStyle, createBem } from "../utils";
import { useSetTimeout } from "../use";
import { notifyProps } from "./common";
import SarPopup from "../popup/popup.vue";
const __default__ = {
  options: {
    virtualHost: true,
    styleIsolation: "shared"
  }
};
export default /* @__PURE__ */ _defineComponent({
  ...__default__,
  __name: "notify",
  props: notifyProps,
  emits: ["click", "update:visible"],
  setup(__props, { expose: __expose, emit: __emit }) {
    const props = __props;
    const emit = __emit;
    const bem = createBem("notify");
    const effect = computed(() => {
      return {
        top: "slide-top",
        bottom: "slide-bottom"
      }[props.position];
    });
    const innerVisible = ref(props.visible);
    const [hideLater, cancelHide] = useSetTimeout(() => {
      innerVisible.value = false;
      emit("update:visible", false);
    });
    const reHideLater = () => {
      cancelHide();
      nextTick(() => {
        if (props.timeout > 0) {
          hideLater(props.timeout);
        }
      });
    };
    watch(
      () => props.visible,
      () => {
        innerVisible.value = props.visible;
        if (props.visible) {
          if (props.timeout > 0) {
            hideLater(props.timeout);
          }
        }
      }
    );
    __expose({
      reHideLater,
      cancelHide
    });
    const notifyClass = computed(() => {
      return classNames(
        bem.b(),
        bem.m(props.type),
        bem.m(props.position),
        props.rootClass
      );
    });
    const notifyStyle = computed(() => {
      return stringifyStyle(
        {
          backgroundColor: props.background,
          color: props.color
        },
        props.rootStyle
      );
    });
    const __returned__ = { props, emit, bem, effect, innerVisible, hideLater, cancelHide, reHideLater, notifyClass, notifyStyle, SarPopup };
    return __returned__;
  }
});
</script>

<style lang="scss">
@use './index.scss';
</style>