<!-- <ion-menu contentId="main-content">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu Content</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content class="ion-padding">This is the menu content.</ion-content>
</ion-menu>
<div class="ion-page" id="main-content">
  <ion-header>
    <ion-toolbar>
      <ion-buttons slot="start">
        <ion-menu-button></ion-menu-button>
      </ion-buttons>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content class="ion-padding"> Tap the button in the toolbar to open the menu. </ion-content>
</div> -->

<ion-content>
  <div class="profile-container">
    <div class="user-info">
    <!-- 个人信息 -->
    @if(!currentUser?.id){
      <img src="https://cdn.wantuju.com/pngsucai/imgRegular/20210801/ea7d60e8-133f-40b9-9f12-4ad402c97c62%20_63338_wantuju.jpg" alt="用户头像" class="avatar" />
      <div class="user-details">
        <h2>昵称</h2>
        <p>基本信息：年龄、性别等</p>
      </div>
      <div class="auth-text">
        <span class="login" (click)="login()">登录</span>/
        <span class="register" (click)="signup()">注册</span>
      </div>      
    }
    @if(currentUser?.id){
      <img [src]="currentUser?.get('avatar')|| '../../assets/image/doctor7.png'" alt="头像" class="avatar" />
        <div class="user-details">
          <h2>{{currentUser?.get("username")}}</h2>
          <p>性别:{{currentUser?.get("gender")||"-"}} 年龄:{{currentUser?.get("age")||"-"}}</p>
        </div>
        <!-- <div class="auth-text">
          <span class="edituser" (click)="editUser()">编辑资料</span>
        </div>    -->
    }
    </div>

    <!-- 医疗服务 -->
      <ion-card-header>
        <ion-card-title>医疗服务</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        <div class="button-row">
          <ion-button expand="full" fill="outline" color="light" routerLink="/tabs/inquiry">
            <img src="https://img.tukuppt.com/png_preview/00/06/02/Ci3mfMQItP.jpg!/fw/780" alt="报病查诊" class="button-icon"/>
          </ion-button>
          <ion-button expand="full" fill="outline" color="light" routerLink="/appointments">
            <img src="assets/appointments.png" alt="预约记录" class="button-icon" />
          </ion-button>
          <ion-button expand="full" fill="outline" color="light" routerLink="/discussions">
            <img src="assets/discussions.png" alt="讨论记录" class="button-icon" />
          </ion-button>
          <ion-button expand="full" fill="outline" color="light" routerLink="/doctors">
            <img src="assets/doctors.png" alt="关注的医生" class="button-icon" />
          </ion-button>
        </div>
      </ion-card-content>

    <!-- 医生关注 -->
      <ion-card-header>
        <ion-card-title>关注的医生</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        @if(!currentUser?.id){
          <P>请登录后查看...</P>
        }
        @if(currentUser?.id){
        <ion-list>
          <ion-item *ngFor="let expert of expertList" lines="none" class="doctor-item">
            <ion-thumbnail slot="start">
              <img [src]="expert.get('avatar')" [alt]="expert.get('name')" />
            </ion-thumbnail>
            <div class="doctor-info">
              <h3>{{ expert.get('name') }}({{ expert.get('age') }}岁)</h3>
              <p>{{ expert.get('title') }} {{ expert.get('specialist') }}</p>
            </div>
          </ion-item>
        </ion-list>
      }
      </ion-card-content>

    <!-- 常用服务 -->
      <ion-card-header>
        <ion-card-title>常用服务</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        <ion-list>
          <ion-item button routerLink="/bills">
            <ion-label>我的账单</ion-label>
            <ion-icon slot="end" name="chevron-forward"></ion-icon>
          </ion-item>
          <ion-item button routerLink="/orders">
            <ion-label>商城订单</ion-label>
            <ion-icon slot="end" name="chevron-forward"></ion-icon>
          </ion-item>
          <ion-item button routerLink="/checkups">
            <ion-label>体检订单</ion-label>
            <ion-icon slot="end" name="chevron-forward"></ion-icon>
          </ion-item>
        </ion-list>
      </ion-card-content>

      <ion-card-content>
        <ion-list>
          @if(!currentUser?.id){          
          <ion-item button id="err">
            <ion-label>个人信息</ion-label>
            <ion-icon slot="end" name="chevron-forward"></ion-icon>
            <ion-alert
            trigger="err"
            header="注意"
            message="你还未登录，请先登录！"
            [buttons]="alertButtons"
          ></ion-alert>
          </ion-item>
        }
        @if(currentUser?.id){
          <ion-item button (click)="editUser()">
            <ion-label>个人信息</ion-label>
            <ion-icon slot="end" name="chevron-forward"></ion-icon>
          </ion-item>
        }
          <ion-item button routerLink="/we">
            <ion-label>关于我们</ion-label>
            <ion-icon slot="end" name="chevron-forward"></ion-icon>
          </ion-item>
          <ion-item button routerLink="/fankui">
            <ion-label>帮助与反馈</ion-label>
            <ion-icon slot="end" name="chevron-forward"></ion-icon>
          </ion-item>
          <ion-item button routerLink="/shezhi">
            <ion-label>设置</ion-label>
            <ion-icon slot="end" name="chevron-forward"></ion-icon>
          </ion-item>
        </ion-list>
      </ion-card-content>

  </div>


</ion-content>

    @if(currentUser?.id){
  <ion-button  (click)="logout()" color="light">登出</ion-button>
}