<template>
  <div>
    <a-row :gutter="20">
      <!-- 基本信息 -->
      <a-col :span="8">
        <div ><span class="label">服务对象姓名姓名:</span> {{ formData.name || '-' }}</div>
      </a-col>
      <a-col :span="8">
        <div ><span class="label">性别:</span> {{ formData.gender || '-' }}</div>
      </a-col>
            <a-col :span="8">
        <div ><span class="label">出生日期:</span> {{ formData.birthDate || '-' }}</div>
      </a-col>
           <a-col :span="8">
        <div ><span class="label">关爱巡访电话:</span> {{ formData.careVisitPhone || '-' }}</div>
      </a-col>
            <a-col :span="8">
        <div ><span class="label">联系方式:</span> {{ formData.contact1 || '-' }}</div>
      </a-col>
            <a-col :span="8">
        <div ><span class="label">其他电话1:</span> {{ formData.otherPhone1 || '-' }}</div>
      </a-col>
      <a-col :span="8">
        <div ><span class="label">其他电话2:</span> {{ formData.otherPhone2 || '-' }}</div>
      </a-col>
            <a-col :span="8">
        <div ><span class="label">联系状态:</span> {{ formData.contactStatus || '-' }}</div>
      </a-col>
      
      <a-col :span="8">
        <div ><span class="label">社保卡号:</span> {{ formData.socialSecurityCardNumber || '-' }}</div>
      </a-col>
            <a-col :span="8">
        <div ><span class="label">证件类型:</span> {{ formData.identityType || '-' }}</div>
      </a-col>
      <a-col :span="8">
        <div ><span class="label">证件号码:</span> {{ formData.idNumber || '-' }}</div>
      </a-col>

      <a-col :span="24">
        <div >
          <span class="label">家庭地址:</span>
          {{ formatArea(formData.homeAreaLabels) }} {{ formData.homeDetailAddress || '' }}
          <span v-if="formData.lag && formData.lat" style="color: #999;">
            (经度: {{ formData.lag }}, 纬度: {{ formData.lat }})
          </span>
        </div>
      </a-col>
   <a-col :span="8">
        <div ><span class="label">护理等级:</span> {{ formData.nursingLevel || '-' }}</div>
      </a-col>
   <a-col :span="8">
        <div ><span class="label">健康状况:</span> {{ formData.healthStatus || '-' }}</div>
      </a-col>
 
      <a-col :span="8">
        <div ><span class="label">生存状态:</span> {{ formData.survivalStatus || '-' }}</div>
      </a-col>
      <a-col :span="8">
        <div ><span class="label">服务状态:</span> {{ formData.serviceStatus || '-' }}</div>
      </a-col>

      <a-col :span="8">
        <div ><span class="label">服务形式:</span> {{ formData.serviceForm || '-' }}</div>
      </a-col>
      <a-col :span="24">
        <div >
          <span class="label">户籍地址:</span>
          {{ formatArea(formData.houseAreaLabels) }} {{ formData.householdDetailAddress || '' }}
        </div>
      </a-col>

      <!-- 政府购买服务时间 -->
      <a-col :span="8">
        <div >
          <span class="label">政府购买服务开始时间(起):</span>
          {{ formatDate(formData.governmentPurchasedServiceStartDateStart) }}
        </div>
      </a-col>
      <a-col :span="8">
        <div >
          <span class="label">政府购买服务开始时间(止):</span>
          {{ formatDate(formData.governmentPurchasedServiceStartDateEnd) }}
        </div>
      </a-col>

      <!-- 其他字段 -->
      <a-col :span="8">
        <div ><span class="label">居住情况:</span> {{ formData.livingSituation || '-' }}</div>
      </a-col>
      <a-col :span="8">
        <div ><span class="label">子女情况:</span> {{ formData.childrenSituation || '-' }}</div>
      </a-col>
      <a-col :span="8">
        <div ><span class="label">统计分类:</span> {{ formData.statisticsCategory || '-' }}</div>
      </a-col>

      <a-col :span="8">
        <div ><span class="label">智力情况:</span> {{ formData.intellectualSituation || '-' }}</div>
      </a-col>
      <a-col :span="8">
        <div >
          <span class="label">长期照料失能子女:</span>
          {{ formData.longTermCareForDisabledChildren === 'true' ? '是' : formData.longTermCareForDisabledChildren === 'false' ? '否' : '-' }}
        </div>
      </a-col>
      <a-col :span="8">
        <div ><span class="label">子女探望情况:</span> {{ formData.childrenVisitStatus || '-' }}</div>
      </a-col>

      <a-col :span="8">
        <div >
          <span class="label">人户分离:</span>
          {{ formData.householdResidenceSeparation === 'true' ? '是' : formData.householdResidenceSeparation === 'false' ? '否' : '-' }}
        </div>
      </a-col>
      <a-col :span="8">
        <div ><span class="label">民族:</span> {{ formData.ethnicity || '-' }}</div>
      </a-col>
      <a-col :span="8">
        <div >
          <span class="label">完成能力评估:</span>
          {{ formData.completedCapacityAssessment === 'true' ? '是' : formData.completedCapacityAssessment === 'false' ? '否' : '-' }}
        </div>
      </a-col>

      <a-col :span="8">
        <div >
          <span class="label">住出租屋/地下室:</span>
          {{ formData.livesInRentedRoomOrBasement === 'true' ? '是' : formData.livesInRentedRoomOrBasement === 'false' ? '否' : '-' }}
        </div>
      </a-col>
      <a-col :span="8">
        <div ><span class="label">经济来源:</span> {{ formData.economicSource || '-' }}</div>
      </a-col>
      <a-col :span="8">
        <div ><span class="label">文化程度:</span> {{ formData.educationLevel || '-' }}</div>
      </a-col>

      <a-col :span="8">
        <div ><span class="label">宗教信仰:</span> {{ formData.religion || '-' }}</div>
      </a-col>
      <a-col :span="8">
        <div ><span class="label">职业情况:</span> {{ formData.occupation || '-' }}</div>
      </a-col>
      <a-col :span="8">
        <div ><span class="label">政治面貌:</span> {{ formData.politicalAffiliation || '-' }}</div>
      </a-col>

      <a-col :span="8">
        <div ><span class="label">婚姻情况:</span> {{ formData.maritalStatus || '-' }}</div>
      </a-col>

      <!-- 数组类字段 -->
      <a-col :span="24" v-if="formData.idCardPhotos && formData.idCardPhotos.length > 0">
        <div >
          <span class="label">身份证照片:</span>
          <div style="margin-top: 8px;">
            <a-image
              v-for="(url, index) in formData.idCardPhotos"
              :key="index"
              :src="url"
              fit="cover"
              style="width: 100px; height: 60px; margin-right: 8px;"
              :preview-src-list="formData.idCardPhotos"
            />
          </div>
        </div>
      </a-col>
    </a-row>
    </div>
</template>

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

const formData=ref({});

// 格式化地址数组
const formatArea = (areaArray) => {
  if (!areaArray || !Array.isArray(areaArray)) return '-';
  return areaArray.filter(item => item).join(' / ');
};

// 格式化时间
const formatDate = (date) => {
  if (!date) return '-';
  return new Date(date).toLocaleDateString();
};

// 打开文件链接
const openFile = (url) => {
  window.open(url, '_blank');
};
</script>
<style scoped>
.customer-detail {
  padding: 20px;
  font-size: 14px;
  color: #333;
}

.field-item {
  margin-bottom: 12px;
  line-height: 1.6;
}

.label {
  display: inline-block;
  line-height: 45px;
}

.cursor-pointer {
  cursor: pointer;
}

:deep(.el-tag) {
  cursor: pointer;
}
</style>
