<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>个人信息</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">

  <ion-card>
    <ion-card-header>
      <ion-item lines="none">
        <ion-grid>
          <ion-row>
            <ion-col size="5">
              <div class="touxiang">
                <ion-avatar slot="start">
                  <img src="assets/picture/touxiang.png">
                </ion-avatar>
              </div>
            </ion-col>
            <ion-col size="7">
              <ion-label>
                <ion-text>用户名：{{user?.get("username") || '未登录'}}<br></ion-text>
                <ion-text *ngIf="!user?.id">请您登陆后继续使用</ion-text>
                <ion-text *ngIf="user?.id">
                  手机号：{{user?.get("mobile")}}<br>
                  姓名：{{user?.get("name")}}<br>
                  性别：{{user?.get("gender")}}
                </ion-text>                
              </ion-label>
              <ion-grid>
                <ion-row>
                  <ion-col size="6">
                    <ion-button *ngIf="!user?.id" fill="outline" routerLink="/user/login"  class="white-button" >编辑</ion-button>
                    <ion-button *ngIf="user?.id" fill="outline" routerLink="/user/edit/info" class="white-button">编辑</ion-button>
                  </ion-col>
                  <ion-col size="6">
                    <ion-button *ngIf="!user?.id" fill="outline" routerLink="/user/login" class="white-button">登录</ion-button>
                    <ion-button *ngIf="user?.id" fill="outline" (click)="logout()" class="white-button">登出</ion-button>
                  </ion-col>
                </ion-row>
              </ion-grid>
            </ion-col>
          </ion-row>
        </ion-grid>        
      </ion-item>
    </ion-card-header>
  </ion-card>

  <ion-card>
    
    <ion-card-content>
      <ion-list lines="none">
        <ion-item>
          <ion-icon name="book-outline" slot="start"></ion-icon>
          <ion-label>我的借阅</ion-label>
          <ion-icon name="chevron-forward-outline" slot="end"></ion-icon>
        </ion-item>
        <ion-item>
          <ion-icon name="chatbox-ellipses-outline" slot="start"></ion-icon>
          <ion-label>我的请求</ion-label>
          <ion-icon name="chevron-forward-outline" slot="end"></ion-icon>
        </ion-item>
        <ion-item>
          <ion-icon name="list" slot="start"></ion-icon>
          <ion-label>我的书单</ion-label>
          <ion-icon name="chevron-forward-outline" slot="end"></ion-icon>
        </ion-item>
        <ion-item>
          <ion-icon name="document-text-outline" slot="start"></ion-icon>
          <ion-label>我的积分</ion-label>
          <ion-icon name="chevron-forward-outline" slot="end"></ion-icon>
        </ion-item>
        <ion-item>
          <ion-icon name="location-outline" slot="start"></ion-icon>
          <ion-label>我的地址</ion-label>
          <ion-icon name="chevron-forward-outline" slot="end"></ion-icon>
        </ion-item>
        <ion-item>
          <ion-icon name="id-card-outline" slot="start"></ion-icon>
          <ion-label>我的电子证</ion-label>
          <ion-icon name="chevron-forward-outline" slot="end"></ion-icon>
        </ion-item>
        <ion-item>
          <ion-icon name="thumbs-up-outline" slot="start"></ion-icon>
          <ion-label>资源荐购</ion-label>
          <ion-icon name="chevron-forward-outline" slot="end"></ion-icon>
        </ion-item>
        <ion-item>
          <ion-icon name="add-outline" slot="start"></ion-icon>
          <ion-label>资源捐赠</ion-label>
          <ion-icon name="chevron-forward-outline" slot="end"></ion-icon>
        </ion-item>
      </ion-list>
    </ion-card-content>
  </ion-card>

</ion-content>