<template>
  <component :is="iconComponent" class="field-type-icon" />
</template>

<script setup lang="ts">
import { computed, type Component } from 'vue'
import {
  FileTextOutlined,
  NumberOutlined,
  CalendarOutlined,
  TagOutlined,
  TagsOutlined,
  PaperClipOutlined,
  PictureOutlined,
  FunctionOutlined,
  LinkOutlined,
  QuestionOutlined,
} from '@ant-design/icons-vue'
import type { FieldType } from '@/api/bitable'

const props = defineProps<{
  type: FieldType
}>()

// 9 种字段类型 → Ant Design Outlined 图标（KTD1/plan U1 step 3）
const ICON_MAP: Record<FieldType, Component> = {
  text: FileTextOutlined,
  number: NumberOutlined,
  date: CalendarOutlined,
  select: TagOutlined,
  multiselect: TagsOutlined,
  attachment: PaperClipOutlined,
  image: PictureOutlined,
  formula: FunctionOutlined,
  lookup: LinkOutlined,
}

const iconComponent = computed<Component>(
  () => ICON_MAP[props.type] ?? QuestionOutlined,
)
</script>

<style scoped>
.field-type-icon {
  font-size: var(--bitable-font-sm);
  color: var(--bitable-color-text-tertiary);
  flex-shrink: 0;
}
</style>
