<template>
  <view :class="['Mall4j component-toast-pop',{show:props.value}]">
    <view
      v-if="options.mask"
      class="toast-pop-mask"
    />
    <view class="toast-pop-main">
      <view
        v-if="options.icon"
        class="succeed"
      />
      <view class="pop-content">
        {{ options.title }}
      </view>
    </view>
  </view>
</template>

<script setup>
const emit = defineEmits(['update:value'])
const props = defineProps({
  value: {
    type: Boolean,
    default: false
  },
  options: {
    type: Object,
    default: () => ({
      mask: false,
      icon: false,
      title: '提示文本',
      duration: 1500
    })
  }
})
watch(() => props.value, (val) => {
  if (val) {
    setTimeout(() => {
      emit('update:value', false)
    }, props.options.duration)
  }
})

</script>

<style lang="scss" scoped>
  @use './pop-toast.scss';
</style>
