<template>
  <el-dialog v-model="visible" title="退宿审批办理" width="700px" destroy-on-close>
    <div v-if="currentApply" class="process-box">
      <el-descriptions border :column="2" class="mb-20">
        <el-descriptions-item label="申请人">{{ currentApply.studentName }}</el-descriptions-item>
        <el-descriptions-item label="退宿房间">{{ currentApply.room }}</el-descriptions-item>
        <el-descriptions-item label="退宿原因" :span="2">{{ currentApply.reason }}</el-descriptions-item>
      </el-descriptions>

      <el-tabs type="border-card">
        <el-tab-pane label="宿管核验 (物品/水电)">
          <el-form label-width="100px" class="mt-10">
            <el-form-item label="物品检查">
              <el-checkbox-group v-model="checkForm.items">
                <el-checkbox label="钥匙/门卡归还" />
                <el-checkbox label="家具完好" />
                <el-checkbox label="空调遥控器归还" />
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="水电抄表">
              <el-input v-model="checkForm.meterReading" placeholder="当前电表读数" style="width: 200px">
                <template #append>kWh</template>
              </el-input>
            </el-form-item>
            <el-form-item label="备注">
              <el-input v-model="checkForm.dormRemark" type="textarea" />
            </el-form-item>
            <el-form-item>
              <el-button type="success" @click="submitDormCheck" :disabled="currentApply.dormChecked">确认核验通过</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="财务结算 (费用)">
          <el-alert title="请确认该学生无欠费记录，若有余额需先办理退费。" type="info" show-icon :closable="false" class="mb-20" />
          <el-descriptions :column="1" border>
            <el-descriptions-item label="住宿费">
              <el-tag type="success">已结清</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="水电费">
              <el-tag type="danger">欠费 ¥ 15.80</el-tag>
              <el-button type="text" class="ml-10">去缴费</el-button>
            </el-descriptions-item>
            <el-descriptions-item label="物品赔偿">
              <span class="text-gray">无</span>
            </el-descriptions-item>
          </el-descriptions>
          <div class="mt-20 text-center">
            <el-button type="success" @click="submitFinanceCheck" :disabled="currentApply.financeChecked">确认结算完成</el-button>
          </div>
        </el-tab-pane>
      </el-tabs>

      <div class="final-action mt-20" v-if="currentApply.dormChecked && currentApply.financeChecked">
        <el-alert title="各项核验均已通过，可以进行最终退宿确认。" type="success" show-icon :closable="false" class="mb-10" />
        <el-button type="primary" class="w-full" @click="handleFinalConfirm">确认退宿并离校</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const emit = defineEmits(['success'])

const visible = ref(false)
const currentApply = ref<any>(null)

const checkForm = reactive({
  items: [],
  meterReading: '',
  dormRemark: ''
})

const open = (row: any) => {
  currentApply.value = { ...row } // Copy
  checkForm.items = []
  checkForm.meterReading = ''
  checkForm.dormRemark = ''
  visible.value = true
}

const submitDormCheck = () => {
  if (checkForm.items.length < 3) {
    ElMessage.warning('请确认所有物品均已检查归还')
    return
  }
  currentApply.value.dormChecked = true
  ElMessage.success('宿管核验通过')
}

const submitFinanceCheck = () => {
  currentApply.value.financeChecked = true
  ElMessage.success('财务结算通过')
}

const handleFinalConfirm = () => {
  ElMessageBox.confirm('确认完成该学生的退宿办理吗？系统将自动释放床位并停止计费。', '最终确认').then(() => {
    visible.value = false
    ElMessage.success('退宿办理成功')
    emit('success', currentApply.value)
  })
}

defineExpose({
  open
})
</script>

<style lang="scss" scoped>
.mb-20 { margin-bottom: 20px; }
.mb-10 { margin-bottom: 10px; }
.mt-10 { margin-top: 10px; }
.mt-20 { margin-top: 20px; }
.ml-10 { margin-left: 10px; }
.w-full { width: 100%; }
.text-center { text-align: center; }
.text-gray { color: #909399; }

.process-box {
  padding: 0 10px;
}
</style>
