<template>
  <el-dialog
    v-model="visible"
    title="退宿申请详情"
    width="700px"
    destroy-on-close
    :close-on-click-modal="false"
  >
    <div v-if="detail" class="detail">
      <!-- 状态步骤条 -->
      <div class="status-steps mb-20">
        <el-steps :active="getStepActive()" finish-status="success" align-center>
          <el-step title="提交申请" :description="detail.applyTime" />
          <el-step title="宿管核验" :description="detail.dormCheckTime || '待核验'" />
          <el-step title="财务结算" :description="detail.financeCheckTime || '待结算'" />
          <el-step title="办结离校" :description="detail.completeTime || '待办结'" />
        </el-steps>
      </div>

      <!-- 基础信息 -->
      <el-descriptions title="基础信息" border :column="2" class="mb-20">
        <el-descriptions-item label="申请编号">{{ detail.applyNo }}</el-descriptions-item>
        <el-descriptions-item label="当前状态">
          <el-tag :type="getStatusType(detail.status)">{{ getStatusLabel(detail.status) }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="申请人">{{ detail.studentName }}</el-descriptions-item>
        <el-descriptions-item label="学号">{{ detail.studentId }}</el-descriptions-item>
        <el-descriptions-item label="退宿房间">{{ detail.room }}</el-descriptions-item>
        <el-descriptions-item label="退宿原因">{{ detail.reason }}</el-descriptions-item>
      </el-descriptions>

      <!-- 核验记录 -->
      <div class="record-section">
        <div class="section-title">核验记录</div>
        <el-tabs type="border-card">
          <el-tab-pane label="宿管核验">
            <el-descriptions :column="1" border>
              <el-descriptions-item label="物品检查">
                <div v-if="detail.dormChecked">
                  <el-tag class="mr-10" type="success"><vab-icon icon="check-line" /> 钥匙/门卡归还</el-tag>
                  <el-tag class="mr-10" type="success"><vab-icon icon="check-line" /> 家具完好</el-tag>
                  <el-tag class="mr-10" type="success"><vab-icon icon="check-line" /> 空调遥控器归还</el-tag>
                </div>
                <span v-else class="text-gray">待核验</span>
              </el-descriptions-item>
              <el-descriptions-item label="电表读数">
                {{ detail.meterReading ? `${detail.meterReading} kWh` : '-' }}
              </el-descriptions-item>
              <el-descriptions-item label="核验备注">
                {{ detail.dormRemark || '无' }}
              </el-descriptions-item>
              <el-descriptions-item label="核验人">
                {{ detail.dormChecker || '-' }}
              </el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>
          <el-tab-pane label="财务结算">
            <el-descriptions :column="1" border>
              <el-descriptions-item label="住宿费">
                <el-tag type="success">已结清</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="水电费">
                <el-tag v-if="detail.financeChecked" type="success">已结清</el-tag>
                <el-tag v-else type="danger">欠费 ¥ 15.80</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="结算时间">
                {{ detail.financeCheckTime || '-' }}
              </el-descriptions-item>
              <el-descriptions-item label="经办人">
                {{ detail.financeOperator || '-' }}
              </el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <template #footer>
      <el-button @click="visible = false">关闭</el-button>
    </template>
  </el-dialog>
</template>

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

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

const getStatusLabel = (status) => {
  const map = { pending: '待审批', checking: '核验中', completed: '已完成', rejected: '已驳回' }
  return map[status]
}
const getStatusType = (status) => {
  const map = { pending: 'warning', checking: 'primary', completed: 'success', rejected: 'danger' }
  return map[status]
}

const getStepActive = () => {
  if (!detail.value) return 0
  if (detail.value.status === 'completed') return 4
  if (detail.value.financeChecked) return 3
  if (detail.value.dormChecked) return 2
  return 1
}

const open = (row) => {
  // Merge with mock details
  detail.value = {
    ...row,
    dormCheckTime: row.dormChecked ? '2026-01-23 10:30:00' : '',
    financeCheckTime: row.financeChecked ? '2026-01-23 11:15:00' : '',
    completeTime: row.status === 'completed' ? '2026-01-23 11:20:00' : '',
    meterReading: row.dormChecked ? '1256.5' : '',
    dormRemark: row.dormChecked ? '房间卫生良好' : '',
    dormChecker: row.dormChecked ? '张宿管' : '',
    financeOperator: row.financeChecked ? '李会计' : ''
  }
  visible.value = true
}

defineExpose({
  open
})
</script>

<style lang="scss" scoped>
.mb-20 { margin-bottom: 20px; }
.mr-10 { margin-right: 10px; }
.text-gray { color: #909399; }
.section-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
  border-left: 4px solid var(--el-color-primary);
  padding-left: 10px;
}
</style>
