<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      <ion-grid>
        <ion-row>
          <ion-col size="2">
            <ion-avatar>
              <ion-img *ngIf="tradeItems.length > 0" [src]="tradeItems[0].headImage" class="avatar"></ion-img>
              <ion-icon *ngIf="tradeItems.length === 0" name="person-circle-outline" class="default-avatar"></ion-icon>
            </ion-avatar>
          </ion-col>
          <ion-col size="10">
            <ion-label>
              <p>{{tradeItems.length > 0 ? tradeItems[0].publisher : 'tab11'}}</p>
              <p>发布时间: {{tradeItems.length > 0 ? tradeItems[0].timestamp : 'N/A'}}</p>
              <ion-label style="display: flex; justify-content: flex-end;">
                <span style="color:red">￥{{tradeItems.length > 0 ? tradeItems[0].amount : '0'}}</span>
              </ion-label>
            </ion-label>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col size="12">
            <h2>{{tradeItems.length > 0 ? tradeItems[0].title : 'tab12'}}</h2>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-item *ngFor="let item of tradeItems">
    <ion-list>
      <p>产品: {{item.product}}</p>
      <p>金额: {{item.amount}}</p>
      <p>地点: {{item.location}}</p>
      <p>图片:</p>
         <p><img *ngIf="item.image" [src]="item.image" style="max-width: 100px;"></p>
      <p>备注: {{item.remark}}</p>
    </ion-list>
  </ion-item>
  <ion-item *ngFor="let item of tradeItems">
    <ion-list>
      <!-- 显示回复内容 -->
      <p>对话内容:</p>
      <div *ngIf="item.replies && item.replies.length > 0">
        <ul>
          <li *ngFor="let reply of item.replies">
            <p>{{reply.floor}} 楼 {{reply.sender}}: {{reply.content}}</p>
          </li>
        </ul>
      </div>
    </ion-list>
  </ion-item>
  <ion-list>
    <!-- 回复框 -->
    <ion-item *ngFor="let item of tradeItems">
      <ion-item>
        <ion-textarea placeholder="输入回复内容" [(ngModel)]="replyContent"></ion-textarea>
      </ion-item>
      <ion-button (click)="submitReply(item)">提交回复</ion-button>
    </ion-item>
  </ion-list>
</ion-content>
