<template>
  <section class="document" v-if="isShow">
    <div class="card">
      <div class="info">
        <u-image border-radius="4" :src="top.detail.avatar" width="118" height="118" />
        <div class="fill">
          <b>{{ top.detail.realName || top.detail.name }}</b>
          <u-row>
            <span class="idNumber">{{resident.idNumber}}</span>
            <!-- <span class="idNumber" v-html="IDObj.id" />
            <a @tap="showID = !showID">{{ IDObj.btn }}</a> -->
          </u-row>
        </div>
      </div>
      <AiCell label="性别">{{ $dict.getLabel('sex', resident.sex) || '-' }}</AiCell>
      <AiCell label="出生日期">{{ resident.birthDate }}</AiCell>
      <AiCell label="年龄">{{ resident.age }}</AiCell>
      <AiCell label="籍贯">{{ resident.birthplaceAreaName }}</AiCell>
      <AiCell label="民族">{{ $dict.getLabel('nation', resident.nation) || '-' }}</AiCell>
      <AiCell label="文化程度">{{ $dict.getLabel('education', resident.education) || '-' }}</AiCell>
      <AiCell label="兵役状况">{{ $dict.getLabel('militaryStatus', resident.militaryStatus) || '-' }}</AiCell>
      <AiCell label="政治面貌">{{ $dict.getLabel('politicsStatus', resident.politicsStatus) || '-' }}</AiCell>
      <AiCell label="职业">{{ $dict.getLabel('job', resident.job) || '-' }}</AiCell>
      <AiCell label="宗教信仰">{{ $dict.getLabel('faithType', resident.faithType) || '-' }}</AiCell>
    </div>
    <div class="card">
      <AiCell title label="联络信息" />
      <AiCell label="联系方式">{{ resident.phone }}</AiCell>
      <AiCell label="现住址">{{ resident.currentAreaName }}
        <span v-if="resident.currentAddressGroup">{{resident.currentAddressGroup}}组</span>
        <span v-if="resident.currentAddressNo">{{resident.currentAddressNo}}户</span>
      </AiCell>
    </div>
    <!-- <div class="card">
      <AiCell title label="家庭信息" />
      <AiCell label="是否户主">{{ $dict.getLabel('householdName', resident.householdName) || '-' }}</AiCell>
      <AiCell label="与户主关系">{{ $dict.getLabel('householdRelation', resident.householdRelation) || '-' }}</AiCell>
      <AiCell label="现住址">{{ resident.householdAreaName + resident.householdAddress }}</AiCell>
    </div>
    <div class="card">
      <AiCell title label="家庭成员" />
      <AiTable :data="family" :colConfigs="colConfigs" />
    </div> -->
  </section>
</template>

<script>
export default {
  name: 'document',
  inject: ['top'],
  computed: {
    IDObj() {
      return this.showID
        ? {
            id: this.resident?.idNumber,
            btn: '隐藏',
          }
        : {
            id: this.resident?.idNumber?.replace(/(\d{10}).+/g, '$1******'),
            btn: '显示',
          }
    },
    colConfigs() {
      return [
        { label: '与户主关系', prop: 'householdRelation', width: '160rpx', dict: 'householdRelation' },
        { label: '姓名', prop: 'name', width: '120rpx' },
        { label: '性别', prop: 'sex', dict: 'sex' },
        { label: '年龄', prop: 'age' },
        { label: '身份证号', prop: 'idNumber', width: '320rpx' },
      ]
    },
    resident() {
      let obj = {}
      Object.keys(this.top.detail?.residentInfo?.resident || {}).map((e) => {
        obj[e] = this.top.detail?.residentInfo?.resident[e] || ''
      })
      return obj
    },
    family() {
      return this.top.detail?.residentInfo?.family?.map((e) => ({ ...e, householdRelation: e.householdRelation || '户主', idNumber : e.idNumber?.replace(/(\d{10}).+/g, '$1******')}))
    },
  },
  data() {
    return {
      showID: false,
      isShow: false,
      familyList: [],
    }
  },
  created() {
    this.$dict.load('sex', 'nation', 'education', 'job', 'faithType', 'politicsStatus', 'militaryStatus', 'householdRelation', 'householdName').then(() => {
      this.isShow = true
    })
    // console.log('居民档案性别(无字典)', this.resident.sex)
    // console.log('居民档案性别(有字典)', this.$dict.getLabel('sex', this.resident.sex))
    // console.log('居民档案字典值', this.$dict.getDict('sex'))
  },
  onShow() {
    // this.$dict.load('sex', 'nation', 'education', 'job', 'faithType', 'politicsStatus', 'militaryStatus', 'householdRelation', 'householdName')
    document.title = '居民详情'
  },
}
</script>

<style lang="scss" scoped>
.document {
  overflow-y: auto;
  background: #f5f5f5;

  .info {
    height: 186px;
    width: 100%;
    display: flex;
    align-items: center;

    .fill {
      color: #3c7fc8;
      margin-left: 24px;
      font-size: 28px;
      line-height: 40px;
      display: flex;
      flex-direction: column;

      b {
        font-size: 36px;
        color: #333;
        margin-bottom: 8px;
        line-height: 50px;
      }

      a {
        cursor: pointer;
      }

      .idNumber {
        margin-right: 16px;
        color: #999;
      }
    }
  }
}
</style>
