<div class="model-content">
  <div nz-row>
    <div nz-col [nzSpan]="24">
      <nz-form-item>
        <nz-form-label [nzSpan]="2" nzFor="part1">标题1</nz-form-label>
        <nz-form-control [nzSpan]="4">
          <nz-input-group nzAddOnBefore="Part">
            <input type="text" id="part1" nz-input [(ngModel)]="item.title.part1" (blur)="save()">
          </nz-input-group>
        </nz-form-control>
        <nz-form-label [nzSpan]="2" nzFor="part2">标题2</nz-form-label>
        <nz-form-control [nzSpan]="4">
          <input nz-input type="text" id="part2" [(ngModel)]="item.title.part2" (blur)="save()">
        </nz-form-control>
        <nz-form-label [nzSpan]="2" nzFor="audioUrl">发音</nz-form-label>
        <nz-form-control [nzSpan]="4">
          <app-audio-recorder [audioUrl]="item.title.audioUrl" id="audioUrl"
            (audioUploaded)="onAudioUploadSuccess($event, item.title, 'audioUrl')">
          </app-audio-recorder>
        </nz-form-control>
      </nz-form-item>
    </div>
  </div>

  <!--练习题-->
  <div nz-row>
    <div nz-col [nzSpan]="24">
      <nz-card [nzExtra]="actionAdd" [nzActions]="[actionSetting]" nzTitle="语句">
        <div *ngFor="let data of item.exercisesArr; let i=index" style="padding: 0.5vw;">
          <nz-card nzTitle="语句-{{i+1}}" [nzHoverable]="true" [nzExtra]="actionAddWord">
            <nz-form-item>
              <nz-form-label [nzSpan]="2">音频</nz-form-label>
              <nz-form-control [nzSpan]="3">
                <app-audio-recorder [audioUrl]="data.audioUrl"
                  (audioUploaded)="onAudioUploadSuccess($event, data, 'audioUrl')">
                </app-audio-recorder>
              </nz-form-control>
            </nz-form-item>
            <nz-form-item>
              <nz-form-label [nzSpan]="2">图片</nz-form-label>
              <nz-form-control [nzSpan]="3">
                <app-upload-image-with-preview style="width: 100%" [picUrl]="data.picUrl"
                  (imageUploaded)="onImageUploadSuccess($event, data, 'picUrl')">
                </app-upload-image-with-preview>
              </nz-form-control>
            </nz-form-item>
            <nz-form-item>
              <nz-form-label [nzSpan]="2">语句</nz-form-label>
              <nz-form-control [nzSpan]="10">
                <textarea rows="4" nz-input [(ngModel)]="data.val" (ngModelChange)="check(data.val, 20)"
                  (blur)="saveContent(data)"></textarea>
              </nz-form-control>
            </nz-form-item>
            <nz-form-item>
              <nz-form-label [nzSpan]="2">预览</nz-form-label>
              <nz-form-control [nzSpan]="20">
                <div *ngFor="let letter of data.letterArr; let j = index" style="float: left;">
                  <div *ngIf="(letter.bold == '0')" style="float: left;">
                    <label
                      [ngStyle]="{'float': 'left','font-size': '21px','font-family': 'GOTHIC','color':letter.fontColor, 'margin-right': '2px'}">{{letter.val
                      == ' ' ? '&nbsp;' : letter.val}}</label>
                  </div>
                  <div *ngIf="(letter.bold == '1')" style="float: left;">
                    <label
                      [ngStyle]="{'float': 'left','font-size': '21px','font-family': 'GOTHICB','color':letter.fontColor, 'margin-right': '2px'}">{{letter.val
                      == ' ' ? '&nbsp;' : letter.val}}</label>
                  </div>
                </div>
              </nz-form-control>
            </nz-form-item>
            <div *ngFor="let answer of data.answerArr; let m=index">
              <nz-card nzType="inner" nzTitle="{{ m == 0 ? '正确选项': '错误选项'}}">
                <nz-form-item *ngIf="m == 0">
                  <nz-form-label [nzSpan]="2">音频</nz-form-label>
                  <nz-form-control [nzSpan]="3">
                    <app-audio-recorder [audioUrl]="answer.audioUrl"
                      (audioUploaded)="onAudioUploadSuccess($event, answer, 'audioUrl')">
                    </app-audio-recorder>
                  </nz-form-control>
                </nz-form-item>
                <nz-divider nzText="{{ m == 0 ? '点击单词首尾字母设置正确答案':'点击单词首尾字母设置错误答案'}}" nzOrientation="left"></nz-divider>
                <nz-form-item>
                  <nz-form-control [nzSpan]="20">
                    <div *ngFor="let letter of answer.letterArr; let j = index" style="float: left;">
                      <div *ngIf="(letter.bold == '0')" style="float: left;">
                        <a [ngStyle]="{'float': 'left','font-size': '42px','font-family': 'GOTHIC','color':letter.fontColor, 'margin-right': '2px'}"
                          (click)="clickLetter(data, answer, j)">{{letter.val == ' ' ? '&nbsp;' : letter.val}}</a>
                      </div>
                      <div *ngIf="(letter.bold == '1')" style="float: left;">
                        <a [ngStyle]="{'float': 'left','font-size': '42px','font-family': 'GOTHICB','color':letter.fontColor, 'margin-right': '2px'}"
                          (click)="clickLetter(data, answer, j)">{{letter.val == ' ' ? '&nbsp;' : letter.val}}</a>
                      </div>
                    </div>
                  </nz-form-control>
                </nz-form-item>
                <nz-divider nzText="点击字母设置变绿" nzOrientation="left"></nz-divider>
                <nz-form-item>
                  <nz-form-control [nzSpan]="20">
                    <div *ngFor="let letter of answer.letterArr; let j = index" style="float: left;">
                      <div *ngIf="(answer.from &lt;= j && answer.to &gt;= j)" style="float: left;">
                        <a [ngStyle]="{'float': 'left','font-size': '42px','font-family': 'GOTHICB','color':letter.fontColor, 'margin-right': '2px'}"
                          (click)="clickLetter2(data, answer, j)">{{letter.val == ' ' ? '&nbsp;' : letter.val}}</a>
                      </div>
                    </div>
                  </nz-form-control>
                </nz-form-item>
              </nz-card>
            </div>
          </nz-card>
          <ng-template #actionAddWord>
            <button nz-button nzType="danger" (click)="delExercisesItem(item,i)">
              <i nz-icon nzType="delete" nzTheme="outline"></i>删除
            </button>
          </ng-template>
        </div>
      </nz-card>
      <ng-template #actionAdd>
        <button nz-button nzType="dashed" [disabled]="item.exercisesArr.length == 3 ? true : false" class="add-btn"
          id="add-btn" (click)="addExercisesItem(item)">
          <i nz-icon nzType="plus-circle" nzTheme="outline"></i>添加
        </button>
      </ng-template>
      <ng-template #actionSetting>
        <button nz-button nzType="dashed" [disabled]="item.exercisesArr.length == 3 ? true : false" class="add-btn"
          id="add-btn" (click)="addExercisesItem(item)">
          <i nz-icon nzType="plus-circle" nzTheme="outline"></i>添加
        </button>
      </ng-template>
    </div>
  </div>