<template>
  <el-drawer
    v-model="visible"
    title="账单详情"
    direction="rtl"
    size="500px"
    destroy-on-close
  >
    <div class="detail-container">
      <el-descriptions title="基础信息" :column="1" border>
        <el-descriptions-item label="账单编号">{{ currentBill.billNo }}</el-descriptions-item>
        <el-descriptions-item label="学生姓名">{{ currentBill.studentName }}</el-descriptions-item>
        <el-descriptions-item label="学号">{{ currentBill.studentId }}</el-descriptions-item>
        <el-descriptions-item label="费用类型">
          <el-tag :type="getFeeTypeTag(currentBill.feeType)">
            {{ getFeeTypeLabel(currentBill.feeType) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="截止日期">{{ currentBill.dueDate }}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="getStatusType(currentBill.status)">
            {{ getStatusLabel(currentBill.status) }}
          </el-tag>
        </el-descriptions-item>
      </el-descriptions>

      <div class="amount-section mt-20">
        <div class="amount-item">
          <div class="label">应收金额</div>
          <div class="value">¥ {{ currentBill.amount?.toFixed(2) }}</div>
        </div>
        <div class="amount-item">
          <div class="label">已缴金额</div>
          <div class="value text-success">¥ {{ currentBill.paidAmount?.toFixed(2) }}</div>
        </div>
        <div class="amount-item">
          <div class="label">待缴金额</div>
          <div class="value text-danger">
            ¥ {{ (currentBill.amount - currentBill.paidAmount)?.toFixed(2) }}
          </div>
        </div>
      </div>

      <el-divider content-position="left">缴费记录</el-divider>
      <el-timeline>
        <el-timeline-item
          v-for="(activity, index) in activities"
          :key="index"
          :timestamp="activity.timestamp"
          :type="activity.type"
        >
          {{ activity.content }}
        </el-timeline-item>
      </el-timeline>
    </div>
  </el-drawer>
</template>

<script setup>
import { ref, computed } from 'vue'

const visible = ref(false)
const currentBill = ref({})

// Mock activities based on status
const activities = computed(() => {
  const list = [
    {
      content: '账单创建',
      timestamp: '2026-01-01 10:00:00',
      type: 'primary',
    },
  ]

  if (currentBill.value.paidAmount > 0) {
    list.push({
      content: `缴纳费用 ¥ ${currentBill.value.paidAmount}`,
      timestamp: '2026-01-15 14:30:00',
      type: 'success',
    })
  }

  if (currentBill.value.status === 'refunded') {
    list.push({
      content: '全额退费',
      timestamp: '2026-01-20 09:00:00',
      type: 'warning',
    })
  }

  return list
})

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

// Helpers (duplicated from parent, could be extracted to utils)
const getFeeTypeLabel = (type) => {
  const map = { accommodation: '住宿费', utility: '水电费', deposit: '押金' }
  return map[type] || type
}
const getFeeTypeTag = (type) => {
  const map = { accommodation: '', utility: 'warning', deposit: 'info' }
  return map[type]
}
const getStatusLabel = (status) => {
  const map = { unpaid: '欠费', paid: '已缴清', partial: '部分缴纳', refunded: '已退费' }
  return map[status]
}
const getStatusType = (status) => {
  const map = { unpaid: 'danger', paid: 'success', partial: 'warning', refunded: 'info' }
  return map[status]
}

defineExpose({
  open,
})
</script>

<style lang="scss" scoped>
.detail-container {
  padding: 0 20px;
}
.mt-20 {
  margin-top: 20px;
}
.amount-section {
  display: flex;
  justify-content: space-between;
  background-color: #f5f7fa;
  padding: 20px;
  border-radius: 8px;

  .amount-item {
    text-align: center;
    .label {
      color: #909399;
      font-size: 13px;
      margin-bottom: 8px;
    }
    .value {
      font-size: 18px;
      font-weight: bold;
      color: #303133;
    }
    .text-success {
      color: var(--el-color-success);
    }
    .text-danger {
      color: var(--el-color-danger);
    }
  }
}
</style>
