<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>detailsBook</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-card>
    <ion-card-content>
      <ion-grid>
        <ion-row>
          <ion-col size="4">
            <ion-thumbnail style="width: 100px; height: 100px; position: relative; left: 0px; top: 0px;">
              <img src= {{book.src}} >
            </ion-thumbnail>
            <div class="list">
              <ion-icon style="position: relative; left: 20px; top: 30px;" [style.color]="color" (click)="onStarClick(index)" [name]="checked?fillIcon:emptyIcon" *ngFor="let checked of starCheckList;let index=index;"></ion-icon>
            </div>
          </ion-col>
          <ion-col size="8">
            <ion-item lines="none">
              <ion-text style="font-size: x-small;">
                题名/责任者：{{ book.title }} / {{ book.authors }}；<br>
                出版发行项：{{ book.publisher }}, {{ book.publicationDate }}；<br>
                ISBN及定价：{{ book.isbn }} / {{ book.price }}；<br>
                载体形态项：{{ book.pages }} / {{ book.size }}；<br>
                个人责任者：{{ book.editor }}；<br>
                学科主题：{{ book.subject }}；<br>
                中图法分类号：{{ book.classificationNumbers[0] }}；<br>
                中图法分类号：{{ book.classificationNumbers[1] }}；<br>
                馆藏信息：{{ book.collectionStatus }} / {{ book.borrowingAttribute }} / {{ book.acquisitionDate }}；<br>
                年卷期：{{ book.yearVolumeIssue }}；
              </ion-text>
            </ion-item>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-card-content>
  </ion-card>

  <ion-card>
    <div style="display: flex; justify-content: space-between;">
      <ion-button fill="clear" class="red-button">馆藏信息</ion-button>


      <ion-button id="click-trigger" fill="clear">详细书目</ion-button>
      <ion-popover trigger="click-trigger" triggerAction="click">
        <ng-template>

          <ion-content class="ion-padding">
            <ion-card>
              <div style="display: flex; justify-content: center; align-items: center;">
                <ion-text>暂无数据!</ion-text>
              </div>
            </ion-card>
            
          </ion-content>

        </ng-template>
      </ion-popover>

      <ion-button id="hover-trigger" fill="clear">在图书馆查找</ion-button>
      <ion-popover trigger="hover-trigger" triggerAction="hover">
        <ng-template>

          <ion-content class="ion-padding">
            <ion-card>
              <div style="display: flex; justify-content: center; align-items: center;">
                <ion-text>暂无数据!</ion-text>
              </div>
            </ion-card>
          </ion-content>
          
        </ng-template>
      </ion-popover>

     </div>
    <ion-card>
      <div style="display: flex; justify-content: center; align-items: center;">
        <ion-text>纸制馆藏</ion-text>
      </div>
    </ion-card>
      
    <ion-card *ngFor="let item of items">
      <ion-card-header>
        <ion-card-title style="font-size: x-small;">馆藏地：{{item.get("title")}}</ion-card-title>
      </ion-card-header>

      <ion-card-content>
        <ion-grid>
          <ion-row>
            <ion-col size="6">
              <ion-text style="font-size: x-small;">
                索书号：{{item.get('callNumber')}}<br>
                书刊状态：{{item.get('bookStatus')}}<br>
                入藏日期：{{item.get('depositDate')}}<br>
                年卷期：{{item.get('annualRollPeriod')}}
              </ion-text>
            </ion-col>
  
            <ion-col size="6">
              <ion-text style="font-size: x-small;">
                条码号：{{item.get('barCodeNumber')}}<br>
                借阅属性：{{item.get('borrowingProperties')}}<br>
                排架号：{{item.get('shelvingNumber')}}<br>
                捐赠人：{{item.get('donor')}}
              </ion-text>
            </ion-col>
          </ion-row>
        </ion-grid>
      </ion-card-content>
      
    </ion-card>
  </ion-card>

  <ion-card>
    <ion-card>
      <div style="display: flex; justify-content: center; align-items: center;">
        <ion-text>预约</ion-text>
      </div>
    </ion-card>

    <ion-grid>
      <ion-row>
        <ion-col size="10">
          <ion-card>
            <ion-card-header>
              <ion-card-title style="font-size: x-small;">馆藏地：</ion-card-title>
            </ion-card-header>
            <ion-card-content>
              <ion-grid>
                <ion-row>
                  <ion-col size="6">
                    <ion-text style="font-size: x-small;">
                      索书号：<br>
                      当前请求数： 
                    </ion-text>
                  </ion-col>
        
                  <ion-col size="6">
                    <ion-text style="font-size: x-small;">
                      可借：
                    </ion-text>
                  </ion-col>
                </ion-row>
              </ion-grid>
            </ion-card-content>

          </ion-card>
        </ion-col>
        <ion-col size="2">
          <ion-button class="white-button" (click)="onClickRequest($event)">请求</ion-button>
          <ion-button class="white-button" >取消</ion-button>
        </ion-col>
      </ion-row>
    </ion-grid>


  </ion-card>
</ion-content>

