import { defineComponent, ref, onMounted, onBeforeUnmount } from 'vue';
import './index.wsyd.scss';

export default defineComponent({
  name: 'HomePopup',
  setup() {
    const isQA = ref(false); // 使用 ref 来管理状态

    const receiveMessageFromChild = (event: MessageEvent) => {
      const msg = event.data;
      if (msg === '互动体验') {
        isQA.value = true; // 更新状态
      } else {
        isQA.value = false;
      }
    };

    onMounted(() => {
      window.addEventListener('message', receiveMessageFromChild);
    });

    onBeforeUnmount(() => {
      window.removeEventListener('message', receiveMessageFromChild);
    });

    return () => (
      <div id="popup">
        <div class={['popup-wrap', isQA.value && 'popup-wrap-QA']}>
          <div class="popup-content"></div>
          <div id={isQA.value ? 'closepop-QA' : 'closepop'}>close</div>
        </div>
      </div>
    );
  },
});
