<template>
  <div class="numeric-keyboard" :class="`numeric-keyboard-${type}`">
    <!-- 输入框显示 -->
    <div class="keyboard-input" @click="$emit('focus')">
      <div class="input-value">
        <span v-if="modelValue" class="value-text">{{ displayFormatted }}</span>
        <span v-else class="value-placeholder">{{ placeholder }}</span>
      </div>
    </div>

    <!-- 键盘 -->
    <div class="keyboard-keys">
      <button
        v-for="key in keys"
        :key="key"
        class="key-btn"
        :class="{
          'key-action': isActionKey(key),
          'key-delete': key === 'DEL'
        }"
        @click="handleKeyClick(key)"
      >
        <template v-if="key === 'DEL'">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M21 4H8l-7 8 7 8h13a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2z" />
            <line x1="18" y1="9" x2="12" y2="15" />
            <line x1="12" y1="9" x2="18" y2="15" />
          </svg>
        </template>
        <template v-else>
          {{ key }}
        </template>
      </button>
    </div>
  </div>
</template>

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

const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  maxLength: {
    type: Number,
    default: 11
  },
  placeholder: {
    type: String,
    default: ''
  },
  type: {
    type: String,
    default: 'phone'
  }
})

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

const keys = computed(() => {
  if (props.type === 'idcard') {
    return ['1', '2', '3', '4', '5', '6', '7', '8', '9', 'X', '0', 'DEL']
  }
  return ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', 'DEL']
})

const displayFormatted = computed(() => {
  return props.modelValue
})

const isActionKey = (key) => {
  return ['DEL'].includes(key)
}

const handleKeyClick = (key) => {
  if (key === 'DEL') {
    const newValue = props.modelValue.slice(0, -1)
    emit('update:modelValue', newValue)
  } else {
    if (props.modelValue.length < props.maxLength) {
      let newValue = props.modelValue + key
      if (key === 'X') {
        newValue = props.modelValue + 'X'
      }
      emit('update:modelValue', newValue)

      if (newValue.length === props.maxLength) {
        setTimeout(() => {
          emit('confirm', newValue)
        }, 200)
      }
    }
  }
}
</script>

<style scoped>
.numeric-keyboard {
  width: 100%;
}

.keyboard-input {
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  height: 108px;
  background: linear-gradient(160deg, #f0f7ff 0%, #e8f4fd 100%);
  border: 2px solid rgba(59, 130, 246, 0.18);
  border-radius: 20px;
  margin-bottom: 20px;
  cursor: pointer;
  transition: border-color var(--transition-fast);
}

.keyboard-input:focus-within {
  border-color: var(--primary);
}

.input-value {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0 24px;
}

.value-text {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  font-size: 38px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 4px;
  font-family: 'Courier New', monospace;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  box-sizing: border-box;
  text-align: right;
}

.value-placeholder {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  font-size: 28px;
  font-weight: 600;
  color: #b0bec5;
  letter-spacing: 1px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  box-sizing: border-box;
  text-align: right;
}

/* 身份证号输入：字号缩小防溢出 */
.numeric-keyboard-idcard .value-text {
  font-size: 30px;
  letter-spacing: 2px;
}

.numeric-keyboard-idcard .value-placeholder {
  font-size: 26px;
}

.keyboard-keys {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.key-btn {
  height: 76px;
  font-size: 30px;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}

.key-btn:hover {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary);
}

.key-btn:active {
  transform: scale(0.95);
  background: var(--primary);
  color: white;
}

.key-btn svg {
  width: 28px;
  height: 28px;
}

.key-action {
  background: var(--bg-page);
}

.key-delete {
  color: var(--text-secondary);
}
</style>
