<style>
  .border-solid {
    border: 1px solid #333;
    border-radius: 10px;
    padding: 20px;
  }

  .border-dashed {
    border: 1px dashed #333;
    border-radius: 10px;
    padding: 20px;
  }

  .option-title {
    font-size: 36px;
    color: #000;
    margin-right: 15px;
    margin-bottom: 3px;
  }

  .option-title-line {
    font-size: 36px;
    color: #ccc;
    border-bottom: black 3px solid;
    margin-right: 15px;
    white-space: pre;
  }

  .option-content {
    border: 1px dashed #333;
    border-radius: 1px;
    padding: 20px;
    margin-right: 10px;
    width: 800px;
  }

  .option-img {
    margin-top: 10px;
  }

  .option-audio {
    margin-top: 10px;
  }

  .option-text {
    margin-top: 10px;
  }

  .option-time {
    margin-top: 10px;
  }

  .word-type-title {
    color: #169BD5;
    font-size: 18px
  }

  .word-type-option-title {
    color: #333;
    font-size: 18px;
  }

  .word-input-title {
    color: #333;
    font-size: 20px;
  }

  .btn-blue {
    color: #169BD5;
    border-color: #169BD5;
  }

  .btn-red {
    color: #f00;
    border-color: #f00;
  }

  .input-place-red::-webkit-input-placeholder {
    color: rgba(255, 0, 0, 0.3);
    font-size: 12px;
  }
</style>
<div class="model-content">

  <div style="padding: 10px;background-color: #fff;">
    <div class="border-dashed" style="margin: 20px;width: 1300px;">

      <span style="font-size: 20px;">小迪开始音频: </span>
      <div style="display:flex ;">
        <div>
          <app-audio-recorder [audioUrl]="item.npcAudio"
            (audioUploaded)="onAudioUploadSuccess($event, 'npcAudio',item,'npcAudioName')">
          </app-audio-recorder>
        </div>
        <div style="margin: 5px">
          <span>{{ item.npcAudioName}}</span>
        </div>
      </div>
      <span style="font-size: 20px;">小迪结束按钮文字: </span>
      <input type="text" nz-input [(ngModel)]="item.npcAudioText" (blur)="save()">
      <span style="font-size: 20px;">小迪结束音频: </span>
      <div style="display:flex ;">
        <div>
          <app-audio-recorder [audioUrl]="item.npcAudioEnd"
            (audioUploaded)="onAudioUploadSuccess($event, 'npcAudioEnd',item,'npcAudioEndName')">
          </app-audio-recorder>
        </div>
        <div style="margin: 5px">
          <span>{{ item.npcAudioEndName}}</span>
        </div>
      </div>

      <span style="font-size: 20px;">视频: </span>
      <app-upload-video [videoUrl]="item.video" (videoUploaded)="onVideoUploaded($event)"></app-upload-video>
    </div>


    <div style=" margin: 20px;width: 1000px;">
      <div *ngFor="let question of item.questions; let i = index">
        <div style="display: flex;margin-top: 20px;">
          <div class="border-solid" style="min-width: 1000px;">
            <div class="word-type-title">
              题目{{i+1}}
            </div>

            <div name="题目标题">
              <div style="width: 200px">
                <span style="font-size: 20px;">题目标题</span>
                <input type="text" nz-input [(ngModel)]="question.title" (blur)="save()">
              </div>
            </div>



            <div name="题目图片" style="width: 200px;">
              <span style="font-size: 20px;">题目图片</span>
              <app-upload-image-with-preview [picUrl]="question.img"
                (imageUploaded)="onImageUploadSuccess($event, 'img',question)">
              </app-upload-image-with-preview>
            </div>


            <div name="题目关键字">
              <div style="width: 600px">
                <span style="font-size: 20px;">题目关键字/句(逗号隔开)</span>
                <input type="text" nz-input [(ngModel)]="question.keyword" (blur)="save()">
              </div>
            </div>



            <div name="题目开始音频">
              <span style="font-size: 20px;">题目开始音频: </span>
              <div style="display:flex ;">
                <div>
                  <app-audio-recorder [audioUrl]="question.startAudio"
                    (audioUploaded)="onAudioUploadSuccess($event, 'startAudio',question,'startAudioName')">
                  </app-audio-recorder>
                </div>
                <div style="margin: 5px">
                  <span>{{ question.startAudioName}}</span>
                </div>
              </div>
            </div>


            <div name="题目正确音频">
              <span style="font-size: 20px;">题目正确音频: </span>
              <div style="display:flex ;">
                <div>
                  <app-audio-recorder [audioUrl]="question.rightAudio"
                    (audioUploaded)="onAudioUploadSuccess($event, 'rightAudio',question,'rightAudioName')">
                  </app-audio-recorder>
                </div>
                <div style="margin: 5px">
                  <span>{{ question.rightAudioName}}</span>
                </div>
              </div>
            </div>


            <div name="题目错误音频">
              <span style="font-size: 20px;">题目错误音频: </span>
              <div style="display:flex ;">
                <div>
                  <app-audio-recorder [audioUrl]="question.errorAudio"
                    (audioUploaded)="onAudioUploadSuccess($event, 'errorAudio',question,'errorAudioName')">
                  </app-audio-recorder>
                </div>
                <div style="margin: 5px">
                  <span>{{ question.errorAudioName}}</span>
                </div>
              </div>
            </div>

          </div>

          <div style="margin-left: 10px;">
            <button class="btn-red" nz-button nzType="default" nzDanger (click)="removeQuestion(i)">删除题目</button>
          </div>
        </div>

      </div>
      <div style="margin-top: 20px;">
        <button class="btn-blue" style="width: 1000px; height: 50px;" nz-button nzType="default" nzDanger
          (click)="addQuestion()">+增加题目</button>
      </div>

      <nz-modal [(nzVisible)]="isVisible" [nzTitle]="null" [nzContent]="modalContent" [nzFooter]="modalFooter"
        (nzOnCancel)="handleCancel()">

        <ng-template #modalContent>
          <p>{{deleteTitle}}</p>
        </ng-template>

        <ng-template #modalFooter>
          <button nz-button nzType="default" (click)="handleCancel()">取消</button>
          <button nz-button nzType="primary" (click)="handleOk()">确定</button>
        </ng-template>
      </nz-modal>
    </div>


  </div>

</div>