<template>


  <!-- 新增火情对话框 -->
  
</template>

<script setup>
import { ref, reactive } from 'vue'

const props = defineProps(["showDialog"])
// 建筑列表数据
const buildingList = ref([
  { id: '1', name: '1号楼', floors: ['1层', '2层', '3层', '4层', '5层'] },
  { id: '2', name: '2号楼', floors: ['1层', '2层', '3层'] },
  { id: '3', name: '3号楼', floors: ['1层', '2层'] }
])

// 楼层列表（动态）
const floorList = ref([])

// 表单数据
const fireForm = reactive({
  building: '',
  floor: '',
  firePoint: '',
  fireLevel: '',
  description: ''
})

// 验证规则
const rules = {
  building: [{ required: true, message: '请选择建筑', trigger: 'change' }],
  floor: [{ required: true, message: '请选择楼层', trigger: 'change' }],
  firePoint: [
    { required: true, message: '请输入着火点', trigger: 'blur' },
    { max: 100, message: '长度不超过100个字符', trigger: 'blur' }
  ],
  fireLevel: [{ required: true, message: '请选择火源等级', trigger: 'change' }],
  description: [
    { required: true, message: '请输入详细描述', trigger: 'blur' },
    { max: 300, message: '长度不超过300个字符', trigger: 'blur' }
  ]
}

// 对话框控制
const showDialog = ref(false)
const formRef = ref(null)

// 建筑选择变化处理
const handleBuildingChange = (buildingId) => {
  const building = buildingList.value.find(b => b.id === buildingId)
  floorList.value = building ? building.floors : []
  fireForm.floor = ''
}

// 提交表单
const submitForm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      // 这里实际应该调用API提交数据
      console.log('提交火情数据:', {
        ...fireForm,
        buildingName: buildingList.value.find(b => b.id === fireForm.building)?.name || ''
      })
      
      // 提交成功后关闭对话框并重置表单
      showDialog.value = false
      formRef.value.resetFields()
    }
  })
}
</script>



<style scoped>
/* 模拟数据行的特殊样式 */
:deep(.el-table .simulated-row) {
  background-color: rgba(16, 42, 77, 0.3);
  
  &:hover td {
    background-color: rgba(16, 42, 77, 0.5) !important;
  }
}

/* 火源等级选择器样式 */
:deep(.el-table .el-select) {
  width: 100%;
}

/* 图片上传样式 */
:deep(.el-upload-list--picture-card .el-upload-list__item) {
  width: 100px;
  height: 100px;
}

/* 轮播图样式 */
:deep(.el-carousel__item) {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f7fa;
}
</style>