<script setup lang="ts">
  import { computed } from 'vue';
  import { configProviderProps } from 'ant-design-vue/es/config-provider/context';
  import { merge } from 'lodash-es';
  import { ConfigProvider } from 'ant-design-vue';
  import { useLocale } from '@/locales/useLocale';
  import { useLayoutSettingStore } from '@/store/modules/layoutSetting';

  defineOptions({
    name: 'ProConfigProvider',
  });

  const props = defineProps(configProviderProps());

  const layoutSetting = useLayoutSettingStore();
  const { getAntdLocale } = useLocale();

  const theme = computed(() => {
    return merge({}, layoutSetting.themeConfig, props.theme);
  });
</script>

<template>
  <ConfigProvider v-bind="$props" :locale="getAntdLocale" :theme="theme">
    <slot></slot>
  </ConfigProvider>
</template>
