
<ion-header>
  <ion-toolbar>
    <ion-title>发布信息</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>

  <ion-item>
    <ion-label>选择活动类型</ion-label>
    <ion-select [(ngModel)]="selectedType" (ionChange)="onChangeActivityType()">
      <ion-select-option value="help">求助</ion-select-option>
      <ion-select-option value="product">二手物品</ion-select-option>
      <ion-select-option value="event">活动</ion-select-option>
      <ion-select-option value="lostFound">失物招领</ion-select-option>
    </ion-select>
  </ion-item>

  <!-- 求助表单 -->
  <ng-container *ngIf="selectedType === 'help'">
    <ion-item>
      <ion-label position="floating">标题</ion-label>
      <ion-input [(ngModel)]="help.title" required></ion-input>
    </ion-item>
    <ion-item>
      <ion-label position="floating">内容</ion-label>
      <ion-textarea [(ngModel)]="help.content" required></ion-textarea>
    </ion-item>
  </ng-container>

  <!-- 二手物品表单 -->
  <ng-container *ngIf="selectedType === 'product'">
    <ion-item>
      <ion-label position="floating">产品名称</ion-label>
      <ion-input [(ngModel)]="product.name" required></ion-input>
    </ion-item>
    <ion-item>
      <ion-label position="floating">金额</ion-label>
      <ion-input type="number" [(ngModel)]="product.amount" required></ion-input>
    </ion-item>
    
    <ion-item>
      <ion-label position="floating">地点</ion-label>
      <ion-input [(ngModel)]="product.location" required></ion-input>
    </ion-item>
    <ion-item>
      <ion-label position="floating">图片上传</ion-label>
      <ion-input type="file" (change)="onProductImageSelected($event)" accept="image/*"></ion-input>
    </ion-item>
  </ng-container>
  

  <!-- 失物招领表单 -->
  <ng-container *ngIf="selectedType === 'lostFound'">
    <ion-item>
      <ion-label position="floating">物品名称</ion-label>
      <ion-input [(ngModel)]="lostFound.itemName" required></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>丢失/拾取</ion-label>
      <ion-select [(ngModel)]="lostFound.status" required>
        <ion-select-option value="lost">丢失</ion-select-option>
        <ion-select-option value="found">拾取</ion-select-option>
      </ion-select>
    </ion-item>
    <ion-item>
      <ion-label position="floating">地点</ion-label>
      <ion-input [(ngModel)]="lostFound.location" required></ion-input>
    </ion-item>
    <ion-item>
      <ion-label position="floating">大致时间</ion-label>
      <ion-input type="datetime-local" [(ngModel)]="lostFound.time" required></ion-input>
    </ion-item>
    <ion-item>
      <ion-label position="floating">备注</ion-label>
      <ion-textarea [(ngModel)]="lostFound.remarks"></ion-textarea>
    </ion-item>
    <ion-item>
      <ion-label position="floating">图片上传</ion-label>
      <ion-input type="file" (change)="onLostFoundImageSelected($event)" accept="image/*"></ion-input>
    </ion-item>
  </ng-container>

  <!-- 活动表单 -->
  <ng-container *ngIf="selectedType === 'event'">
    <ion-item>
      <ion-label position="floating">活动名称</ion-label>
      <ion-input [(ngModel)]="event.name" required></ion-input>
    </ion-item>
    <ion-item>
      <ion-label position="floating">可参与对象</ion-label>
      <ion-input [(ngModel)]="event.participants" required></ion-input>
    </ion-item>
    <ion-item>
      <ion-label position="floating">开始时间</ion-label>
      <ion-input type="datetime-local" [(ngModel)]="event.startTime" required></ion-input>
    </ion-item>
    <ion-item>
      <ion-label position="floating">持续时长</ion-label>
      <ion-input type="number" [(ngModel)]="event.duration" required></ion-input>
    </ion-item>
    <ion-item>
      <ion-label position="floating">地点</ion-label>
      <ion-input [(ngModel)]="event.location" required></ion-input>
    </ion-item>
    <ion-item>
      <ion-label position="floating">备注</ion-label>
      <ion-textarea [(ngModel)]="event.remarks"></ion-textarea>
    </ion-item>
  </ng-container>

  <ion-button expand="block" (click)="submitForm()">发布</ion-button>

  <!-- 提交后显示的信息 -->
  <ion-card *ngIf="submitted">
    <ion-card-header>
      已发布信息
    </ion-card-header>
    <ion-card-content>
      <p><strong>类型:</strong> {{ selectedType }}</p>
      <!-- 根据类型显示不同的表单项内容 -->
      <ng-container *ngIf="selectedType === 'help'">
        <p><strong>标题:</strong> {{ help.title }}</p>
        <p><strong>内容:</strong> {{ help.content }}</p>
      </ng-container>
      <ng-container *ngIf="selectedType === 'product'">
        <p><strong>产品名称:</strong> {{ product.name }}</p>
        <p><strong>金额:</strong> {{ product.amount }}</p>
        <p><strong>时间:</strong> {{ product.time }}</p>
        <p><strong>地点:</strong> {{ product.location }}</p>
        <p><strong>图片:</strong> <img [src]="productImageUrl" width="200"></p>
      </ng-container>
      <ng-container *ngIf="selectedType === 'lostFound'">
        <p><strong>物品名称:</strong> {{ lostFound.itemName }}</p>
        <p><strong>状态:</strong> {{ lostFound.status }}</p>
        <p><strong>地点:</strong> {{ lostFound.location }}</p>
        <p><strong>大致时间:</strong> {{ lostFound.time }}</p>
        <p><strong>备注:</strong> {{ lostFound.remarks }}</p>
        <p><strong>图片:</strong> <img [src]="lostFoundImageUrl" width="200"></p>
      </ng-container>
      <ng-container *ngIf="selectedType === 'event'">
        <p><strong>活动名称:</strong> {{ event.name }}</p>
        <p><strong>可参与对象:</strong> {{ event.participants }}</p>
        <p><strong>开始时间:</strong> {{ event.startTime }}</p>
        <p><strong>持续时长:</strong> {{ event.duration }}</p>
        <p><strong>地点:</strong> {{ event.location }}</p>
        <p><strong>备注:</strong> {{ event.remarks }}</p>
      </ng-container>
    </ion-card-content>
  </ion-card>

</ion-content>


