<template>
  <section class="partyAuthInfo">
    <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">{{ $dict.getLabel('sex', detail.sex) }} {{detail.age}}</div>
        </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>
  </section>
</template>

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

export default {
  name: "partyAuthInfo",
  data() {
    return {
      detail: {},
      baseInfo: [
        {label: "身份证号", prop: "idNumber"},
        {label: "联系方式", prop: "phone"},
        {label: "党组织", prop: "partyOrgName"},
        {label: "入党时间", prop: "joinPartyTime"},
        {label: "党员类型", prop: "partyType", dict: "partyType"},
      ],
    }
  },
  computed: {
    ...mapState(['user']),
  },
  onLoad() {
    this.$dict.load('partyType','sex')
    this.getDetail()
  },
  methods: {
    getDetail() {
      this.$instance.post(`/app/appparty/detail?id=${this.user.partyId}`).then(res=> {
        if(res?.data) {
          this.detail = res.data
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.partyAuthInfo {
  background: #F3F6F9;
  min-height: 100vh;

  .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>
