<template>
  <FlexRow
    align="center"
    wrap
    :gap="gap"
    :innerStyle="rowStyle"
  >
    <Text
      v-if="label"
      fontConfig="p"
      color="text.second"
      :innerStyle="labelTextStyle"
    >
      {{ label }}
    </Text>
    <Field
      :name="name"
      :model-value="textValue"
      :type="numberMode ? 'number' : 'text'"
      :show-label="false"
      :show-bottom-border="false"
      :placeholder="placeholder"
      :max-length="maxLength"
      :field-style="mergedFieldStyle"
      :input-style="mergedInputStyle"
      :input-flex="1"
      @update:model-value="onUpdate"
    />
    <Text v-if="suffix" fontConfig="p" color="text.content" :innerStyle="suffixTextStyle">
      {{ suffix }}
    </Text>
  </FlexRow>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useTheme, type ViewStyle, type TextStyle } from '@/components/theme/ThemeDefine';
import FlexRow from '@/components/layout/FlexRow.vue';
import Field from '@/components/form/Field.vue';
import Text from '@/components/basic/Text.vue';

const props = withDefaults(
  defineProps<{
    /** 绑定值：字符串或与 `number-mode` 搭配的数字 */
    modelValue?: string | number | null;
    /** 为 true 时对外 `update:modelValue` 发出数字（解析失败为 0） */
    numberMode?: boolean;
    placeholder?: string;
    /** 输入框左侧短说明，如「带徒」 */
    label?: string;
    /** 输入框右侧固定文案，如「人」「场」 */
    suffix?: string;
    maxLength?: number;
    /** 与 Form 的 `rules` 键一致，用于联表校验 */
    name?: string;
    /** 主题间距键，默认 sm */
    gap?: string;
    fieldStyle?: ViewStyle;
    inputStyle?: TextStyle;
  }>(),
  {
    modelValue: '',
    numberMode: false,
    placeholder: '请填写',
    label: '',
    suffix: '',
    maxLength: 20,
    gap: 'sm',
    fieldStyle: () => ({}),
    inputStyle: () => ({}),
    name: undefined,
  },
);

const emit = defineEmits<{
  'update:modelValue': [value: string | number];
}>();

const themeContext = useTheme();

const rowStyle = computed(() => ({
  flexShrink: 0,
}));

const labelTextStyle = computed<TextStyle>(() => ({
  flexShrink: 0,
  marginRight: '4rpx',
}));

const suffixTextStyle = computed<TextStyle>(() => ({
  flexShrink: 0,
  marginLeft: '4rpx',
}));

const mergedFieldStyle = computed<ViewStyle>(() => ({
  paddingVertical: themeContext.resolveThemeSize('AgreementPrefillFieldPaddingV', 6),
  paddingHorizontal: themeContext.resolveThemeSize('AgreementPrefillFieldPaddingH', 12),
  borderRadius: themeContext.resolveThemeSize('AgreementPrefillFieldRadius', '10rpx'),
  backgroundColor: themeContext.resolveThemeColor('AgreementPrefillFieldBg', 'light'),
  borderWidth: '1rpx',
  borderStyle: 'solid',
  borderColor: themeContext.resolveThemeColor('AgreementPrefillFieldBorder', 'border.cell'),
  minWidth: themeContext.resolveThemeSize('AgreementPrefillFieldMinWidth', '120rpx'),
  maxWidth: themeContext.resolveThemeSize('AgreementPrefillFieldMaxWidth', '220rpx'),
  ...props.fieldStyle,
}));

const mergedInputStyle = computed<TextStyle>(() => ({
  textAlign: 'center',
  fontSize: themeContext.resolveThemeSize('AgreementPrefillInputFontSize', 28),
  ...props.inputStyle,
}));

const textValue = computed(() =>
  props.modelValue === null || props.modelValue === undefined ? '' : String(props.modelValue),
);

function onUpdate(raw: string) {
  if (props.numberMode) {
    const n = parseInt(raw.replace(/\D/g, ''), 10);
    emit('update:modelValue', Number.isFinite(n) ? n : 0);
  } else {
    emit('update:modelValue', raw);
  }
}
</script>
