<template>
  <view class="form-field" :class="{ 'form-field-required': required, 'form-field-error': error }">
    <!-- 标签 -->
    <view v-if="label" class="field-label">
      <text class="label-text">{{ label }}</text>
      <text v-if="required" class="label-required">*</text>
    </view>

    <!-- 输入区域 -->
    <view class="field-body" @tap="handleClick">
      <!-- 输入框 -->
      <input
        v-if="type === 'text' || type === 'number' || type === 'tel'"
        v-model="inputValue"
        class="field-input"
        :type="type"
        :placeholder="placeholder"
        :placeholder-style="`color: ${placeholderColor}`"
        :disabled="disabled"
        :maxlength="maxlength"
        @input="handleInput"
        @focus="handleFocus"
        @blur="handleBlur"
      />

      <!-- 文本域 -->
      <textarea
        v-else-if="type === 'textarea'"
        v-model="inputValue"
        class="field-textarea"
        :placeholder="placeholder"
        :placeholder-style="`color: ${placeholderColor}`"
        :disabled="disabled"
        :maxlength="maxlength"
        :auto-height="autoHeight"
        @input="handleInput"
        @focus="handleFocus"
        @blur="handleBlur"
      ></textarea>

      <!-- 选择器 -->
      <view v-else-if="type === 'select'" class="field-select">
        <text class="select-text" :class="{ 'select-placeholder': !modelValue }">
          {{ displayValue || placeholder }}
        </text>
        <u-icon v-if="showSelectArrow" name="arrow-right" :size="14" color="#ccc"></u-icon>
      </view>

      <!-- 开关 -->
      <switch
        v-else-if="type === 'switch'"
        :checked="!!modelValue"
        :disabled="disabled"
        color="#FF6B35"
        @change="handleSwitchChange"
      ></switch>

      <!-- 自定义内容 -->
      <view v-else-if="type === 'custom'" class="field-custom">
        <slot></slot>
      </view>

      <!-- 右侧图标 -->
      <u-icon
        v-if="rightIcon"
        :name="rightIcon"
        :size="22"
        :color="iconColor"
        class="field-icon"
      ></u-icon>
    </view>

    <!-- 错误提示 -->
    <view v-if="error && errorMessage" class="field-error-text">
      <text>{{ errorMessage }}</text>
    </view>

    <!-- 提示文字 -->
    <view v-if="tip && !error" class="field-tip">
      <text>{{ tip }}</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'

type FieldType = 'text' | 'number' | 'tel' | 'textarea' | 'select' | 'switch' | 'custom'

interface Props {
  modelValue?: any             // 值
  type?: FieldType             // 类型
  label?: string               // 标签
  placeholder?: string         // 占位文字
  required?: boolean           // 是否必填
  disabled?: boolean           // 是否禁用
  error?: boolean              // 是否错误
  errorMessage?: string        // 错误提示
  tip?: string                 // 提示文字
  maxlength?: number           // 最大长度
  autoHeight?: boolean         // 自动高度（textarea）
  rightIcon?: string           // 右侧图标
  displayValue?: string        // 显示值（select）
  showSelectArrow?: boolean    // 是否显示选择器箭头
}

const props = withDefaults(defineProps<Props>(), {
  type: 'text',
  placeholder: '请输入',
  required: false,
  disabled: false,
  error: false,
  maxlength: 200,
  autoHeight: false,
  showSelectArrow: true
})

const emit = defineEmits<{
  'update:modelValue': [value: any]
  'change': [value: any]
  'focus': []
  'blur': []
  'click': []
}>()

const inputValue = ref(props.modelValue || '')

// 占位符颜色
const placeholderColor = computed(() => '#CCCCCC')

// 图标颜色
const iconColor = computed(() => {
  return props.disabled ? '#CCCCCC' : '#999999'
})

// 监听外部值变化
watch(() => props.modelValue, (val) => {
  inputValue.value = val || ''
})

// 输入事件
const handleInput = (e: any) => {
  const value = e.detail.value
  inputValue.value = value
  emit('update:modelValue', value)
  emit('change', value)
}

// 开关变化
const handleSwitchChange = (e: any) => {
  const value = e.detail.value
  emit('update:modelValue', value)
  emit('change', value)
}

// 聚焦
const handleFocus = () => {
  emit('focus')
}

// 失焦
const handleBlur = () => {
  emit('blur')
}

// 点击
const handleClick = () => {
  if (props.type === 'select' || props.type === 'custom') {
    emit('click')
  }
}
</script>

<style lang="scss" scoped>
@import '@/static/styles/design-tokens.scss';
@import '@/static/styles/mixins.scss';

.form-field {
  padding: $spacing-lg $spacing-xl;
  background: $bg-card;
  border-bottom: 1rpx solid $border-light;
}

.form-field-required {
  .label-text {
    position: relative;
  }
}

.form-field-error {
  .field-input,
  .field-textarea {
    color: $error-color;
  }
}

/* ========== 标签 ========== */
.field-label {
  display: flex;
  align-items: center;
  margin-bottom: $spacing-sm;
}

.label-text {
  font-size: $font-base;
  color: $text-primary;
  font-weight: $font-medium;
}

.label-required {
  font-size: $font-lg;
  color: $error-color;
  margin-left: 4rpx;
}

/* ========== 输入区域 ========== */
.field-body {
  display: flex;
  align-items: center;
  gap: $spacing-sm;
  min-height: 64rpx;
}

/* 输入框 */
.field-input {
  flex: 1;
  font-size: $font-base;
  color: $text-primary;
  height: 64rpx;
}

/* 文本域 */
.field-textarea {
  flex: 1;
  font-size: $font-base;
  color: $text-primary;
  min-height: 120rpx;
  padding: $spacing-sm 0;
  line-height: $line-height-relaxed;
}

/* 选择器 */
.field-select {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: $spacing-sm;
}

.select-text {
  flex: 1;
  font-size: $font-base;
  color: $text-primary;
  @include text-ellipsis;
}

.select-placeholder {
  color: $text-placeholder;
}

/* 自定义内容 */
.field-custom {
  flex: 1;
}

/* 右侧图标 */
.field-icon {
  flex-shrink: 0;
}

/* ========== 错误提示 ========== */
.field-error-text {
  margin-top: $spacing-sm;
  font-size: $font-sm;
  color: $error-color;
  line-height: $line-height-normal;
}

/* ========== 提示文字 ========== */
.field-tip {
  margin-top: $spacing-sm;
  font-size: $font-sm;
  color: $text-tertiary;
  line-height: $line-height-normal;
}
</style>
