<template>
  <el-dialog v-model="visible" title="电子收据预览" width="400px" center>
    <div class="receipt-box" id="printArea">
      <div class="header">
        <h3>浙江大学国际校区</h3>
        <h4>电子收款收据</h4>
      </div>
      <div class="line"></div>
      <div class="row"><span>单号：</span><span>{{ currentBill?.billNo }}</span></div>
      <div class="row"><span>日期：</span><span>{{ today }}</span></div>
      <div class="row"><span>姓名：</span><span>{{ currentBill?.studentName }}</span></div>
      <div class="line dashed"></div>
      <div class="row item">
        <span>{{ getFeeTypeLabel(currentBill?.feeType) }}</span>
        <span class="amount">¥ {{ currentBill?.paidAmount.toFixed(2) }}</span>
      </div>
      <div class="line"></div>
      <div class="row total">
        <span>实收合计：</span>
        <span class="amount lg">¥ {{ currentBill?.paidAmount.toFixed(2) }}</span>
      </div>
      <div class="footer">
        <p>收款单位（盖章）</p>
        <p class="gray">本收据仅供参考，不作报销凭证</p>
      </div>
    </div>
    <template #footer>
      <el-button type="primary" @click="doPrint"> <vab-icon icon="printer-line" /> 打印</el-button>
    </template>
  </el-dialog>
</template>

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

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

const today = computed(() => new Date().toISOString().split('T')[0])

const open = (row) => {
  currentBill.value = row
  visible.value = true
}

const doPrint = () => {
  ElMessage.success('已发送至打印机')
  visible.value = false
}

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

defineExpose({
  open
})
</script>

<style lang="scss" scoped>
.receipt-box {
  background: #fff;
  padding: 20px;
  border: 1px solid #ddd;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  font-family: 'Courier New', Courier, monospace;

  .header {
    text-align: center;
    margin-bottom: 15px;
    h3 { margin: 0; font-size: 18px; }
    h4 { margin: 5px 0 0; font-weight: normal; }
  }

  .line {
    height: 1px;
    background: #000;
    margin: 10px 0;
    &.dashed { border-bottom: 1px dashed #000; background: none; }
  }

  .row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 14px;
    
    &.item { font-weight: bold; }
    &.total { font-weight: bold; margin-top: 10px; }
    
    .amount { font-weight: bold; }
    .amount.lg { font-size: 18px; }
  }

  .footer {
    text-align: center;
    margin-top: 20px;
    font-size: 12px;
    .gray { color: #999; transform: scale(0.8); }
  }
}
</style>
