<template>
  <el-dialog v-model="visible" title="收银台" width="500px">
    <el-descriptions border :column="1" class="mb-20">
      <el-descriptions-item label="账单编号">{{ currentBill?.billNo }}</el-descriptions-item>
      <el-descriptions-item label="费用类型">{{ getFeeTypeLabel(currentBill?.feeType) }}</el-descriptions-item>
      <el-descriptions-item label="待缴金额">
        <span class="text-danger font-bold text-lg">¥ {{ (currentBill?.amount - currentBill?.paidAmount).toFixed(2) }}</span>
      </el-descriptions-item>
    </el-descriptions>

    <el-form label-width="80px" label-position="top">
      <el-form-item label="支付方式">
        <el-radio-group v-model="form.method">
          <el-radio label="wechat"><vab-icon icon="wechat-pay-fill" class="text-success" /> 微信</el-radio>
          <el-radio label="alipay"><vab-icon icon="alipay-fill" class="text-primary" /> 支付宝</el-radio>
          <el-radio label="cash">现金/刷卡</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="本次缴纳">
        <el-input-number v-model="form.amount" :min="0.01" :max="currentBill?.amount - currentBill?.paidAmount" :precision="2" style="width: 180px" />
      </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="primary" @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,
  method: 'wechat',
  remark: ''
})

const open = (row) => {
  currentBill.value = row
  form.amount = row.amount - row.paidAmount
  form.method = 'wechat'
  form.remark = ''
  visible.value = true
}

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

const getFeeTypeLabel = (type) => {
  const map = { accommodation: '住宿费', utility: '水电费', deposit: '押金' }
  return map[type] || type
}

defineExpose({
  open
})
</script>

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