<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>识别</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  
  <form [formGroup]="recognitionForm" (ngSubmit)="submitForm()" #form="ngForm">
    <ion-card>
    <ion-list>
      <!-- 文字描述区域 -->
      <ion-item>
      <ion-card-title><ion-label position="stacked">手动输入(描述物品信息)</ion-label></ion-card-title>
        <ion-input type="text" formControlName="itemInfo"></ion-input>
      </ion-item>
      
      <ion-item>
        <ion-label>分类选择</ion-label>
        <ion-select formControlName="itemCategory" interface="popover">
          <ion-select-option value="电子产品">电子产品</ion-select-option>
          <ion-select-option value="日用品">日用品</ion-select-option>
          <ion-select-option value="食品">食品</ion-select-option>
          <ion-select-option value="家具">家具</ion-select-option>
          <ion-select-option value="动植物产品">动植物产品</ion-select-option>
          <!-- 更多分类 -->
        </ion-select>
      </ion-item>
    </ion-list>
  </ion-card>      
    <!-- 拍照识别区域 -->
    <ion-card>
      <ion-card-header>
        <ion-card-title>拍照识别</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        <ion-button (click)="takePhoto()" expand="block">
          <ion-icon slot="start" name="camera"></ion-icon>
          直接拍照
        </ion-button>
        <ion-button (click)="selectFromAlbum()" expand="block">
          <ion-icon slot="start" name="images"></ion-icon>
          相册选取
        </ion-button>
        <div *ngIf="imageSrc">
          <img [src]="imageSrc" alt="图片预览" />
        </div>
      </ion-card-content>
    </ion-card>
    <ion-card>
      <ion-list>
        <!-- 地址区域 -->
        <ion-item>
          <ion-card-title><ion-label position="stacked">发送地址：</ion-label></ion-card-title>
          <ion-input type="text" formControlName="sendAddress"></ion-input> <!-- 注意这里的formControlName -->
        </ion-item>
        <ion-item>      
          <ion-card-title><ion-label position="stacked">收获地址：</ion-label></ion-card-title>
          <ion-input type="text" formControlName="receiveAddress"></ion-input> <!-- 注意这里的formControlName -->
        </ion-item>  
      </ion-list>
    </ion-card>  

    <ion-button type="submit" expand="block" color="primary">
      <ion-icon name="cloud-upload-outline"></ion-icon>
      提交
    </ion-button>

  </form>

  <form>
  <ion-card>
  <!-- 在页面的合适位置添加以下代码，例如在form标签下方 -->
  <div *ngIf="submittedData && hasData(submittedData)">
    <h3>提交的数据：</h3>
    <p>物品信息: {{ submittedData.itemInfo }}</p>
    <p>物品分类: {{ submittedData.itemCategory }}</p>
    <p>发送地址: {{ submittedData.sendAddress }}</p>
    <p>收货地址: {{ submittedData.receiveAddress }}</p>
    <!-- 图片预览 -->
    <div *ngIf="imageSrc">
      <img [src]="imageSrc" alt="图片预览" />
    </div>
  </div>
</ion-card>
</form>
</ion-content>