<!--头部内容，包含标题和返回按钮-->
<ion-header>
  <div class="header-container">
    <ion-icon name="arrow-back-outline" size="large" class="back-icon" (click)="goBack()"></ion-icon>
    <p class="header-title">个人资料</p>
  </div>
</ion-header>
<!--正文部分-->
<ion-content>
  <div class="container">

    <div class="row">
      <div class="info-item">
        <span class="fontSize">头像</span>
      </div>
      <div class="value">
        <img id="avatar" [src]="currentUser?.get('avatar') ||'assets/icon/default_avatar.jpg'" alt="头像" />
        <ion-icon name="chevron-forward-outline" class="arrow-icon"></ion-icon>
      </div>
    </div>

    <div class="row" (click)="edit('name')">
      <div class="info-item">
        <span class="fontSize">昵称</span>
      </div>
      <div class="value">
        <span>{{ currentUser?.get('name') }}</span>
        <ion-icon name="chevron-forward-outline" class="arrow-icon"></ion-icon>
      </div>
    </div>

  </div>

  <div class="container">

    <div class="row">
      <div class="info-item">
        <span class="fontSize">手机号</span>
      </div>
      <div class="value">
        <span>{{ currentUser?.get('phone') }}</span>
        <ion-icon name="chevron-forward-outline" class="arrow-icon"></ion-icon>
      </div>
    </div>

    <div class="row" (click)="edit('gender')">
      <div class="info-item">
        <span class="fontSize">性别</span>
      </div>
      <div class="value">
        <span>{{ currentUser?.get('gender') }}</span>
        <ion-icon name="chevron-forward-outline" class="arrow-icon"></ion-icon>
      </div>
    </div>

    <div class="row">
      <div class="info-item">
        <span class="fontSize">所在地</span>
      </div>
      <div class="value">
        <span>{{ currentUser?.get('name') }}</span>
        <ion-icon name="chevron-forward-outline" class="arrow-icon"></ion-icon>
      </div>
    </div>

    <div class="row">
      <div class="info-item">
        <span class="fontSize">生日</span>
      </div>
      <div class="value">
        <span>{{ currentUser?.get('name') }}</span>
        <ion-icon name="chevron-forward-outline" class="arrow-icon"></ion-icon>
      </div>
    </div>

    <div class="row" (click)="edit('signature')">
      <div class="info-item">
        <span class="fontSize">个性签名</span>
      </div>
      <div class="value">
        <span>{{ currentUser?.get('signature') }}</span>
        <ion-icon name="chevron-forward-outline" class="arrow-icon"></ion-icon>
      </div>
    </div>
  </div>
</ion-content>