<template>
  <Skeleton
      active
      :loading="loading">
    <ns-application/>
  </Skeleton>
</template>

<script lang="ts" type="module">
import {defineComponent, provide, ref, onUnmounted, onBeforeUnmount} from 'vue';
import zhCN from 'ant-design-vue/es/locale/zh_CN';
import {useRoute} from 'vue-router';
import { Skeleton } from 'ant-design-vue';

export default defineComponent({
  name: 'App',
  components: {Skeleton},
  setup() {
    let loading = ref(false);
    const route = useRoute();
    let showLayout = ref(true);
    let event = ref(null);
    let type = ref('');
    provide('showLayout', showLayout);
    provide('event', event);
    let eventData = ref({});
    const onEventData = () => { //动态改变值
      return event.value
    };
    provide('onEventData', onEventData);
    const onHandle = function(e){
      loading.value = false;
      event.value = e;
      const data  = e?.data;
      if (data && data.type ) {
        eventData.value = data;
        type.value = data.type;
        if(data.type === 'style') {
          showLayout.value = data?.showLayout;
        }
      }
    }
    window.addEventListener('message',  onHandle );

    onBeforeUnmount(()=>{
      window.removeEventListener('message', onHandle)
    })
    return {
      locale: zhCN,
      route,
      showLayout, event,
      type,
      eventData,
      loading
    };
  },
  unmounted(){

  }

});
</script>

<style>
#app {
  width: 100%;
  height: 100%;
}
</style>
