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

<ion-content>
  <div *ngIf="!editing">
    <!-- 显示个人信息界面 -->
    <div class="profile-header">
      <div class="avatar-section">
        <input type="file" (change)="onFileSelected($event)" accept="image/*" id="fileInput" hidden>
        <label for="fileInput">
          <img [src]="user.avatarUrl" alt="Avatar" class="avatar-img">
          <ion-icon name="create-outline" class="edit-icon" (click)="startEditing()"></ion-icon>
        </label>
      </div>
      <div class="profile-details">
        <!-- 用户名 -->
        <div class="username">{{ user.username }}</div>

        <!-- 校区和楼栋 -->
        <div class="campus-building">
          <div class="campus">{{ user.campus }}</div>
          <div class="building">{{ user.building }}</div>
        </div>

        <!-- 性别 -->
        <div class="gender">
          <ion-icon [name]="user.gender === 'male' ? 'man' : 'woman'"></ion-icon>
          <div>{{ user.gender === 'male' ? '男' : '女' }}</div>
        </div>
      </div>
    </div>
  </div>

  <!-- 编辑个人信息界面 -->
<div *ngIf="editing">
  <ion-item>
    <ion-label position="stacked">用户名</ion-label>
    <ion-input [(ngModel)]="editedUser.username" type="text"></ion-input>
  </ion-item>
  <ion-item (click)="fileInput.click()">
    <ion-label position="stacked">上传新头像</ion-label>
    <input type="file" #fileInput style="display: none;" (change)="onFileSelected($event)">
    <ion-avatar class="avatar-right" style="cursor: pointer;">
      <img [src]="editedUser.avatarUrl || user.avatarUrl" alt="Avatar">
    </ion-avatar>
  </ion-item>
  <ion-item>
    <ion-label position="stacked">楼栋号</ion-label>
    <ion-input [(ngModel)]="editedUser.building" type="text"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label position="stacked">校区名称</ion-label>
    <ion-input [(ngModel)]="editedUser.campus" type="text"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label>性别</ion-label>
    <ion-select [(ngModel)]="editedUser.gender">
      <ion-select-option value="male">男</ion-select-option>
      <ion-select-option value="female">女</ion-select-option>
      <ion-select-option value="other">其他</ion-select-option>
    </ion-select>
  </ion-item>
  <ion-button expand="block" color="primary" (click)="saveChanges()">保存</ion-button>
  <ion-button expand="block" color="danger" (click)="cancelEditing()">取消</ion-button>
</div>

  

  <!-- 其他功能条目 -->
  <ion-list lines="full" class="ion-no-margin" *ngIf="!editing">
    <ion-item routerLink="/mine/completed">
      <ion-icon slot="start" name="checkmark-circle"></ion-icon>
      <ion-label>已完成</ion-label>
      <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
    </ion-item>
    <ion-item routerLink="/mine/in-progress">
      <ion-icon slot="start" name="hourglass"></ion-icon>
      <ion-label>进行中</ion-label>
      <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
    </ion-item>
    <ion-item routerLink="/mine/not-completed">
      <ion-icon slot="start" name="close-circle"></ion-icon>
      <ion-label>未完成</ion-label>
      <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
    </ion-item>
    <ion-item routerLink="/mine/pending">
      <ion-icon slot="start" name="alert-circle"></ion-icon>
      <ion-label>待接单</ion-label>
      <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
    </ion-item>
    <ion-item (click)="logout()" class="logout-button">
      <ion-icon slot="start" name="log-out"></ion-icon>
      <ion-label>退出登录</ion-label>
    </ion-item>
  </ion-list>
</ion-content>
