<div class="main">
  <div class="body">
    <div class="title">
      {{data.title}}  <span class="lens">{{data.lens}}L</span>
    </div>
    <div class="content">
      <div class="lesson-text-container" >
        <div class="lesson-text-wrapper"  >
          <div class="lesson-text" [innerHTML]="data.contents | contents: 2"></div>
        </div>
      </div>
      <div class="questions" *ngIf="!isSubmitted" >
        <div class="questions-container">
          <div class="splide">
            <div class="splide__track">
              <ul class="splide__list">
                <li class="splide__slide question-card-box"  *ngFor="let q of data.questions; let i = index">
                  <div class="question-card" [ngClass]="isSubmitted ? 'q-disabled' : ''">
                    <div class="q-index" [ngClass]="i%2 ? 'odd' : 'even'">{{ formatIndex(i + 1) }}</div>
                    <div class="question-card-body">
                      <div class="qt" [innerText]="q.questionTitle"></div>
                      <div class="question-answer">
                        <ng-container *ngFor="let o of ['A', 'B', 'C', 'D']">
                        <div class="btn-box"  [ngClass]="userAnswers[i]=== o ? 'selected' : ''"
                             (mousedown)="btnPressed($event, i , o)"
                             (touchstart)="btnPressed($event, i , o)">
                          <img class="shadow" src="assets/play/blue-shadow.png" alt="">
                          <div class="option">
                            <div class="lbl">{{o}}</div>
                            <span>{{q['questionOption'+o]}}</span>
                          </div>
                        </div>
                        </ng-container>
                      </div>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="pager">{{splide ? splide.index + 1: 0}}/{{splide ? splide.length: 0}}</div>
      </div>
    </div>
  </div>
  <template #SubmitTemplate>
    <li class="splide__slide">
      <div  class="question-submit-card">
        <img class="submit-btn-shadow" src="assets/play/submit-shadow.png" alt="">
        <img class="submit-btn" src="assets/play/submit.png">

      </div>
    </li>
  </template>
  <div class="result" [@openClose]="isOpenResultPanel ? 'open' : 'closed'" >
    <div class="result-body">
      <div class="guagou"></div>

      <div class="body-board">
        <div class="analysis">
          <div class="analysis-content">{{data.analysis}}</div>
        </div>
        <div class="body-board-container">
          <div class="question-row" *ngFor="let q of data.questions; let i = index;">
            <div class="q-wrapper">
              <div class="q-info">
                <div class="q-title">{{i + 1}}. {{q.questionTitle}}</div>
                <div class="q-answer" [ngClass]="q.questionAnswer == userAnswers[i] ? 'r' : 'w'">
                  {{q.questionAnswer}}
                </div>

              </div>
              <div class="q-explain">
                <img class="explain-bubble" src="assets/play/explain-bubble.png" alt="">
                {{q.questionExplain}}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="load-more" *ngIf="isShowMore">
        <div  class="load-more-btn-box">
<!--          <img class="submit-btn-shadow" src="/assets/play/submit-shadow.png" alt="">-->
<!--          <img class="submit-btn" src="/assets/play/load-more-btn.png">-->
          <input class="submit-btn" type="image" src="assets/play/more-btn.png" (click)="moreQuestion($event)"/>
<!--          <div class="btn-text">更多练习</div>-->
        </div>
      </div>
    </div>





  </div>

  <input *ngIf="isSubmitted" [ngClass]="{'big': isOpenResultPanel}"
         type="image" src="assets/play/btn-wen.png"
         (click)="closeResultPanel()"
         class="btn-help wen ">
  <input *ngIf="isSubmitted" [ngClass]="{'big': !isOpenResultPanel}"
         type="image" src="assets/play/btn-jie.png"
         (click)="openResultPanel()"
         class="btn-help jie">
<!--  <div style="display: none">-->
<!--    <audio src="assets/play/music/1.mp3" preload="auto" #submit></audio>-->
<!--    <audio src="assets/play/music/2.mp3" preload="auto" #more></audio>-->
<!--    <audio src="assets/play/music/3.mp3" preload="auto" #panel></audio>-->
<!--    <audio src="assets/play/music/4.mp3" preload="auto" #choose></audio>-->
<!--  </div>-->
</div>

