<template>
  <official-account-publish
    v-if="show"
    :topic="topic"
    :background-color="backgroundColor"
    :limit="limit"
    :path="path"
    :show-related="showRelated"
    @publishsuccess="emit('publishsuccess', $event)"
    @publishfail="emit('publishfail', $event)"
  >
  </official-account-publish>
</template>

<script setup lang="ts">
import { waitTimeOut } from '@imengyu/imengyu-utils';
import { ref, watch } from 'vue';

const props = withDefaults( defineProps<{
  topic?: string,
  backgroundColor?: string,
  limit?: number,
  path?: string,
  showRelated?: boolean,
}>(), {
  topic: '亮乡源',
  limit: 10,
  backgroundColor: '#fef2e8',
  showRelated: true,
});

const show = ref(true);
const emit = defineEmits<{
  (e: 'publishsuccess', data: any): void;
  (e: 'publishfail', data: any): void;
}>();

async function recreateComponent() {
  show.value = false;
  await waitTimeOut(200);
  show.value = true;
}

watch(() => props.topic, (newVal) => {
  recreateComponent();
});
</script>