<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>我的请求</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  
  <div class="book-info">
    <img src="{{bookInfo?.get('src')}}" alt="Book Image">
    <div class="book-details">
      <h2>{{bookInfo?.get("title")}}</h2>
      <p class="author">{{bookInfo?.get("authors")}}</p>
      <p class="publisher">{{bookInfo?.get("publisher")}}</p>
    </div>
  </div>

  <ion-card class="full-width-card">
  <div class="user-info">
    <ion-item lines="full">
      <ion-label style="font-size: 20px;">基本信息</ion-label>
    </ion-item>
    <ion-item>
      <ion-label>收件人</ion-label>
      <ion-input type="text" placeholder="请输入收件人" slot="end" style="text-align: right;" [(ngModel)]="orderInfo.consignee"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label>地址</ion-label>
      <ion-input type="text" placeholder="请输入取书地" slot="end" style="text-align: right;" [(ngModel)]="orderInfo.address"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label>手机号码</ion-label>
      <ion-input type="tel" placeholder="请输入手机号码" slot="end" style="text-align: right;"  [(ngModel)]="orderInfo.phone"></ion-input>
    </ion-item>

    <ion-item lines="none">
      <ion-label>备注</ion-label>
    </ion-item>
    
    <ion-item lines="none">
      <ion-card color="light" style="margin-left: 0px;margin-top: 0px;width: 100%;">
        <ion-textarea placeholder="备注" (input)="updateCharacterCount($event)"></ion-textarea>
        <div class="character-count">0/50</div>
      </ion-card>
    </ion-item>
  </div>
  </ion-card>
  
  <ion-button id="present-alert" expand="block" color="success" (click) = "save()">提交订单</ion-button>
  <ion-alert
    trigger="present-alert"
    header="确认订单！"
    [buttons]="alertButtons">
  </ion-alert>
</ion-content>