<template>
  <el-dialog
    v-model="visible"
    title="集中住宿配置"
    width="800px"
    destroy-on-close
    :close-on-click-modal="false"
  >
    <el-steps :active="activeStep" finish-status="success" align-center class="mb-20">
      <el-step title="选择目标区域" />
      <el-step title="筛选留校学生" />
      <el-step title="自动分配规则" />
      <el-step title="确认并执行" />
    </el-steps>

    <div v-if="activeStep === 0" class="step-content">
      <el-form label-width="120px">
        <el-form-item label="男生集中区域">
          <el-select v-model="config.maleArea" multiple placeholder="请选择楼栋/区域" style="width: 100%">
            <el-option label="1号楼 (男生公寓)" value="b1" />
            <el-option label="2号楼 (男生公寓)" value="b2" />
          </el-select>
        </el-form-item>
        <el-form-item label="女生集中区域">
          <el-select v-model="config.femaleArea" multiple placeholder="请选择楼栋/区域" style="width: 100%">
            <el-option label="3号楼 (女生公寓)" value="b3" />
            <el-option label="4号楼 (女生公寓)" value="b4" />
          </el-select>
        </el-form-item>
        <el-form-item label="时间范围">
          <el-date-picker
            v-model="config.timeRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width: 100%"
          />
        </el-form-item>
      </el-form>
    </div>

    <div v-if="activeStep === 1" class="step-content">
      <div class="mb-10 text-gray">系统已自动筛选出提交“留校申请”并审批通过的学生</div>
      <el-table :data="studentList" border stripe height="300">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="name" label="姓名" width="100" />
        <el-table-column prop="gender" label="性别" width="80" />
        <el-table-column prop="originalRoom" label="原宿舍" width="120" />
        <el-table-column prop="college" label="学院" width="150" />
        <el-table-column prop="reason" label="留校原因" show-overflow-tooltip />
      </el-table>
      <div class="mt-10 text-right">
        共筛选出 <span class="text-primary font-bold">{{ studentList.length }}</span> 名留校学生
      </div>
    </div>

    <div v-if="activeStep === 2" class="step-content">
      <el-form label-width="120px">
        <el-form-item label="分配策略">
          <el-radio-group v-model="config.strategy">
            <el-radio label="college">同学院集中</el-radio>
            <el-radio label="class">同班级集中</el-radio>
            <el-radio label="random">随机混住 (利用率优先)</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="原房保留">
          <el-switch v-model="config.keepOriginal" active-text="保留原床位归属" />
        </el-form-item>
        <el-form-item label="权限同步">
          <el-checkbox v-model="config.syncAccess">自动下发新宿舍门禁权限</el-checkbox>
          <el-checkbox v-model="config.cancelOriginal">冻结原宿舍门禁权限</el-checkbox>
        </el-form-item>
      </el-form>
    </div>

    <div v-if="activeStep === 3" class="step-content text-center">
      <el-result icon="info" title="准备就绪" sub-title="点击执行后，系统将自动进行房源分配并生成换房记录">
        <template #extra>
          <div class="summary-box">
            <p>预计迁移人数: {{ studentList.length }} 人</p>
            <p>目标区域: {{ config.maleArea.length + config.femaleArea.length }} 栋楼</p>
            <p>策略: {{ getStrategyLabel(config.strategy) }}</p>
          </div>
        </template>
      </el-result>
    </div>

    <template #footer>
      <el-button @click="visible = false">取消</el-button>
      <el-button v-if="activeStep > 0" @click="activeStep--">上一步</el-button>
      <el-button v-if="activeStep < 3" type="primary" @click="activeStep++">下一步</el-button>
      <el-button v-if="activeStep === 3" type="success" @click="handleExecute">确认执行集中</el-button>
    </template>
  </el-dialog>
</template>

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

const emit = defineEmits(['success'])

const visible = ref(false)
const activeStep = ref(0)

const config = reactive({
  maleArea: [],
  femaleArea: [],
  timeRange: [],
  strategy: 'college',
  keepOriginal: true,
  syncAccess: true,
  cancelOriginal: true
})

const studentList = ref([])

const getStrategyLabel = (val) => {
  const map = { college: '同学院集中', class: '同班级集中', random: '随机混住' }
  return map[val]
}

const open = () => {
  activeStep.value = 0
  // Reset config
  config.maleArea = []
  config.femaleArea = []
  config.strategy = 'college'
  
  // Mock data
  studentList.value = [
    { name: '梁健', gender: '男', originalRoom: '1-302-1', college: 'ZJE', reason: '科研项目留校' },
    { name: '鲁永波', gender: '男', originalRoom: '2-405-2', college: 'ZJUI', reason: '竞赛集训' },
    { name: '曹青青', gender: '女', originalRoom: '3-201-1', college: 'ZJE', reason: '勤工助学' },
  ]
  
  visible.value = true
}

const handleExecute = () => {
  ElMessage.success('集中住宿任务已提交，系统后台正在处理中...')
  emit('success')
  visible.value = false
}

defineExpose({
  open
})
</script>

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

.summary-box {
  text-align: left;
  background: #f5f7fa;
  padding: 15px;
  border-radius: 4px;
  p { margin: 5px 0; color: #606266; }
}
</style>
