<template>
  <h-config-provider :locale="locale">
    <router-view />
  </h-config-provider>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, provide, watch } from 'vue';
import { useStore } from 'vuex';
import { STORAGE_LANG_KEY } from '@/store/mutation-type';
import { localStorage } from '@/utils/local-storage';
import useMediaQuery from '@/utils/hooks/useMediaQuery';
import { useI18n } from 'vue-i18n';
import useMenuState, { MenuStateSymbol } from './layouts/use-menu-state';
import { useMultiTabStateProvider } from './components/multi-tab';
import { defaultLang } from './locales';
import type { ConfigProviderProps } from 'ant-design-vue/lib/config-provider';
import { useHttp } from '@crami/http';
import {
  SET_CONTENT_WIDTH,
  SET_LAYOUT,
  SET_NAV_THEME,
  SET_SPLIT_MENUS,
  SET_TRANSITION_NAME,
  SET_FIXED_HEADER,
  SET_FIXED_SIDEBAR,
  SET_MULTI_TAB,
  SET_FIXED_MULTI_TAB,
  SET_PRIMARY_COLOR,
} from '@/store/modules/app/mutations';
import { useRoute, useRouter } from 'vue-router';
import { message } from 'ant-design-vue';

export default defineComponent({
  name: 'App',

  setup() {
    const router = useRouter();
    const route = useRoute();
    let checkCode = '';

    const store = useStore();
    const i18n = useI18n();
    const multiTabState = useMultiTabStateProvider();
    const colSize = useMediaQuery();
    const isMobile = computed(() => colSize.value === 'sm' || colSize.value === 'xs');
    const menuState = useMenuState(
      {
        collapsed: isMobile.value,
        openKeys: [] as string[],
        selectedKeys: [] as string[],
        isMobile,
      },
      multiTabState,
    );
    const lang = localStorage.get(STORAGE_LANG_KEY, defaultLang);
    if (lang) {
      store.dispatch('app/SET_LANG', lang);
    }
    const theme = computed(() => store.getters['app/navTheme']);
    watch(
      theme,
      () => {
        if (theme.value === 'realDark') {
          document
            .getElementsByTagName('html')[0]
            .setAttribute('data-pro-theme', 'antdv-pro-theme-dark');
        } else {
          document
            .getElementsByTagName('html')[0]
            .setAttribute('data-pro-theme', 'antdv-pro-theme-light');
        }
      },
      { immediate: true },
    );

    // 解析短链接，获取项目的配置信息，并设置项目风格
    const setSetting = async (code: string) => {
      const result = await useHttp({
        // url: 'http://10.0.59.229:7300/mock/6233025aec91f63c580c0589/example/getSetting',
        url: 'studio-admin/shorturl/project',
        method: 'get',
        params: {
          code: code,
        },
      });
      if (result.code == 200) {
        // 设置导航位置和主题
        store.commit(`app/${SET_LAYOUT}`, result.data.layout || 'side');
        store.commit(`app/${SET_NAV_THEME}`, result.data.theme || 'light');
        // store.dispatch('app/SET_LANG', 'en');
      } else if (result.code == 19000) {
        // 链接失效
        router.push('/error');
      } else {
        message.error(result.msg);
      }
    };

    // 监听checkCode，变化后重新请求布局
    watch(
      () => route.query.checkCode,
      () => {
        if (route.query.checkCode && route.query.checkCode != checkCode) {
          checkCode = route.query.checkCode as string;
          setSetting(checkCode);
        }
      },
      { deep: true, immediate: true },
    );

    provide('isMobile', isMobile);
    provide(
      'isRealDark',
      computed(() => theme.value === 'realDark'),
    );
    provide(MenuStateSymbol, menuState);
    const locale = computed(() => {
      return i18n.getLocaleMessage(i18n.locale.value).antd as ConfigProviderProps['locale'];
    });

    onMounted(() => {});
    return {
      route,
      router,
      locale,
    };
  },
});
</script>
