<template>
<div>
  <Message :showIcon="false" :class="tipClassName" ref="message" :customStyle="customStyle"></Message>
</div>
</template>

<script lang="ts">
export default {
  options: {
    virtualHost: true,
    styleIsolation: "shared",
  }
}
</script>

<script setup lang="ts">
import { watch, ref, computed, toRefs } from '../../../../adapter-vue';
import Message from '../../base/Message/Message.vue';
import { TipProps } from './Tip';
import { useFloatWindowContext, useTip } from '../../../hooks';
import { filterObject } from '../../base/util';

const { isFloatWindow } = toRefs(useFloatWindowContext());
const { tip, duration } = useTip();
const message = ref(null);
const props = defineProps(TipProps);

const tipClassName = computed(() => [
  props.customClass,
]);

const customStyle = computed(() => filterObject({
  color: 'white',
  background: 'none',
  position: 'static',
  transform: 'none',
  'font-size': isFloatWindow.value ? '12px' : undefined,
}));

watch( 
  tip,
  () => {
    message.value?.show({
      message: tip.value,
      duration: duration.value,
      offset: 0,
    })
  }
)
</script>

