<ion-searchbar show-cancel-button="focus" placeholder="欢迎来到手艺之窗购物" cancel-button-text="取消"
  (ionInput)="handleInput($event)"></ion-searchbar>

<!-- <div class="buttons-row">
   <div class="button-tag">
     <button (click)="showContent('cart-one')">推荐</button>
   </div>
   <div class="button-tag">
    <button  (click)="showContent('cart-two')">手工艺品</button>
   </div>
   <div  class="button-tag">
    <button (click)="showContent('cart-three')">数字藏品</button>
   </div>
</div> -->
<ion-grid style="text-align: center; padding-bottom: 0;">
  <ion-row class="nav-two" >
    <ion-col (click)="showContent('cart-one')" class="nav-two">推荐</ion-col>
    <ion-col (click)="showContent('cart-two')">手工艺品</ion-col>
    <ion-col (click)="showContent('cart-three')">藏品</ion-col>
  </ion-row>
</ion-grid>

<ion-grid class="nav-three">
  <ion-row >
    <ion-col>
      <ion-card *ngFor="let item of items" style="margin: 2px 1px">
        <div *ngIf="item.choice === 1" >
          <ion-img [src]="item.imgUrl"></ion-img>
        <ion-card-header>

          <ion-card-title>
            {{ item.name }}
          </ion-card-title>

          <ion-card-subtitle>
            <ion-grid>
              <ion-row style="  text-align: center;">
                <ion-col size="auto">
                  <ng-container *ngIf="currentContent === 'cart-three'; else defaultPrice"></ng-container>
                <ng-template #defaultPrice>￥{{ item.price }}</ng-template>
                </ion-col>
                <ion-col>
                  <ng-container *ngIf="currentContent === 'cart-three'; else defaultPrice"></ng-container>
                <ng-template #defaultPrice>销量{{ item.price }}</ng-template>
                </ion-col>
              </ion-row>
            </ion-grid>
          </ion-card-subtitle>
        </ion-card-header>

        <ion-card-content>
          {{item.description}}
        </ion-card-content>

        </div>
      </ion-card>

    </ion-col>
    
    <ion-col>
      <ion-card *ngFor="let item of items" style="margin:1px 1px 4px 1px">
        <div *ngIf="item.choice === 2" >
          <ion-img [src]="item.imgUrl"></ion-img>
        <ion-card-header>

          <ion-card-title>
            {{ item.name }}
          </ion-card-title>

          <ion-card-subtitle>
            <ion-grid>
              <ion-row style="  text-align: center;">
                <ion-col size="auto">
                  <ng-container *ngIf="currentContent === 'cart-three'; else defaultPrice"></ng-container>
                <ng-template #defaultPrice>￥{{ item.price }}</ng-template>
                </ion-col>
                <ion-col>
                  <ng-container *ngIf="currentContent === 'cart-three'; else defaultPrice"></ng-container>
                <ng-template #defaultPrice>销量{{ item.price }}</ng-template>
                </ion-col>
              </ion-row>
            </ion-grid>
          </ion-card-subtitle>

        </ion-card-header>

        <ion-card-content>
          {{item.description}}
        </ion-card-content>
        </div>
      </ion-card>
 
    </ion-col>
  </ion-row>
</ion-grid>
<app-chat-info *ngIf="currentContent === 'cart-three'"></app-chat-info>


<!-- <div class="content-wrapper">
  <div class="item-container" >
    <div *ngFor="let item of items" class="image-container">
      <div *ngIf="item.choice === 1" class="left-column" >
        <div class="image-item">
          <img [src]="item.imgUrl" alt="item image">
          <div class="image-details">
            <h3>{{ item.name }}</h3>
          </div>
          <div class="price-container">
            <p class="price">￥{{ item.price }}</p>
            <p class="sales">销量{{ item.sales }}</p>
          </div>
        </div>
      </div>
      <div *ngIf="item.choice === 2"class="right-column" >
        <div class="image-item">
          <img [src]="item.imgUrl" alt="item image">
          <div class="image-details">
            <h3>{{ item.name }}</h3>
          </div>
          <div class="price-container">
            <p class="price">￥{{ item.price }}</p>
            <p class="sales">销量{{ item.sales }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div> -->