<template>
 <div>
    <a-row :gutter="20">
      <!-- 基本信息 -->
      <a-col :span="6">
        <div><span class="label">残疾证号:</span> {{ formData.disabledPerson.disabledNo || '-' }}</div>
      </a-col>
      <a-col :span="6">
        <div><span class="label">残疾类型:</span> {{ formData.disabledPerson.disabledType || '-' }}</div>
      </a-col>
      <a-col :span="6">
        <div><span class="label">残疾等级:</span> {{ formData.disabledPerson.disabledLv || '-' }}</div>
      </a-col>
      <a-col :span="6">
        <div><span class="label">是否已签订托养协议:</span> {{ formData.disabledPerson.agreementSigned || '-' }}</div>
      </a-col>
      <a-col :span="6">
        <div><span class="label">托养起止时间:</span> {{ formData.disabledPerson.starCareService || '-' }} - {{ formData.disabledPerson.endCareService || '-' }}</div>
      </a-col>

      <a-col :span="24" v-if="formData.disabledPerson.careServiceImgs && formData.disabledPerson.careServiceImgs.length > 0">
        <div>
          <span class="label">托养协议照片:</span>
          <div style="margin-top: 8px;">
            <a-image v-for="(url, index) in formData.disabledPerson.careServiceImgs" :key="index" :src="url" fit="cover"
              style="width: 100px; height: 60px; margin-right: 8px;" :preview-src-list="formData.disabledPerson.careServiceImgs" />
          </div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script setup>
import { ref, defineProps } from 'vue';
const props = defineProps({
  formData: {
    type: Object,
    default: () => ({})
  }
});
</script>
<style scoped>
.label {
  display: inline-block;
  line-height: 45px;
}
</style>