<template>
  <div class="common-dialog">
    <div class="common-dialog-content">
      <div class="common-dialog-title-box">
        <h3 class="common-dialog-title">查看详情</h3>
      </div>
      <div class="common-dialog-box">
        <el-form ref="form" :model="formData" :rules="rules" label-width="auto">
          <el-form-item label="工程名称：" prop="name">
            <el-input v-model="formData.name" style="width: 468px !important" />
          </el-form-item>
          <el-form-item label="建设单位：" prop="unit">
            <el-input v-model="formData.unit" style="width: 468px !important" />
          </el-form-item>
          <el-form-item label="维护单位：" prop="maintainUnit">
            <el-input v-model="formData.maintainUnit" style="width: 468px !important" />
          </el-form-item>
          <el-form-item label="人防专业监理工程师：" prop="engineer">
            <el-input v-model="formData.engineer" style="width: 468px !important" />
          </el-form-item>
          <el-form-item label="建设地点：" prop="location">
            <el-input v-model="formData.location" style="width: 468px !important" />
          </el-form-item>
          <el-form-item label="操作方式：" prop="operation">
            <el-input v-model="formData.operation" style="width: 468px !important" />
          </el-form-item>
          <el-form-item label="应建人防地下室面积（㎡）：" prop="plannedArea">
            <el-input v-model="formData.plannedArea" style="width: 468px !important" />
          </el-form-item>
          <el-form-item label="实建人防地下室面积（㎡）：" prop="actualArea">
            <el-input v-model="formData.actualArea" style="width: 468px !important" />
          </el-form-item>
          <el-form-item label="更新时间：" prop="updateTime">
            <el-input v-model="formData.updateTime" style="width: 468px !important" />
          </el-form-item>
        </el-form>
        <div class="common-dialog-footer">
          <el-button type="primary" @click="closeDialog">返回</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { getPersonnel2 } from '@/api/dataManagement/dataManagement';

const emits = defineEmits(['close']);
const props = defineProps<{
  eventId: string | number;
}>();

const formData = ref({
  id: '',
  name: '',
  unit: '',
  maintainUnit: '',
  engineer: '',
  location: '',
  operation: '',
  plannedArea: '',
  actualArea: '',
  updateTime: ''
});

const closeDialog = () => {
  emits('close');
};

const fetchPersonnelData = async () => {
  const response = await getPersonnel2(props.eventId);
  if (response.code === 200) {
    formData.value = response.personnel;
  } else {
    ElMessage.error('未找到相关数据');
  }
};
onMounted(() => {
  fetchPersonnelData();
});
</script>

<style scoped></style>
