<template>
  <view class="numpad">
    <view class="key" v-for="key in keys" :key="key" @tap="onKeyTap(key)">
      <text class="key-text">{{ key }}</text>
    </view>
    <view class="key fn" @tap="onDelete">
      <view class="backspace-icon">
        <view class="backspace-arrow"></view>
        <view class="backspace-line"></view>
      </view>
    </view>
    <view class="key eq" @tap="onConfirm">
      <Icon name="check" :size="36" color="#FFFFFF" />
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import Icon from '@/components/Icon/Icon.vue'

const props = withDefaults(defineProps<{
  /** 金额字符串（v-model） */
  modelValue?: string
  /** 最大金额（元） */
  max?: number
}>(), {
  modelValue: '',
  max: 9999999.99
})

const emit = defineEmits<{
  (e: 'update:modelValue', value: string): void
  (e: 'confirm'): void
}>()

const keys = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '.', '0', '00']

const amountStr = computed(() => props.modelValue)

function vibrate() {
  try { uni.vibrateShort({ type: 'light' }) } catch {}
}

function emitValue(val: string) {
  emit('update:modelValue', val)
}

function onKeyTap(key: string) {
  vibrate()
  const current = amountStr.value

  if (key === '.') {
    if (current.includes('.')) return
    if (!current) { emitValue('0.'); return }
  }

  let next: string
  if (!current || current === '0') {
    next = (key === '0' || key === '00') ? '0' : key
  } else {
    next = current + key
  }

  if (next.includes('.')) {
    const decimals = next.split('.')[1]
    if (decimals && decimals.length > 2) return
  }
  if (next.length > 10) return
  const num = parseFloat(next)
  if (!isNaN(num) && num > props.max) return

  emitValue(next)
}

function onDelete() {
  vibrate()
  const current = amountStr.value
  if (current.length > 1) {
    emitValue(current.slice(0, -1))
  } else {
    emitValue('')
  }
}

function onConfirm() {
  vibrate()
  emit('confirm')
}
</script>

<style lang="scss" scoped>
.numpad {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16rpx;
  padding: 0 32rpx;
}

.key {
  height: 96rpx;
  border-radius: 24rpx;
  background: #FFF8F0;
  display: flex;
  align-items: center;
  justify-content: center;

  &:active { background: #F0E0D6; }
}

.key-text {
  font-family: 'Fredoka', sans-serif;
  font-size: 44rpx;
  font-weight: 500;
  color: #2D1B1B;
}

.key.fn {
  background: #FFE8E0;
  &:active { background: #FFD0C0; }
}

.key.eq {
  background: linear-gradient(135deg, #FF8C69, #E67355);
  box-shadow: 0 4rpx 16rpx rgba(255, 140, 105, 0.3);
  &:active { background: #E67355; }
}

// 自绘 backspace 图标
.backspace-icon {
  width: 40rpx;
  height: 28rpx;
  position: relative;
}

.backspace-arrow {
  position: absolute;
  left: 0;
  top: 50%;
  width: 16rpx;
  height: 16rpx;
  border-left: 4rpx solid #FF8C69;
  border-bottom: 4rpx solid #FF8C69;
  transform: translateY(-50%) rotate(45deg);
}

.backspace-line {
  position: absolute;
  left: 12rpx;
  top: 50%;
  width: 26rpx;
  height: 4rpx;
  background: #FF8C69;
  transform: translateY(-50%);
  border-radius: 2rpx;
}
</style>
