<template>
  <div>
    <wujie-vue :name="id" :url="url" :alive="alive" :props="params"></wujie-vue>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, computed, watch } from 'vue';
import { useRoute } from 'vue-router';
import { getInfo, ICP_CONFIG } from '@/utils/commMethods';
import ls, { localStorage } from '@/utils/local-storage';
import { STORAGE_TOKEN_KEY, STORAGE_LANG_KEY } from '@/store/mutation-type';
import bus from '@/utils/bus';
import Wujie from 'wujie-vue3';

// import localStorage from '@/utils/local-storage';

export default defineComponent({
  name: 'Wujie',
  components: {},
  setup() {
    const route = useRoute();
    const { bus: wujieBus } = Wujie;
    const id = ref((route.meta.id as string) || '');
    const url = ref((route.meta.url as string) || '');
    const alive = ref(route.meta.keepAlive as boolean);

    // 给子应用传递token和用户信息
    const savedToken = localStorage.get(STORAGE_TOKEN_KEY);
    const commonParams = computed(() => {
      return getInfo(ICP_CONFIG);
    });
    const params = reactive({
      userInfo: commonParams,
      token: savedToken,
      lang: localStorage.get(STORAGE_LANG_KEY),
      timeZone: '8',
    });

    // 监听多语言
    bus.on('changeLangue', (lang: string) => {
      params.lang = lang;
      // wujieBus.$emit('appPropsChange', params);
    });

    // 监听所有的参数，改变之后向子应用发送事件
    watch(
      () => params,
      () => {
        wujieBus.$emit('appPropsChange', params);
      },
      { deep: true },
    );

    return { id, url, alive, params };
  },
});
</script>
