<template>
  <GdInput v-if="element.control === 'input'" v-bind="attrs" />
  <GdSelect v-else-if="element.control === 'select'" v-bind="attrs" :collapse-tags="false" />
  <GdTableSelect v-else-if="element.control === 'table-select'" v-bind="attrs" :collapse-tags="false" />
  <GdInputNumber v-else-if="element.control === 'input-number'" v-bind="attrs" />
  <GdDatePicker v-else-if="element.control === 'date-picker'" v-bind="attrs" />
  <GdSwitch v-else-if="element.control === 'switch'" v-bind="attrs" />
  <GdTreeSelect v-else-if="element.control === 'tree-select'" v-bind="attrs" cascader/>
  <GdDivider v-else-if="element.control === 'divider'" v-bind="attrs" />
  <GdUpload v-else-if="element.control === 'upload'" v-bind="attrs" @preview="(name: string) => emit('preview', name)" />
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { useGlobalPinia } from '@/pinia/global'
const { lang } = useGlobalPinia()

const props = defineProps<{
  element: any,
}>()

const emit = defineEmits<{
  (e: 'preview', name: string): void
}>();

const attrs = computed(() => {
  const label = props.element[`label${lang}`]
  const { prop } = props.element
  return { ...props.element, label, key: prop }
})
</script>
