<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" label-width="auto">
          <el-form-item label="姓名：" prop="name">
            <el-input v-model="formData.name" style="width: 468px !important" disabled />
          </el-form-item>
          <el-form-item label="联系电话：" prop="contact_number">
            <el-input v-model="formData.contact_number" style="width: 468px !important" disabled />
          </el-form-item>
          <el-form-item label="性别：" prop="gender">
            <el-input v-model="formData.gender" style="width: 468px !important" disabled />
          </el-form-item>
          <el-form-item label="现在地址：" prop="current_address">
            <el-input v-model="formData.current_address" style="width: 468px !important" disabled />
          </el-form-item>
          <el-form-item label="职务：" prop="position">
            <el-input v-model="formData.position" style="width: 468px !important" disabled />
          </el-form-item>
          <el-form-item label="所属救援人员单位：" prop="unit_name">
            <el-input v-model="formData.unit_name" style="width: 468px !important" disabled />
          </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/comprehensiveGuarantee/reliefResourceManagement/reliefTalents';

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

const formData = ref({
  id:'',
  name: '',
  contact_number: '',
  gender: '',
  current_address: '',
  position: '',
  unit_name: ''
});

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>
