<template>
  <el-dialog v-model="visible" title="退费申请" width="500px">
    <el-alert title="退费将原路返回至支付账户，请谨慎操作" type="warning" show-icon class="mb-20" :closable="false" />
    <el-form label-width="80px" label-position="top">
      <el-form-item label="可退金额">
        <span class="text-success font-bold">¥ {{ currentBill?.paidAmount.toFixed(2) }}</span>
      </el-form-item>
      <el-form-item label="退费金额">
        <el-input-number v-model="form.amount" :min="0.01" :max="currentBill?.paidAmount" :precision="2" style="width: 180px" />
      </el-form-item>
      <el-form-item label="退费原因">
        <el-select v-model="form.reason" style="width: 100%">
          <el-option label="退宿结算" value="checkout" />
          <el-option label="多缴退还" value="overpaid" />
          <el-option label="费用调整" value="adjust" />
          <el-option label="其他" value="other" />
        </el-select>
      </el-form-item>
      <el-form-item label="备注">
        <el-input type="textarea" v-model="form.remark" rows="2" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="visible = false">取消</el-button>
      <el-button type="danger" @click="confirm" :loading="loading">确认退费</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

const emit = defineEmits(['success'])

const visible = ref(false)
const loading = ref(false)
const currentBill = ref(null)

const form = reactive({
  amount: 0,
  reason: 'checkout',
  remark: ''
})

const open = (row) => {
  currentBill.value = row
  form.amount = row.paidAmount
  form.reason = 'checkout'
  form.remark = ''
  visible.value = true
}

const confirm = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
    visible.value = false
    ElMessage.success('退费成功')
    emit('success', { ...currentBill.value, refundAmount: form.amount })
  }, 1000)
}

defineExpose({
  open
})
</script>

<style lang="scss" scoped>
.mb-20 { margin-bottom: 20px; }
.text-success { color: var(--el-color-success); }
.font-bold { font-weight: bold; }
</style>
