<div style="margin: 30px;">



  <h1 style="margin: 30px;">
    亲子互动
  </h1>

  <button nz-button nzType="primary" style="margin: 30px" (click)="autoFill()" [disabled]="bookTextList.length == 0" >
    自动填充
  </button>

  <!-- <div style="margin-left: 30px; margin-top:30px; display: flex; align-items: center; ">
    <h3 style="margin-right: 20px;">标题文本:</h3>
    <input type="text" nz-input [(ngModel)]="item.title" (blur)="save()" style=" width: 500px;">
  </div>

  <div style="margin-left: 30px; margin-top:10px;  display: flex; ">
    <h3 style="margin-right: 20px;">标题图片:</h3>
      <div style="width: 300px;">
      <app-upload-image-with-preview [picUrl]="item.pic_url"
        (imageUploaded)="onItemImgUploadSuccess($event, item, 'pic_url')">
      </app-upload-image-with-preview>
    </div>
  </div>

  <div style="margin-left: 30px; margin-top:10px;  display: flex; ">
    <h3 style="margin-right: 20px;">标题音频:</h3>
      <app-audio-recorder [audioUrl]="item.audio_url"
        (audioUploaded)="onItemAudioUploadSuccess($event, item, 'audio_url')">
      </app-audio-recorder>
  </div> -->

  <div *ngIf="item && item.quesArr">
    <div *ngFor="let ques of item.quesArr; let i = index"
      style="border: 2px #ccc solid; border-radius: 15px; width: 1000px; padding: 30px; margin: 30px;">

      <div style="display: flex; align-items: center; justify-content: space-between;">
        <h2>问题-{{i+1}}：</h2>
        <button style="float: right; margin-right: -140px;" nz-button nzType="danger" (click)="deletePageBtnClick(i)">
          删除问题
        </button>
      </div>

      <!-- <div style="border: 1px #ccc solid; border-radius: 15px; padding: 15px; background-color: rgb(255, 250, 243);">
        <h3>设置问题：</h3>

        <div *ngIf="ques.wordData" style="margin: 30px; display: flex; align-items: center; justify-content:flex-start;">
          <span style="margin-left: 0px;">选项数量：</span>
          <input type="text" nz-input [(ngModel)]="ques.optionCount" (blur)="setOptionCount($event,ques)" type="number" min="0" style=" width: 100px;">
        </div>

        <div>
          <div style=" display: flex; align-items: center; ">
            <span style=" font-weight: 500;">单词</span>
            <span style=" font-weight: 500; color: #ccc;">（自动拆分功能，可不填）：</span>
            <span style="margin-right: 20px; font-weight: 500;">：</span>
            <input type="text" nz-input [(ngModel)]="ques.text" (blur)="autoFillText(ques)" style=" width: 350px;">
          </div>
        </div>

        <nz-divider></nz-divider>
      </div> -->



      <div *ngIf="ques.optionArr.length > 0" style="margin-top:10px; border: 1px #ccc solid; border-radius: 15px; padding: 15px; background-color: rgb(248, 255, 245);">
        <!-- <h3>设置内容：</h3> -->

        <!-- <div style="margin: 10px;">
          <div style="display: flex; align-items: center; justify-content:flex-start;">
            <span style="margin-right: 20px;">选项类型：</span>
          </div>
        </div> -->

        <div *ngIf="ques.optionTypeText || ques.optionTypePic">
          
          <div *ngFor="let option of ques.optionArr; let j = index"
            style="border: 1px #ccc solid; border-radius: 15px; width: 100%; padding: 30px; ">
      
              <div style="display: flex; align-items: center; justify-content: space-between;">
                <div style="display: flex; align-items: center;">
                  <h4>设置内容-{{j+1}}：</h4>
                 
                </div>
                <button style="float:right" nz-button nzType="danger" (click)="deleteOptionBtnClick(ques, j)">
                  x
                </button>
              </div>

      
              <div *ngIf="ques.optionTypeText">
                <div style="margin-top: 5px; display: flex; align-items: flex-start;">
                  <span style="">文本：</span>
                  <textarea nz-input [(ngModel)]="option.text" (blur)="save()" style="width: 500px; min-height: 100px;"></textarea>
                </div>
              </div>
                
              <div *ngIf="ques.optionTypePic" style="margin-top: 10px; display: flex; ">
                <span style="">图片：</span>
                <div style="width: 300px;">
                  <app-upload-image-with-preview [picUrl]="option.pic_url"
                    (imageUploaded)="onItemImgUploadSuccess($event, option, 'pic_url')">
                  </app-upload-image-with-preview>
                </div>
                <button *ngIf="option.pic_url" style="float: right;" nz-button nzType="" (click)="onDeletaImg(option, 'pic_url')">
                  x
                </button>
              </div>

              <div *ngIf="ques.optionTypeAudio" style="margin-top: 10px; display: flex; align-items: center;">
                <span style="">音频：</span>
                <app-audio-recorder [audioUrl]="option.audio_url"
                  (audioUploaded)="onItemAudioUploadSuccess($event, option, 'audio_url')">
                </app-audio-recorder>
              </div>

          </div>
        </div>
    

      </div>
   
    
      <div  style="margin-top: 30px">
        <button nz-button nzType="text" (click)="addOneOption(ques)" style="width: 150px; height: 50px;">
          <i nz-icon nzType="plus-circle" nzTheme="outline"></i>
          添加评测内容
        </button>
      </div>




      <!-- <div *ngFor="let it of tempHotZoneItem; let i = index;">

        <div *ngIf="getItemHasInputText(it)" style="margin: 20px; display: flex; align-items: center;">
          <span style="margin-left:20px;">{{it.labelArr[0]?.value}}：</span>
          <input type="text" nz-input [(ngModel)]="it[it.labelArr[1].value]"
            (blur)="saveItemText(it, it.labelArr[1].value)" style=" width: 200px;">

          <div *ngIf="it.isOption" style="margin-left: 30px;">
            <nz-radio-group [ngModel]="it.optionValue" (ngModelChange)="radioChange($event, it, 'optionValue')">
              <div style="display: flex; flex-wrap: wrap; width: 100%;">
                <label style="margin-left: 5px;" nz-radio [nzValue]="'isRight'">{{'正确'}}</label>
                <label style="margin-left: 5px;" nz-radio [nzValue]="'isWrong'">{{'错误'}}</label>
              </div>
            </nz-radio-group>
          </div>
        </div>

        <div *ngIf="getItemHasInputAudio(it)" style="margin: 20px; display: flex;">
          <span style="margin-left:20px;">{{it.labelArr[0]?.value}}：</span>
          <app-audio-recorder [audioUrl]="it[it.labelArr[1].value]"
            (audioUploaded)="onItemAudioUploadSuccess($event, it, it.labelArr[1].value)"></app-audio-recorder>
        </div>

        <div *ngIf="getItemHasInputPic(it)" style="margin: 20px; display: flex; align-items: center;">
          <span style="margin-left:20px;">{{it.labelArr[0]?.value}}：</span>
          <div style="width: 300px;">
            <app-upload-image-with-preview [picUrl]="it[it.labelArr[1].value]"
              (imageUploaded)="onItemImgUploadSuccess($event, it, it.labelArr[1].value)">
            </app-upload-image-with-preview>
          </div>

          <div *ngIf="it.isOption" style="margin-left: 30px;">
            <nz-radio-group [ngModel]="it.optionValue" (ngModelChange)="radioChange($event, it, 'optionValue')">
              <div style="display: flex; flex-wrap: wrap; width: 100%;">
                <label style="margin-left: 5px;" nz-radio [nzValue]="'isRight'">{{'正确'}}</label>
                <label style="margin-left: 5px;" nz-radio [nzValue]="'isWrong'">{{'错误'}}</label>
              </div>
            </nz-radio-group>
          </div>
        </div>

        <div *ngIf="getItemHasTargetType(it, 'listInputPic')">

          <div *ngFor="let pic of it.listPic||[]; let j = index" style="margin-top: 5px;">
            <span style="margin-left:0px;">{{it.labelArr[0].value}}-{{j+1}}：</span>
            <div style="display: flex;">
              <div style="width: 300px;">
                <app-upload-image-with-preview [picUrl]="pic.pic_url"
                  (imageUploaded)="onItemImgUploadSuccess($event, it, 'pic_url')">
                </app-upload-image-with-preview>
              </div>
              <button style="" nz-button nzType="danger" (click)="deleteListItem(it.listPic, j)">
                X
              </button>
            </div>
          </div>

          <div style="padding: 30px;">
            <button nz-button nzType="dashed" (click)="addListItem(it, 'listPic')" style="width: 200px; height: 50px;">
              <i nz-icon nzType="plus-circle" nzTheme="outline"></i>
              添加 {{ it.labelArr[0].value}}
            </button>
          </div>

          <nz-divider></nz-divider>

        </div>


        <div *ngIf="getItemHasTargetType(it, 'listInputText')">

          <div *ngFor="let textData of it[it.labelArr[1].value]||[]; let j = index" style="margin-top: 5px;">
            <span style="margin-left:0px;">{{it.labelArr[0].value}}-{{j+1}}：</span>
            <div style="display: flex;">
              <input type="text" nz-input [(ngModel)]="textData.value" (blur)="saveItemText(textData, 'value')"
                style=" width: 500px;">
              <button style="" nz-button nzType="danger" (click)="deleteListItem(it[it.labelArr[1].value], j)">
                X
              </button>
            </div>
          </div>

          <div style="padding: 30px;">
            <button nz-button nzType="dashed" (click)="addListItem(it, [it.labelArr[1].value])"
              style="width: 200px; height: 50px;">
              <i nz-icon nzType="plus-circle" nzTheme="outline"></i>
              添加 {{ it.labelArr[0].value}}
            </button>
          </div>

          <nz-divider></nz-divider>

        </div>


      </div> -->


    </div>
  </div>




  <div *ngIf="item.quesArr && item.quesArr.length == 0"  style="padding: 30px;">
    <button nz-button nzType="dashed" (click)="addOnePageBtnClick()" style="width: 200px; height: 100px;">
      <i nz-icon nzType="plus-circle" nzTheme="outline"></i>
      添加问题
    </button>
  </div>

  <div style="height: 20px;">

  </div>
</div>