<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>我的</ion-title>
  </ion-toolbar>
</ion-header>

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

  <ion-card *ngIf="!user?.id" >
    <img alt="" src="https://ionicframework.com/docs/img/demos/card-media.png" />
    <ion-card-header>
      <ion-card-title>{{user?.get("username") || '未登录'}}</ion-card-title>
      <ion-card-subtitle *ngIf="!user?.id">请您登陆后继续使用</ion-card-subtitle>
      <!-- <ion-card-subtitle *ngIf="user?.id">{{user?.get("name")}}-{{user?.get("gender")}}</ion-card-subtitle> -->
    </ion-card-header>
 
    <!-- 新增：根据用户状态，显示登录/登出按钮，执行跳转或登出函数 -->
    <ion-button *ngIf="!user?.id" fill="clear" routerLink="/user/login">登录</ion-button>
    <!-- <ion-button *ngIf="user?.id" fill="clear" routerLink="/user/edit/info">编辑资料</ion-button> -->
    <!-- <ion-button *ngIf="user?.id" fill="clear" (click)="logout()">登出</ion-button> -->
  </ion-card>

  <ion-card *ngIf="user?.id" class="user-card">
    <img src="assets/yonghu.jpg" alt="用户头像"  style="width: 100px; height: 100px; border-radius: 50%;">
    <ion-card-header class="user-header">
      <!-- 设置按钮 -->
      <ion-button slot="end" fill="solid" class="settings-button" style="color: #fff !important; background-color: #007bff !important;">
        <ion-icon name="settings"></ion-icon>
      </ion-button>
      <ion-card-title>{{user?.get("name")}}</ion-card-title>
      <ion-card-subtitle>个性签名</ion-card-subtitle>
      <div class="user-stats">
        <ion-row>
          <ion-col>
            <a href="https://www.example.com/followers" target="_blank">
              <p>关注：100</p>
            </a>
          </ion-col>
          <ion-col>
            <a href="https://www.example.com/followers" target="_blank">
            <p>获赞：500</p>
          </a>
          </ion-col>
          <ion-col>
            <a href="https://www.example.com/followers" target="_blank">
            <p>粉丝：1000</p>
          </a>
          </ion-col>
        </ion-row>
      </div>
    </ion-card-header>
  </ion-card>

  <!-- 功能菜单 -->
  <ion-list *ngIf="user?.id">
    <ion-item button>
      <ion-icon slot="start" name="person"></ion-icon>
      <ion-label>个人资料</ion-label>
      <ion-button *ngIf="user?.id" fill="clear" routerLink="/user/edit/info">编辑资料</ion-button>
    </ion-item>
    <ion-item button>
      <ion-icon slot="start" name="receipt"></ion-icon>
      <ion-label>我的订单</ion-label>
    </ion-item>
    <ion-item button>
      <ion-icon slot="start" name="settings"></ion-icon>
      <ion-label>设置</ion-label>
    </ion-item>
  </ion-list>

  <ion-button *ngIf="user?.id" fill="clear" (click)="logout()">登出</ion-button>

</ion-content>
