<ion-menu side="end" contentId="main-content">
  <ion-header>
    <ion-toolbar>
      <ion-title>设置</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content class="ion-padding">

<!-- 控件区域 -->
<ion-list>
  <ion-item>
    <ion-label>安全隐私</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>地址信息</ion-label>
  </ion-item>
</ion-list>
<div style="text-align: center; margin: 10px;"></div>
<div style="text-align: center; margin: 10px;"></div>
<ion-list>
  <ion-item>
    <ion-label>我的客服</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>关于我</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>商务合作</ion-label>
  </ion-item>
</ion-list>
<div style="text-align: center; margin: 10px;"></div>
<div style="text-align: center; margin: 10px;"></div>
<!-- 版本号和关于区域 -->
<ion-list>
  <ion-item>
    <ion-label>隐私政策</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>个人信息清单</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>第三方信息共享清单</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>用户协议</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>版本号</ion-label>
    <ion-badge slot="end" color="primary">V6.0</ion-badge>
  </ion-item>
</ion-list>
<!-- 退出登录按钮 -->
<div style="text-align: center; margin: 30px;">
  @if(!currentUser?.id){
  <ion-button expand="block" (click)="signup()">注册</ion-button> 
  <ion-button expand="block"  (click)="login()">登录</ion-button>
  } 
  @if(currentUser?.id){
    <h1>您已登录成功</h1>
  <ion-button expand="block" (click)="logout()">登出</ion-button>
  }
</div>
  </ion-content>
</ion-menu>

<div class="ion-page" id="main-content">
  <ion-header [translucent]="true">
    <ion-toolbar>
      <!-- <ion-buttons slot="start">
        <ion-menu-button></ion-menu-button>
      </ion-buttons> -->
      <ion-buttons slot="end">
        <ion-menu-button></ion-menu-button>
        <!-- <ion-button (click)="navigateToLogin()">
          <ion-icon name="search"></ion-icon>
        </ion-button> -->
        <!-- <ion-button (click)="navigateToLogin()">
          <ion-icon name="ellipsis-horizontal"></ion-icon>
        </ion-button> -->
      </ion-buttons>
    </ion-toolbar>
  </ion-header>
<ion-content [fullscreen]="true">


  <div class="profile-container">
    <img src="../../assets/image/01/Vx_03.jpg" alt="背景图片" />

    <div class="profile-card">




      @if(!currentUser?.id){
      <!-- <button (click)="fileInput.click()" class="avatar-button">
        <img src="currentUser.get("avatar")" alt="头像" class="avatar" />
      </button>
      <input type="file" #fileInput accept="image/*" (change)="onFileSelected($event)" style="display: none;" /> -->
      <!-- <button (click)="editName()" class="name-button">
        <h2>未知的某位网友</h2>
      </button> -->
      <div>未知的某位网友</div>
    }
    @if(currentUser?.id){
      <!-- <button (click)="fileInput.click()" class="avatar-button">
        <img [src]="profile.avatar" alt="头像" class="avatar" />
      </button>
      <input type="file" #fileInput accept="image/*" (change)="onFileSelected($event)" style="display: none;" />
      <button (click)="editName()" class="name-button">
        <h2>{{ currentUser?.get("realname")}}</h2>
      </button> -->
      <div>{{currentUser?.get("username")}}</div>
    }



      <p *ngIf="profile.vipStatus">VIP <button (click)="openVipPage()">开通VIP&gt;</button></p>
      <!-- <p>{{ profile.level }}</p> -->
    </div>

    <div class="cards-container" (click)="!currentUser?.id ? showAlert() : editUser()">
      <div class="card" *ngFor="let button of profile.buttons">
        <ion-icon [name]="button.icon"></ion-icon>
        <p>{{ button.text }}</p>
      </div>
    </div>


  </div>

  <div class="like-collection-buttons">
    <div class="card">
      <button (click)="toggleTabs('like')" class="action-button">喜欢</button>
    </div>
    <div class="card">
      <button (click)="toggleTabs('collect')" class="action-button">收藏</button>
    </div>
  </div>

  <div class="tabs-container" *ngIf="showTabs">
    @if(!currentUser?.id){
   <h1>未登录，没有查看权限</h1>
  }
  @if(currentUser?.id){
    <ion-segment value="all">
      <ion-segment-button (click)="setActiveTab('all')" [class.active]="activeTab === 'all'">
        <ion-icon name="images-outline"></ion-icon>
        <ion-label>全部</ion-label>
      </ion-segment-button>
      <ion-segment-button (click)="setActiveTab('image')" [class.active]="activeTab === 'image'">
        <ion-icon name="image-outline"></ion-icon>
        <ion-label>图文</ion-label>
      </ion-segment-button>
      <ion-segment-button (click)="setActiveTab('document')" [class.active]="activeTab === 'document'">
        <ion-icon name="document-text-outline"></ion-icon>
        <ion-label>文章</ion-label>
      </ion-segment-button>
    </ion-segment>
  }
  </div>
</ion-content>
</div>