<template>
	<input v-model="form.amount" type="text" />
	<input v-model="form.amount" type="text" />
	<input v-model="form.amount" type="text" />
	<input v-model="form.amount" type="text" />
	<input v-model="form.amount" type="text" />
  <scroll-view scroll-y class="page-scroll">
    <view class="container">
      <view class="budget-card">
        <view class="card-header">
          <text class="card-title">预算设置</text>
          <text class="card-subtitle">{{ currentMonthText }}</text>
        </view>

        <view class="card-body">
          <view class="form-item">
            <text class="label">预算金额1</text>
            <input
              v-model="amountInput"
              type="text"
              inputmode="decimal"
              placeholder="请输入预算金额"
              @focus="onAmountFocus"
            />

						<view class="uni-form-item uni-column">
							<view class="title">实时获取输入值：{{inputValue}}</view>
							<input class="uni-input" @input="onKeyInput" placeholder="输入同步到view中" />
						</view>
            <text class="form-tip">设置本月预算金额,用于控制支出</text>
          </view>

          <view v-if="budget.usedAmount !== undefined" class="info-section">
            <view class="info-item">
              <text class="info-label">本月预算</text>
              <text class="info-value expense">¥{{ budget.amount ? budget.amount.toFixed(2) : '0.00' }}</text>
            </view>
            <view class="info-item">
              <text class="info-label">本月已支出</text>
              <text class="info-value expense">¥{{ budget.usedAmount ? budget.usedAmount.toFixed(2) : '0.00' }}</text>
            </view>
            <view class="info-item">
              <text class="info-label">剩余预算</text>
              <text class="info-value" :class="budget.remainingAmount >= 0 ? 'positive' : 'negative'">
                ¥{{ budget.remainingAmount !== undefined ? budget.remainingAmount.toFixed(2) : '0.00' }}
              </text>
            </view>
            <view v-if="budget.remainingDaily !== undefined && budget.remainingDaily > 0" class="info-item">
              <text class="info-label">剩余日均</text>
              <text class="info-value">¥{{ budget.remainingDaily.toFixed(2) }}</text>
            </view>
          </view>
        </view>

        <view class="card-footer">
          <button class="save-btn" @click="saveBudget" :loading="saving">保存</button>
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { getBudget, setBudget } from '../../api/budget'

const budget = ref({
  id: null,
  year: null,
  month: null,
  amount: 0,
  usedAmount: 0,
  remainingAmount: 0,
  remainingDaily: 0
})

const inputValue = ref('');

const form = ref({
  year: null,
  month: null,
  amount: ''
})

const saving = ref(false)

// 创建一个计算属性来处理金额输入的验证
const amountInput = computed({
  get() {
    return form.value.amount
  },
  set(value) {
    // 确保只能输入数字和小数点
    let processedValue = value || ''
    // 移除非数字和小数点的字符
    processedValue = processedValue.replace(/[^\d.]/g, '')
    // 确保只有一个小数点
    const parts = processedValue.split('.')
    if (parts.length > 2) {
      processedValue = parts[0] + '.' + parts.slice(1).join('')
    }
    // 限制小数位数为2位
    if (parts.length === 2 && parts[1].length > 2) {
      processedValue = parts[0] + '.' + parts[1].substring(0, 2)
    }
    form.value.amount = processedValue
  }
})

const currentMonthText = computed(() => {
  if (budget.value.year && budget.value.month) {
    return `${budget.value.year}年${budget.value.month}月`
  }
  const now = new Date()
  return `${now.getFullYear()}年${now.getMonth() + 1}月`
})

const loadBudget = async () => {
  try {
    const data = await getBudget()
    if (data) {
      budget.value = data
      form.value.year = data.year
      form.value.month = data.month
      form.value.amount = data.amount ? data.amount.toString() : ''
    } else {
      // 如果没有预算数据，使用默认值
      const now = new Date()
      budget.value = {
        year: now.getFullYear(),
        month: now.getMonth() + 1,
        amount: 0,
        usedAmount: 0,
        remainingAmount: 0,
        remainingDaily: 0
      }
      form.value.year = now.getFullYear()
      form.value.month = now.getMonth() + 1
      form.value.amount = ''
    }
  } catch (error) {
    console.error('加载预算失败', error)
    uni.showToast({
      title: '加载预算失败',
      icon: 'none'
    })
  }
}

const onAmountFocus = () => {
  // 聚焦时确保输入框可交互
  console.log('预算金额输入框聚焦')
}

const saveBudget = async () => {
  const amount = parseFloat(form.value.amount) || 0

  if (amount < 0) {
    uni.showToast({
      title: '预算金额不能为负数',
      icon: 'none'
    })
    return
  }

  saving.value = true
  try {
    const data = await setBudget({
      year: form.value.year,
      month: form.value.month,
      amount: amount
    })

    if (data) {
      budget.value = data
      uni.showToast({
        title: '保存成功',
        icon: 'success'
      })

      // 触发首页刷新
      uni.$emit('refreshBills')

      setTimeout(() => {
        uni.navigateBack()
      }, 1500)
    }
  } catch (error) {
    console.error('保存预算失败', error)
    uni.showToast({
      title: error.message || '保存失败',
      icon: 'none'
    })
  } finally {
    saving.value = false
  }
}

const onKeyInput = (event) => {
  inputValue.value = event.detail.value
}

onMounted(() => {
  loadBudget()
})
</script>

<style scoped>
.page-scroll {
  height: 100vh;
  width: 100%;
  padding-bottom: calc(50px + env(safe-area-inset-bottom));
  background: linear-gradient(135deg, #FFE5CC 0%, #FFD4A8 50%, #FFC08A 100%);
}

.container {
  min-height: calc(100vh - 100rpx);
  background: transparent;
  padding: 20rpx;
  padding-bottom: calc(170rpx + env(safe-area-inset-bottom));
}

.budget-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 25rpx;
  box-shadow: 0 10rpx 30rpx rgba(93, 64, 55, 0.15);
  border: 3rpx solid #C8956E;
  position: relative;
}

.card-header {
  padding: 40rpx 30rpx;
  background: linear-gradient(135deg, #C8956E, #F5D59E, #FFD700);
  border-bottom: 3rpx solid #5D4037;
  text-align: center;
}

.card-title {
  font-size: 40rpx;
  font-weight: bold;
  color: #5D4037;
  display: block;
  margin-bottom: 12rpx;
  text-shadow: 2rpx 2rpx 0 rgba(255, 215, 0, 0.3);
}

.card-subtitle {
  font-size: 28rpx;
  color: #8D6E63;
  display: block;
  font-weight: 600;
}

.card-body {
  padding: 40rpx 30rpx;
}

.form-item {
  margin-bottom: 35rpx;
  position: relative;
  z-index: 1;
}

.label {
  display: block;
  font-size: 28rpx;
  color: #5D4037;
  margin-bottom: 20rpx;
  font-weight: 600;
}

input {
  width: 100%;
  padding: 25rpx;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 15rpx;
  font-size: 32rpx;
  box-sizing: border-box;
  border: 3rpx solid #C8956E;
  outline: none;
  color: #5D4037;
  box-shadow: 0 4rpx 15rpx rgba(200, 149, 110, 0.1);
  transition: all 0.3s;
  pointer-events: auto;
  user-select: text;
  -webkit-user-select: text;
  position: relative;
  z-index: 1;
}

input:focus {
  border-color: #FFD700;
  box-shadow: 0 0 0 4rpx rgba(255, 215, 0, 0.3), 0 8rpx 25rpx rgba(255, 215, 0, 0.2);
}

input::placeholder {
  color: #BCAAA4;
}

.form-tip {
  display: block;
  font-size: 24rpx;
  color: #8D6E63;
  margin-top: 12rpx;
  padding-left: 10rpx;
}

.info-section {
  margin-top: 40rpx;
  padding-top: 30rpx;
  border-top: 2rpx solid rgba(200, 149, 110, 0.3);
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25rpx;
  margin-bottom: 15rpx;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 15rpx;
  border: 2rpx solid #C8956E;
}

.info-label {
  font-size: 28rpx;
  color: #8D6E63;
  font-weight: 600;
}

.info-value {
  font-size: 34rpx;
  font-weight: bold;
}

.info-value.positive {
  color: #FFD700;
}

.info-value.negative {
  color: #FA3534;
}

.info-value.expense {
  color: #FA3534;
}

.card-footer {
  padding: 0 30rpx 40rpx;
}

.save-btn {
  width: 100%;
  height: 96rpx;
  background: linear-gradient(135deg, #C8956E, #F5D59E, #FFD700);
  color: #5D4037;
  border-radius: 50rpx;
  font-size: 32rpx;
  font-weight: bold;
  border: 4rpx solid #5D4037;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10rpx 30rpx rgba(200, 149, 110, 0.4);
  transition: all 0.3s;
}

.save-btn:active {
  transform: scale(0.98);
  box-shadow: 0 5rpx 15rpx rgba(200, 149, 110, 0.3);
}
</style>
