<script lang="ts" setup>
import { computed } from 'vue'
import { ConfigProvider, StyleProvider } from 'ant-design-vue'
import zhCN from 'ant-design-vue/es/locale/zh_CN'
import dayjs from 'dayjs'
import { fetchConfigComponent } from '../Library'
import type { ConfigComponentProps } from '../Library/types'
import { CellAttributeKeyEnum } from '@/enums/cellAttributeEnum'

import 'dayjs/locale/zh-cn'

const props = defineProps<ConfigComponentProps>()

dayjs.locale(zhCN.locale)

const getComponent = computed(() => {
  const { cell } = props
  const key = cell?.getAttribute(CellAttributeKeyEnum.COMPONENT_KEY)
  const categoryKey = cell?.getAttribute(CellAttributeKeyEnum.CATEGORY)
  const Component = fetchConfigComponent({ key, category: categoryKey })
  return Component
})
</script>

<template>
  <ConfigProvider :locale="zhCN">
    <StyleProvider hash-priority="high">
      <component :is="getComponent" v-bind="props" />
    </StyleProvider>
  </ConfigProvider>
</template>