<ion-header>
  <ion-toolbar color="warning">
    <ion-title color="success" class="ion-text-center">
      搜题
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-grid>
    <ion-row>
      <ion-col size="12">
        <ion-searchbar placeholder="搜题目网课资料" [(ngModel)]="searchQuery"></ion-searchbar>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col size="12">
        <ion-item>
          <ion-label>选择</ion-label>
          <ion-select [(ngModel)]="student.city" interface="popover" (ionChange)="refreshQuestion()">
            <ion-select-option *ngFor="let item of student.cityList" [value]="item">
              {{item}}
            </ion-select-option>
          </ion-select>
        </ion-item>
      </ion-col>
    </ion-row>
    
    <ion-row>
      <ion-col size="12">
        <ion-button expand="block" color="primary" (click)="refreshQuestion()">
          刷新题目
        </ion-button>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col size="12">
        <ion-card>
          <ion-card-header>
            <ion-card-title>{{ currentQuestion.title }}</ion-card-title>
            <ion-icon name="sunny-outline"></ion-icon>
          </ion-card-header>
          <ion-card-content>
            {{ currentQuestion.content }}
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col size="12">
        <ion-item>
          <ion-label position="floating">你的答案</ion-label>
          <ion-input [(ngModel)]="userAnswer"></ion-input>
        </ion-item>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col size="12">
        <ion-button expand="block" color="success" (click)="checkAnswer()">
          提交答案
        </ion-button>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col size="12">
        <ion-text color="danger" *ngIf="answerChecked && !isCorrect">答案错误，请再试一次。</ion-text>
        <ion-text color="success" *ngIf="answerChecked && isCorrect">答案正确！</ion-text>
      </ion-col>
    </ion-row>
  </ion-grid>



  <ion-row>
    <ion-col size="6">
      <ion-button expand="block" color="secondary" [routerLink]="['product']">
        拍照搜题
      </ion-button>
    </ion-col>
    <ion-col size="6">
      <ion-button expand="block" color="success" [routerLink]="['product']">
        文字搜题
      </ion-button>
    </ion-col>
  </ion-row>
</ion-content>