<!-- 首页布局 -->
<ion-header>
  <ion-toolbar>
    <ion-title>小说（Novel）</ion-title>
  </ion-toolbar>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>签到功能</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css">
  
</ion-header>

<ion-content >

  <ion-toolbar  >
    <ion-buttons slot="start">
      <ion-button>
        Novel
      </ion-button>
    </ion-buttons>
    <ion-buttons slot="end">
      <ion-button>
        <ion-icon name="search"></ion-icon>
      </ion-button>
      <ion-button >
        阅读历史
      </ion-button>
      <ion-button>
        更多
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
  <!-- 金刚区 -->
  <ion-grid >
    <ion-row>
      <ion-col size="6">
        <ion-card  >
          <ion-card-header>
            今日已读___小时__分钟
          </ion-card-header>
        </ion-card>

        
      </ion-col>


<!-- 时钟组件 -->
<ion-card>
  <ion-card-header>
    <ion-card-title ><a style="font-size: 18px; color:black;">当前时间</a></ion-card-title>
  </ion-card-header>
  
  <ion-card-content>
    <div class="clock">
      {{ currentTime | date: 'hh:mm:ss a' }}
    </div>
  </ion-card-content>
</ion-card>
<!-- 时钟 -->
    </ion-row>
  </ion-grid>

      <!-- 签到组件 -->
      <ion-card>
        <ion-card-header>
          <ion-card-title>签到功能</ion-card-title>
        </ion-card-header>
      
      <ion-card-content >
        <ion-item size = "6">
          <ion-label>今日签到状态：</ion-label>
          <ion-badge slot="end" [color]="isSignedIn ? 'success' : 'danger'">{{ isSignedIn ? '已签到' : '未签到' }}</ion-badge>
        </ion-item>
        
        <ion-button expand="block" color="primary" (click)="signIn()" [disabled]="isSignedIn">签到</ion-button>
      </ion-card-content>
      </ion-card>



  <!-- 问卷调查 -->
<ion-card>
  <ion-card-header>
    <ion-card-title>小说问卷调查</ion-card-title>
  </ion-card-header>
  
  <ion-card-content>
    <ion-list>
      <ion-item>
        <ion-label position="stacked">您喜欢的小说类型：</ion-label>
        <ion-select placeholder="请选择">
          <ion-select-option value="fantasy">奇幻</ion-select-option>
          <ion-select-option value="romance">言情</ion-select-option>
          <ion-select-option value="mystery">悬疑</ion-select-option>
          <ion-select-option value="sci-fi">科幻</ion-select-option>
        </ion-select>
      </ion-item>
      
      <ion-item>
        <ion-label position="stacked">您每周阅读小说的频率：</ion-label>
        <ion-radio-group value="daily">
          <ion-item>
            <ion-label>每天</ion-label>
            <ion-radio slot="start" value="daily"></ion-radio>
          </ion-item>
          <ion-item>
            <ion-label>每周几次</ion-label>
            <ion-radio slot="start" value="weekly"></ion-radio>
          </ion-item>
          <ion-item>
            <ion-label>偶尔</ion-label>
            <ion-radio slot="start" value="occasionally"></ion-radio>
          </ion-item>
        </ion-radio-group>
      </ion-item>
      
      <ion-item>
        <ion-label position="stacked">您最喜欢的小说作者：</ion-label>
        <ion-input type="text" placeholder="请输入"></ion-input>
      </ion-item>
      
      <ion-item>
        <ion-label position="stacked">您希望小说中包含的元素：</ion-label>
        <ion-textarea placeholder="请输入"></ion-textarea>
      </ion-item>
    </ion-list>
    
    <ion-button expand="block" color="primary">提交</ion-button>
  </ion-card-content>
</ion-card>
<!-- 个人表单填写 -->




<!-- 个人推荐 -->
<ion-grid>
  <ion-row>
    <ion-col >
      <ion-card>
        <ion-card-header>
          个人推荐
        </ion-card-header>
        <ion-card-content>
          <!-- 弹性布局的六行一列金刚区按钮 -->
          <ion-row>
            <ion-col size="6" *ngFor="let item of customItems">
              <ion-button expand="block" (click)="currentType=item?.title">{{ item.title }}</ion-button>
            </ion-col>
          </ion-row>
          <!-- 图文及评分标准、浏览量 -->
          <ion-row>
            <!-- <ion-col size="6">
              <ion-img src="assets/img/人间烟火.jpg" style="width: 100%; height: 100%;" ></ion-img>
            </ion-col> -->

            <ng-container *ngFor="let novel of novelList">
              <ion-col size="6" *ngIf="currentType=='全部'||novel.get('booktype')==currentType">
                <ion-card>
                  <ion-card-header>
                    图书名称:{{novel?.get("bookname")}}
                  </ion-card-header>
                  <ion-card-content>
                    图书编号:{{novel?.get("bookid")}}<br>
                    图书金额:{{novel?.get("bookwage")}}￥
                    <!-- <ion-label>评分：5.0</ion-label><br>
                    <ion-label>浏览量：1000</ion-label> -->
                  </ion-card-content>
                </ion-card>
              </ion-col>
            </ng-container>
          </ion-row>
        </ion-card-content>
      </ion-card>
    </ion-col>
  </ion-row>
</ion-grid>
<!-- 个人推荐 -->
</ion-content>