<template>
  <section class="authInfo">
    <div class="headerCard flex card">
      <div class="avatar">
        <open-data type="userAvatarUrl" lang="zh_CN" class="user-img"/>
      </div>
      <div class="flex fill">
        <div class="fill">
          <b v-text="user.realName"/>
          <div class="color-999" v-text="sexAge"/>
        </div>
        <div class="blue" v-if="isOwner">户主</div>
      </div>
    </div>
    <div class="card">
      <b class="title" v-text="`基本信息`"/>
      <view class="item flex spb" v-for="row in baseInfo" :key="row.prop">
        <span class="color-999" v-text="row.label"/>
        <div v-if="row.dict" v-text="$dict.getLabel(row.dict,detail[row.prop])||'-'"/>
        <div v-else v-text="detail[row.prop]||'-'"/>
      </view>
    </div>
    <div class="card">
      <b class="title" v-text="`联络方式`"/>
      <view class="item" :class="{spb:!row.topLabel,flex:!row.topLabel}" v-for="row in contract" :key="row.prop">
        <span class="color-999" v-text="row.label"/>
        <div v-text="detail[row.prop]||'-'"/>
      </view>
    </div>
    <div class="fixed-bottom">
      <u-button type="primary" @click="apply">
        <text style="font-size: 16px" v-text="`申请修改`"/>
      </u-button>
    </div>
  </section>
</template>

<script>
import {mapState} from "vuex";

export default {
  name: "authInfo",
  appName: "我的档案",
  data() {
    return {
      detail: {},
      baseInfo: [
        {label: "身份证号", prop: "idNumber"},
        {label: "籍贯", prop: "birthplaceAreaName"},
        {label: "民族", prop: "nation", dict: "nation"},
        {label: "文化程度", prop: "education", dict: "education"},
        {label: "政治面貌", prop: "politicsStatus", dict: "politicsStatus"},
        {label: "兵役状况", prop: "militaryStatus", dict: "militaryStatus"},
        {label: "宗教信仰", prop: "faithType", dict: "faithType"},
        {label: "职业", prop: "job", dict: "job"},
      ],
      contract: [
        {label: "联系方式", prop: "phone"},
        {label: "现住址", prop: "currentAreaName"},
        {label: "详细住址", prop: "currentAddress", topLabel: true},
        {label: "户籍地址", prop: "householdAreaName"},
        {label: "详细地址", prop: "householdAddress", topLabel: true},
      ]
    }
  },
  computed: {
    ...mapState(['user']),
    sexAge() {
      let {idNumber, gender} = this.$idCardNoUtil.getIdCardInfo(this.user.idNumber), age = this.$calcAge(idNumber)
      return `${this.$dict.getLabel("sex", gender) || ""} ${age ? age + "岁" : ""}`
    },
    isOwner() {
      return this.detail.householdName == 1
    }
  },
  onLoad() {
    this.$dict.load("sex", "nation", "education", "politicsStatus", "militaryStatus", "faithType", "job")
    this.getResident()
  },
  methods: {
    getResident() {
      this.$instance.post("/app/appresident/detailForWx", null, {
        params: {id: this.user.residentId}
      }).then(res => {
        if (res?.data) {
          this.detail = res.data.resident
        }
      })
    },
    apply() {
      uni.navigateTo({url: "./authApply"})
    }
  }
}
</script>

<style lang="scss" scoped>
.authInfo {
  background: #F3F6F9;
  min-height: 100vh;
  padding-bottom: 280px;

  .avatar {
    display: inline-block;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #FFFFFF;
    flex-shrink: 0;
    margin-right: 16px;
  }

  .card {
    background: #fff;
    padding-left: 32px;
    margin-bottom: 24px;


    .title {
      width: 100%;
      height: 116px;
      line-height: 116px;
      font-weight: bold;
    }

    .item {
      width: 100%;
      min-height: 112px;
      color: #333;
      box-shadow: inset 0px -1px 0px 0px #DDDDDD;
      padding: 32px 32px 32px 0;
      box-sizing: border-box;
      white-space: normal;
    }
  }

  .headerCard {
    height: 160px;
    padding-right: 32px;
  }

  .blue {
    color: #4181FF;
  }

  .fixed-bottom {
    width: 100vw;
    height: 120px;
    padding: 16px 32px;
    box-sizing: border-box;
    background: inherit;
  }
}
</style>
