<template>
  <div>
    <el-form label-width="100px">
      <div v-for="(item, index) in detailList" :key="index">
        <el-form-item :label="item.prop" v-if="item.type == 1">{{
          data[item.field]
        }}</el-form-item>
        <el-form-item :label="item.prop" v-if="item.type == 2">
          <el-image
            style="width: 200px; height: auto"
            :src="data[item.field]"
            :fit="fit"
          ></el-image>
        </el-form-item>
        <el-form-item :label="item.prop" v-if="item.type == 3" class="imgList">
          <div v-for="(subItem, subIndex) in data[item.field]" :key="subIndex">
            <el-image
              style="width: 200px; height: auto"
              :src="subItem"
              :fit="fit"
            ></el-image>
          </div>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>
<script>
export default {
  props: {
    data: Object,
    default: {},
  },
  data() {
    return {
      detailList: [
        //type:1.字符串，2.图片，3.数组
        { prop: "姓名:", field: "RealName", type: 1 },
        { prop: "姓别:", field: "SexStr", type: 1 },
        { prop: "年龄:", field: "Age", type: 1 },
        { prop: "学历:", field: "EducationType", type: 1 },
        { prop: "出生日期:", field: "Birthday", type: 1 },
        { prop: "生肖:", field: "ShenXiao", type: 1 },
        { prop: "星座:", field: "ConoldBaseInfostellation", type: 1 },
        { prop: "体重:", field: "Weight", type: 1 },
        { prop: "身高:", field: "Height", type: 1 },
        { prop: "籍贯:", field: "NativePlace", type: 1 },
        { prop: "户口所在地:", field: "HuKou", type: 1 },
        { prop: "身份证号:", field: "IDCardNo", type: 1 },
        { prop: "身份证正面照:", field: "IDCard", type: 2 },
        { prop: "身份证反面照:", field: "IDCardBack", type: 2 },
        { prop: "毕业院校:", field: "SchoolInfo", type: 1 },
        { prop: "专业:", field: "MajorInfo", type: 1 },
        { prop: "职业:", field: "Job", type: 1 },
        { prop: "年薪:", field: "YearMoney", type: 1 },
        { prop: "房产信息:", field: "HouseInfo", type: 1 },
        { prop: "车辆信息:", field: "CarInfo", type: 1 },
        { prop: "母亲信息:", field: "MotherInfo", type: 1 },
        { prop: "父亲信息:", field: "FatherInfo", type: 1 },
        { prop: "其他家庭成员:", field: "OtherPople", type: 1 },
        { prop: "爱情宣言:", field: "IdealLove", type: 1 },
        { prop: "其它信息介绍:", field: "About", type: 1 },
        { prop: "照片墙:", field: "AlbumList", type: 3 },
      ],
    };
  },

  methods: {},
};
</script>
<style >
.imgList {
  display: flex;
  flex-wrap: wrap;
}
</style>