<template>
  <el-dialog
    v-model="dialogVisible"
    title="入住办理流程"
    width="800px"
    :close-on-click-modal="false"
    destroy-on-close
  >
    <el-steps :active="activeStep" finish-status="success" align-center class="mb-40">
      <el-step title="身份核验" description="确认学生身份信息" />
      <el-step title="房源分配" description="选择或确认床位" />
      <el-step title="权限下发" description="门禁与电控授权" />
    </el-steps>

    <div v-loading="stepLoading" class="step-content">
      <!-- Step 1: 身份核验 -->
      <div v-if="activeStep === 0" class="step-pane">
        <el-descriptions title="学生基础信息" border :column="2">
          <el-descriptions-item label="姓名">{{ currentStudent.name }}</el-descriptions-item>
          <el-descriptions-item label="学号">{{ currentStudent.id }}</el-descriptions-item>
          <el-descriptions-item label="性别">{{ currentStudent.gender }}</el-descriptions-item>
          <el-descriptions-item label="身份证号">33010620020101****</el-descriptions-item>
          <el-descriptions-item label="学院">{{ currentStudent.college }}</el-descriptions-item>
          <el-descriptions-item label="专业">{{ currentStudent.major }}</el-descriptions-item>
        </el-descriptions>
        
        <div class="verify-box mt-20">
          <div class="photo-upload">
            <el-upload
              class="avatar-uploader"
              action="#"
              :show-file-list="false"
              :auto-upload="false"
              :on-change="handlePhotoChange"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon"><plus /></el-icon>
            </el-upload>
            <div class="text-center mt-10 text-gray">点击上传或拍摄现场照片</div>
          </div>
          <div class="verify-result">
            <el-alert
              title="身份核验通过"
              type="success"
              :closable="false"
              show-icon
              description="系统已自动比对教务数据，人脸匹配度 98%"
            />
          </div>
        </div>
      </div>

      <!-- Step 2: 房源分配 -->
      <div v-if="activeStep === 1" class="step-pane">
        <el-form label-width="100px">
          <el-form-item label="分配方式">
            <el-radio-group v-model="assignType">
              <el-radio label="auto">系统推荐</el-radio>
              <el-radio label="manual">手动选择</el-radio>
            </el-radio-group>
          </el-form-item>
          
          <div v-if="currentStudent.preAssigned" class="pre-assigned-info mb-20">
            <el-alert title="该学生已有预分配床位" type="info" show-icon :closable="false">
              <span class="font-bold ml-10">{{ currentStudent.preAssigned }}</span>
            </el-alert>
          </div>

          <el-form-item label="选择楼宇">
            <el-select v-model="form.building" placeholder="请选择楼宇" style="width: 100%">
              <el-option label="北区1号楼 (男生公寓)" value="1" />
              <el-option label="北区2号楼 (男生公寓)" value="2" />
              <el-option label="南区A栋 (女生公寓)" value="3" />
            </el-select>
          </el-form-item>
          <el-form-item label="选择房间">
            <el-cascader
              v-model="form.room"
              :options="roomOptions"
              placeholder="楼层 / 房间 / 床位"
              style="width: 100%"
            />
          </el-form-item>
          <el-form-item label="入住类型">
            <el-select v-model="form.checkInType" style="width: 100%">
              <el-option label="正常入学" value="normal" />
              <el-option label="临时住宿" value="temp" />
              <el-option label="交换访学" value="exchange" />
            </el-select>
          </el-form-item>
        </el-form>
      </div>

      <!-- Step 3: 权限下发 -->
      <div v-if="activeStep === 2" class="step-pane text-center">
        <div class="auth-status-list">
          <div class="auth-item success">
            <vab-icon icon="checkbox-circle-line" class="icon" />
            <div class="info">
              <h4>门禁权限已下发</h4>
              <p>包含：园区大门、{{ form.building || '北区1号楼' }}单元门、{{ form.room?.[1] || '302' }}房间门锁</p>
            </div>
          </div>
          <div class="auth-item success">
            <vab-icon icon="checkbox-circle-line" class="icon" />
            <div class="info">
              <h4>智能控电已绑定</h4>
              <p>已关联房间电表，初始赠送电量 30kWh</p>
            </div>
          </div>
          <div class="auth-item warning">
            <vab-icon icon="loader-2-line" class="icon spin" />
            <div class="info">
              <h4>校园网认证同步中...</h4>
              <p>预计 5 分钟后生效</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button v-if="activeStep > 0 && activeStep < 3" @click="activeStep--">上一步</el-button>
        <el-button v-if="activeStep < 2" type="primary" @click="handleNext">下一步</el-button>
        <el-button v-if="activeStep === 2" type="success" @click="handleFinish">完成办理</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const emit = defineEmits(['success'])

const dialogVisible = ref(false)
const activeStep = ref(0)
const stepLoading = ref(false)
const imageUrl = ref('')
const assignType = ref('auto')
const currentStudent = ref({})
const form = reactive({
  building: '',
  room: [],
  checkInType: 'normal'
})

// Mock Cascader Options
const roomOptions = [
  {
    value: '3F',
    label: '3楼',
    children: [
      {
        value: '301',
        label: '301室 (4人间)',
        children: [
          { value: '1', label: '1号床 (空)' },
          { value: '2', label: '2号床 (空)' },
        ]
      },
      {
        value: '302',
        label: '302室 (4人间)',
        children: [
          { value: '3', label: '3号床 (空)' },
        ]
      }
    ]
  }
]

const open = (student) => {
  currentStudent.value = student
  dialogVisible.value = true
  activeStep.value = 0
  imageUrl.value = ''
  // Reset Form
  form.building = student.preAssigned ? '1' : '' // Mock
  form.room = []
}

const handlePhotoChange = (file) => {
  imageUrl.value = URL.createObjectURL(file.raw)
}

const handleNext = () => {
  stepLoading.value = true
  setTimeout(() => {
    stepLoading.value = false
    activeStep.value++
  }, 600)
}

const handleFinish = () => {
  dialogVisible.value = false
  ElMessage.success(`学生 ${currentStudent.value.name} 入住办理成功！`)
  emit('success', currentStudent.value)
}

defineExpose({
  open
})
</script>

<style lang="scss" scoped>
.mb-40 { margin-bottom: 40px; }
.mb-20 { margin-bottom: 20px; }
.mt-20 { margin-top: 20px; }
.mt-10 { margin-top: 10px; }
.ml-10 { margin-left: 10px; }
.text-primary { color: var(--el-color-primary); }
.text-gray { color: #909399; }
.font-bold { font-weight: bold; }
.text-center { text-align: center; }

.step-content {
  min-height: 300px;
  padding: 0 40px;
}

// 照片上传样式
.avatar-uploader {
  :deep(.el-upload) {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
    
    &:hover {
      border-color: var(--el-color-primary);
    }
  }
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
  line-height: 178px;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.verify-box {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  
  .verify-result {
    flex: 1;
    padding-top: 20px;
  }
}

// 权限状态样式
.auth-status-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 500px;
  margin: 0 auto;

  .auth-item {
    display: flex;
    align-items: center;
    padding: 15px;
    border-radius: 8px;
    background: #f5f7fa;
    text-align: left;
    
    .icon {
      font-size: 24px;
      margin-right: 15px;
      
      &.spin {
        animation: rotate 2s linear infinite;
      }
    }

    .info {
      h4 { margin: 0 0 5px 0; font-size: 16px; }
      p { margin: 0; font-size: 13px; color: #909399; }
    }

    &.success {
      background: #f0f9eb;
      .icon { color: #67c23a; }
      h4 { color: #67c23a; }
    }
    
    &.warning {
      background: #fdf6ec;
      .icon { color: #e6a23c; }
      h4 { color: #e6a23c; }
    }
  }
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
</style>
