<ion-header [translucent]="true">
</ion-header>

<ion-content>
  
  <!-- 顶部导航 -->
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button [class.active]="selectedCategory === '求助'" (click)="showPublishedItems('求助')">求助</ion-button>
      <ion-button [class.active]="selectedCategory === '二手交易'" (click)="showPublishedItems('二手交易')">二手交易</ion-button>
      <ion-button [class.active]="selectedCategory === '失物招领'" (click)="showPublishedItems('失物招领')">失物招领</ion-button>
      <ion-button [class.active]="selectedCategory === '活动'" (click)="showPublishedItems('活动')">活动</ion-button>
    </ion-buttons>
  </ion-toolbar>

  <!-- 功能区域 -->
  <ion-card>
    <ion-card-content>
      <!-- 已发布信息列表 -->
      <ion-list>
        <ion-item *ngFor="let item of displayedItems" (click)="navigateToDetail(item)">
          <ion-grid>
            <ion-row>
              <ion-col size="2">
                <ion-avatar>
                  <ion-img src="{{item.headImage}}"></ion-img>
                </ion-avatar>
              </ion-col>
              <ion-col>
                <ion-label>
                  <ion-note style="font-size: 1.2em;">{{item.publisher}}</ion-note>
                  <p>发布时间: {{item.timestamp | date: 'medium'}}</p>
                  <ion-label *ngIf="selectedCategory === '二手交易'" style="display: flex; justify-content: flex-end;">
                    <span style="color: red;">￥{{displayedItems.length > 0 ? displayedItems[0].amount : '0'}}</span>
                  </ion-label>
                </ion-label>
              </ion-col>
            </ion-row>
            <ion-row>
              <ion-col size="12">
                <h2>{{item.title}}</h2>
              </ion-col>
            </ion-row>
          </ion-grid>
        </ion-item>
      </ion-list>
    </ion-card-content>
  </ion-card>
</ion-content>