<template>
  <div>
    <!-- 会员基础信息展示 -->
    <!-- {{ memberInfo }} -->
    <el-form
      :model="memberInfo"
      label-width="120px"
      class="dialog-info"
      inline
      v-if="memberInfo">
      <el-form-item label="姓名">
        {{ memberInfo.name }}
      </el-form-item>
      <el-form-item
        class="narrow-form-item"
        label="照片"
        v-if="memberInfo.Face && memberInfo.Face.faceImg">
        <div class="face-wrap">
          <div
            class="img">
            <img
              :src="`data:image/png;base64,${faceInfo.faceImg.replace(/[\r\n]/g, '')}`"
              width="120px">
          </div>
        </div>
      </el-form-item>

      <!-- memberInfo.IcCard样例信息：{"id":2471,"validStartDate":1684684800000,"validEndDate":1933343999000,"cardNo":"0253890836","memberId":5962} -->
      <el-form-item
        label="ic卡号"
        v-if="memberInfoValue && JSON.parse(memberInfoValue).IcCard">
        {{ JSON.parse(memberInfoValue).IcCard.cardNo }}
      </el-form-item>
      <el-form-item
        label="ic卡有效时间"
        v-if="memberInfoValue && JSON.parse(memberInfoValue).IcCard">
        {{ JSON.parse(memberInfoValue).IcCard.validStartDate | formatDate }}
      </el-form-item>
      <el-form-item
        label="ic卡到期时间"
        v-if="memberInfoValue && JSON.parse(memberInfoValue).IcCard">
        {{ JSON.parse(memberInfoValue).IcCard.validEndDate | formatDate }}
      </el-form-item>

      <!-- memberInfo.IdCard样例信息：{"idcardNo":"640101198001010858","id":33169,"validStartDate":1683820800000,"validEndDate":1952524799000,"memberId":5960} -->
      <el-form-item
        label="身份证号"
        v-if="memberInfoValue && JSON.parse(memberInfoValue).IdCard">
        {{ JSON.parse(memberInfoValue).IdCard.idcardNo }}
      </el-form-item>
      <el-form-item
        label="身份证有效时间"
        v-if="memberInfoValue && JSON.parse(memberInfoValue).IdCard">
        {{ JSON.parse(memberInfoValue).validStartDate | formatDate }}
      </el-form-item>
      <el-form-item
        label="身份证到期时间"
        v-if="memberInfoValue && JSON.parse(memberInfoValue).IdCard">
        {{ JSON.parse(memberInfoValue).validEndDate | formatDate }}
      </el-form-item>
    </el-form>

    <el-form
      :model="memberInfo"
      label-width="120px"
      class="dialog-info"
      inline
      v-if="memberInfo && memberInfo.parentId === 0">
      <!-- 子卡不含基本信息，只有人脸和姓名，这里是主卡专属 -->
      <el-form-item label="证件类型">
        {{ memberInfo.papersType | paperType }}
      </el-form-item>
      <el-form-item label="证件号码">
        {{ memberInfo.papersId }}
      </el-form-item>
      <el-form-item label="手机">
        {{ memberInfo.phone }}
      </el-form-item>
      <el-form-item label="住址">
        {{ memberInfo.address }}
      </el-form-item>
      <el-form-item label="备注">
        {{ memberInfo.remark }}
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  props: {
    memberInfoValue: {
      type: String,
      default: () => []
    }
    /* 其实这里从父组件接收到的是String而不是Object, {{ typeof(memberInfoValue) }} 为string，弄不好导致异常 */
  },

  computed: {
    /**
     * memberInfo.IcCard样例信息：{"id":2471,"validStartDate":1684684800000,"validEndDate":1933343999000,"cardNo":"0253890836","memberId":5962}
     * memberInfo.IdCard样例信息：{"idcardNo":"640101198001010858","id":33169,"validStartDate":1683820800000,"validEndDate":1952524799000,"memberId":5960}
     * 如果 memberInfoValue 是一个字符串，则需要使用 JSON.parse() 方法将其解析为一个 JavaScript 对象，然后才能访问该对象的属性。
     * <div v-if="memberInfoValue && JSON.parse(memberInfoValue).IdCard">
     *   {{ JSON.parse(memberInfoValue).IdCard.idcardNo }}
     * </div>
     * 检查 memberInfoValue 是否存在，并且它是否包含一个名为 IdCard 的子对象。如果这两个条件都满足，则使用 JSON.parse() 方法解析 memberInfoValue 对象并输出身份证号码
     * 注意，如果 memberInfoValue 的值为 null 或者 undefined，则需要添加判断以避免出现错误。
     */
    memberInfo () {
      return JSON.parse(this.memberInfoValue)
    },
    faceInfo () {
      return this.memberInfo.Face
    }
  }
  // {"papersId":"","address":"","phone":"","name":"111","IdCard":{"idcardNo":"640101198001010858","id":33169,"validStartDate":1683820800000,"validEndDate":1952524799000,"memberId":5960},"remark":"","papersType":"","parentId":0}
}
/**
 * 钱雨喧含人脸的详细测试信息
 * "newValue": "{"name":"钱雨喧","Face":{"validStartTime":1661875200000,"validEndTime":1693411200000,"faceImg":"testdafsdasd","name":"钱雨喧","id":35260},"parentId":5959}",
 *
 * "oldValue": "{\"papersId\":\"\",\"address\":\"\",\"phone\":\"\",\"name\":\"111\",\"IdCard\":{\"idcardNo\":\"640101198001010858\",\"id\":33169,\"validStartDate\":1683820800000,\"validEndDate\":1952524799000,\"memberId\":5960},\"remark\":\"\",\"papersType\":\"\",\"parentId\":0}",
 *  "newValue": "{\"papersId\":\"342623199604135933\",\"address\":\"浙江省杭州市西湖区\",\"phone\":\"18225534714\",\"name\":\"潘宏稳\",\"IdCard\":{\"idcardNo\":\"640101198001010858\",\"id\":33169,\"validStartDate\":1683820800000,\"validEndDate\":1952524799000,\"memberId\":5960},\"remark\":\"\",\"papersType\":\"ID_CARD\",\"parentId\":0}",
 */
/*
  子卡信息比较少，就是只有人名和人脸信息，不含基本信息，可通过parentId是否是0来判断是否是主卡。下面是一个副卡信息：
  {
    "name": "钱雨喧",
    "Face": {
      "validStartTime": 1661875200000,
      "validEndTime": 1693411200000,
      "faceImg": "testdafsdasd",
      "name": "钱雨喧",
      "id": 35260
    },
    "parentId": 5959
  }
*/
</script>
<style lang="scss" scoped>
.face-wrap {
  img {
    display: block;
  }
  .img + .img {
    margin-top: 5px;
  }
  .info {
    color: #fff;  text-align: center;
  }
  .info.success {
    text-align: center; background: rgb(12, 143, 0);
  }
  .info.failed {
    text-align: center; background: rgb(192, 23, 46);
  }
  .info.normal {
    text-align: center; background: #2d62a8;
  }
}
</style>
