<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="name">
        <el-input v-model="form.name" placeholder="例如：一号书院">
          <template #prefix><vab-icon icon="building-line" /></template>
        </el-input>
      </el-form-item>
      <el-form-item label="楼宇类型" prop="type">
        <el-select v-model="form.type" style="width: 100%">
          <el-option label="本科生公寓" value="undergraduate" />
          <el-option label="研究生公寓" value="graduate" />
          <el-option label="留学生公寓" value="international" />
          <el-option label="教工公寓" value="staff" />
        </el-select>
      </el-form-item>
      <el-form-item label="总楼层" prop="floors">
        <el-input-number v-model="form.floors" :min="1" :max="50" style="width: 100%" />
      </el-form-item>
      <el-form-item label="房间数" prop="rooms">
        <el-input-number v-model="form.rooms" :min="1" :max="1000" style="width: 100%" />
      </el-form-item>
      <el-form-item label="负责人" prop="manager">
        <el-input v-model="form.manager" placeholder="宿管姓名">
           <template #prefix><vab-icon icon="user-line" /></template>
        </el-input>
      </el-form-item>
      <el-form-item label="联系电话" prop="phone">
        <el-input v-model="form.phone" placeholder="宿管联系电话">
           <template #prefix><vab-icon icon="phone-line" /></template>
        </el-input>
      </el-form-item>
      <el-form-item label="地址/位置" prop="address">
        <el-input v-model="form.address" type="textarea" />
      </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: '',
  name: '',
  type: 'undergraduate',
  floors: 6,
  rooms: 120,
  manager: '',
  phone: '',
  address: ''
})

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

const rules = {
  name: [{ required: true, message: '请输入楼宇名称', trigger: 'blur' }],
  type: [{ required: true, message: '请选择楼宇类型', trigger: 'change' }],
  manager: [{ required: true, message: '请输入负责人姓名', trigger: 'blur' }],
}

const open = (row) => {
  if (row) {
    isEdit.value = true
    Object.assign(form, row)
  } else {
    isEdit.value = false
    Object.assign(form, { 
      id: '', 
      name: '', 
      type: 'undergraduate', 
      floors: 6, 
      rooms: 120, 
      manager: '', 
      phone: '', 
      address: '' 
    })
  }
  visible.value = true
}

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

defineExpose({
  open
})
</script>
