<script setup lang="ts">
import { ref, computed, watch } from 'vue';
import { Button, Input, message } from 'ant-design-vue';

const props = defineProps<{
  data?: any;
}>();

const emit = defineEmits<{
  'submit': [amount: number];
  'close': [];
}>();

// 初始申请金额
const originalAmount = computed(() => {
  return props.data?.refundAmount || 240.00;
});

// 最终退款金额 (双向绑定)
const finalAmount = ref<string | number>(originalAmount.value.toFixed(2));

// 监听数据变化同步初始值
watch(() => props.data, (newVal) => {
  if (newVal?.refundAmount) {
    finalAmount.value = newVal.refundAmount.toFixed(2);
  }
}, { immediate: true });

// 校验金额
function handleAmountChange(e: any) {
  const value = e.target.value;
  // 只允许数字和小数点
  const formatted = value.replace(/[^\d.]/g, '');
  finalAmount.value = formatted;
}

function handleBlur() {
  let val = parseFloat(finalAmount.value as string);
  if (isNaN(val)) {
    val = 0;
  }
  
  // 不能超过商品原金额
  if (val > originalAmount.value) {
    message.warning(`退款金额不能超过申请金额 ¥${originalAmount.value.toFixed(2)}`);
    val = originalAmount.value;
  }
  
  finalAmount.value = val.toFixed(2);
}

// 提交
function handleConfirm() {
  const val = parseFloat(finalAmount.value as string);
  if (isNaN(val) || val < 0) {
    message.error('请输入有效的退款金额');
    return;
  }
  emit('submit', val);
}

// 取消
function handleCancel() {
  emit('close');
}
</script>

<template>
  <div class="amount-popup-container">
    <div class="amount-content">
      <!-- 申请金额展示 -->
      <div class="info-row apply-amount">
        <span class="label">申请金额：</span>
        <span class="symbol">¥</span>
        <span class="value">{{ originalAmount.toFixed(2) }}</span>
      </div>

      <!-- 最终退款金额编辑 -->
      <div class="info-row final-amount">
        <span class="label">最终退款金额：</span>
        <div class="input-wrapper">
          <span class="symbol">¥</span>
          <input 
            type="text" 
            v-model="finalAmount" 
            class="amount-input"
            @input="handleAmountChange"
            @blur="handleBlur"
          />
        </div>
      </div>

      <!-- 提示文字 -->
      <div class="note-text">
        确认后，退款将退回原账户！
      </div>

      <!-- 底部按钮 -->
      <div class="footer-actions">
        <Button @click="handleCancel" class="btn-cancel">取消</Button>
        <Button type="primary" @click="handleConfirm" class="btn-confirm">确定</Button>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.amount-popup-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 20px;
  background: #fff;
  min-height: 300px;
}

.amount-content {
  width: 100%;
  max-width: 400px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;

  .info-row {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    
    .label {
      font-size: 16px;
      color: #333;
      font-weight: bold;
    }

    &.apply-amount {
      .symbol {
        font-size: 18px;
        margin-left: 4px;
        font-weight: bold;
      }
      .value {
        font-size: 28px;
        font-weight: bold;
        color: #333;
      }
    }

    &.final-amount {
      .input-wrapper {
        display: flex;
        align-items: center;
        border: 1px solid #d9d9d9;
        border-radius: 2px;
        padding: 4px 8px;
        margin-left: 8px;
        width: 140px;
        
        .symbol {
          font-size: 16px;
          color: #333;
          margin-right: 4px;
        }

        .amount-input {
          border: none;
          outline: none;
          width: 100%;
          font-size: 20px;
          color: #ff4d4f; // 红色文字
          font-weight: bold;
          text-align: left;
        }
      }
    }
  }

  .note-text {
    font-size: 15px;
    color: #333;
    margin-top: 8px;
    margin-bottom: 40px;
  }

  .footer-actions {
    display: flex;
    gap: 40px;
    justify-content: center;
    width: 100%;

    .ant-btn {
      height: 36px;
      min-width: 80px;
      border-radius: 4px;
      font-size: 14px;
    }

    .btn-cancel {
      border-color: #1890ff;
      color: #1890ff;
      background: #fff;
    }

    .btn-confirm {
      background-color: #2f74ff;
      border-color: #2f74ff;
    }
  }
}
</style>
