<template>
  <el-dialog
    v-model="visible"
    :title="title"
    width="500px"
  >
    <el-form ref="formRef" :model="form" :rules="rules" label-width="100px" label-position="top">
      <el-form-item label="所属楼宇" prop="buildingId">
        <el-select v-model="form.buildingId" style="width: 100%" placeholder="选择楼宇">
          <el-option label="北区1号楼" value="1" />
          <el-option label="北区2号楼" value="2" />
          <el-option label="南区A栋" value="3" />
          <el-option label="南区B栋" value="4" />
        </el-select>
      </el-form-item>
      <el-form-item label="楼层" prop="floor">
        <el-input-number v-model="form.floor" :min="1" :max="30" style="width: 100%" />
      </el-form-item>
      <el-form-item label="房间号" prop="roomNo">
        <el-input v-model="form.roomNo" placeholder="例如: 302" />
      </el-form-item>
      <el-form-item label="房间类型" prop="type">
        <el-select v-model="form.type" style="width: 100%">
          <el-option label="四人间" value="四人间" />
          <el-option label="双人间" value="双人间" />
          <el-option label="单人间" value="单人间" />
        </el-select>
      </el-form-item>
      <el-form-item label="住宿性别" prop="gender">
        <el-radio-group v-model="form.gender">
          <el-radio label="male">男生</el-radio>
          <el-radio label="female">女生</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="床位数" prop="capacity">
        <el-input-number v-model="form.capacity" :min="1" :max="8" />
      </el-form-item>
      <el-form-item label="住宿费" prop="price">
        <el-input-number v-model="form.price" :min="0" :step="100" />
        <span class="ml-10">元/年</span>
      </el-form-item>
      <el-form-item label="当前状态" prop="status">
        <el-select v-model="form.status">
          <el-option label="正常" value="active" />
          <el-option label="维修中" value="maintenance" />
          <el-option label="预留" value="reserved" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="handleSubmit">保存</el-button>
    </template>
  </el-dialog>
</template>

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

const emit = defineEmits(['success'])

const visible = ref(false)
const isEdit = ref(false)
const formRef = ref(null)

const form = reactive({
  id: '',
  buildingId: '',
  floor: 1,
  roomNo: '',
  type: '四人间',
  gender: 'male',
  capacity: 4,
  price: 1200,
  status: 'active'
})

const title = computed(() => isEdit.value ? '编辑房间信息' : '新增房间')

const rules = {
  buildingId: [{ required: true, message: '请选择楼宇', trigger: 'change' }],
  roomNo: [{ required: true, message: '请输入房间号', trigger: 'blur' }],
  type: [{ required: true, message: '请选择房间类型', trigger: 'change' }],
}

const open = (row) => {
  if (row) {
    isEdit.value = true
    Object.assign(form, row)
  } else {
    isEdit.value = false
    Object.assign(form, { 
      id: '', 
      buildingId: '', 
      floor: 1, 
      roomNo: '', 
      type: '四人间', 
      gender: 'male', 
      capacity: 4, 
      price: 1200, 
      status: 'active' 
    })
  }
  visible.value = true
}

const handleSubmit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      ElMessage.success('保存成功')
      emit('success')
      visible.value = false
    }
  })
}

defineExpose({
  open
})
</script>

<style lang="scss" scoped>
.ml-10 { margin-left: 10px; }
</style>
