<template>
  <div class="form-group">
    <label v-if="label" :for="inputId" class="form-label">
      <i v-if="icon" :class="icon" class="form-label-icon"></i>
      {{ label }}
      <span v-if="required" class="required">*</span>
    </label>
    
    <div class="input-wrapper" :class="{ 'input-error': error }">
      <i v-if="prependIcon" :class="prependIcon" class="input-prepend-icon"></i>
      
      <input
        :id="inputId"
        :type="type"
        :value="modelValue"
        :placeholder="placeholder"
        :disabled="disabled"
        :required="required"
        :class="inputClasses"
        @input="handleInput"
        @blur="handleBlur"
        @focus="handleFocus"
      />
      
      <i v-if="appendIcon" :class="appendIcon" class="input-append-icon"></i>
      
      <button
        v-if="clearable && modelValue"
        type="button"
        class="input-clear-btn"
        @click="clearInput"
      >
        <i class="fas fa-times"></i>
      </button>
    </div>
    
    <div v-if="error" class="form-error">
      {{ error }}
    </div>
    
    <div v-else-if="hint" class="form-hint">
      {{ hint }}
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const props = defineProps({
  modelValue: {
    type: [String, Number],
    default: ''
  },
  type: {
    type: String,
    default: 'text'
  },
  label: {
    type: String,
    default: ''
  },
  placeholder: {
    type: String,
    default: ''
  },
  icon: {
    type: String,
    default: ''
  },
  prependIcon: {
    type: String,
    default: ''
  },
  appendIcon: {
    type: String,
    default: ''
  },
  clearable: {
    type: Boolean,
    default: false
  },
  disabled: {
    type: Boolean,
    default: false
  },
  required: {
    type: Boolean,
    default: false
  },
  error: {
    type: String,
    default: ''
  },
  hint: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['update:modelValue', 'blur', 'focus'])

const inputId = ref(`input-${Math.random().toString(36).substr(2, 9)}`)

const inputClasses = computed(() => {
  return [
    'form-input',
    {
      'form-input-prepend': props.prependIcon,
      'form-input-append': props.appendIcon || props.clearable,
      'form-input-error': props.error
    }
  ]
})

const handleInput = (event) => {
  emit('update:modelValue', event.target.value)
}

const handleBlur = (event) => {
  emit('blur', event)
}

const handleFocus = (event) => {
  emit('focus', event)
}

const clearInput = () => {
  emit('update:modelValue', '')
}
</script>

<style scoped>
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.form-label {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-xs);
}

.form-label-icon {
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
}

.required {
  color: var(--color-error);
  margin-left: var(--spacing-xs);
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.form-input {
  width: 100%;
  padding: var(--input-padding-y) var(--input-padding-x);
  background: var(--color-bg-input);
  border: var(--input-border-width) solid var(--color-border-primary);
  border-radius: var(--size-border-radius);
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
  transition: all var(--transition-duration) var(--transition-timing);
  box-sizing: border-box;
}

.form-input:focus {
  outline: none;
  border-color: var(--color-border-active);
  box-shadow: 0 0 0 var(--input-focus-border-width) var(--color-primary-rgb);
  background: var(--color-white-rgb-05);
}

.form-input::placeholder {
  color: var(--color-text-tertiary);
}

.form-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.form-input-prepend {
  padding-left: calc(var(--input-padding-x) * 2 + 16px);
}

.form-input-append {
  padding-right: calc(var(--input-padding-x) * 2 + 16px);
}

.form-input-error {
  border-color: var(--color-border-error);
}

.form-input-error:focus {
  border-color: var(--color-border-error);
  box-shadow: 0 0 0 var(--input-focus-border-width) var(--color-error-rgb-1);
}

/* 图标样式 */
.input-prepend-icon,
.input-append-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--font-size-base);
  color: var(--color-text-tertiary);
  pointer-events: none;
}

.input-prepend-icon {
  left: var(--input-padding-x);
}

.input-append-icon {
  right: var(--input-padding-x);
}

/* 清除按钮 */
.input-clear-btn {
  position: absolute;
  right: var(--spacing-sm);
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
  cursor: pointer;
  padding: var(--spacing-xs);
  border-radius: 50%;
  transition: all var(--transition-duration) var(--transition-timing);
}

.input-clear-btn:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-hover);
}

/* 错误和提示信息 */
.form-error {
  font-size: var(--font-size-xs);
  color: var(--color-error);
  margin-top: var(--spacing-xs);
}

.form-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  margin-top: var(--spacing-xs);
}
</style>