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

  <div style="margin: 30px; display: flex; align-items: center; ">
    <h3>大标题：</h3>
    <input type="text" nz-input [(ngModel)]="item.title" (blur)="save()" style=" width: 350px;">
  </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 style="margin-top: 5px; display: flex; align-items: center; ">
          <span style="">文本：</span>
          <input type="text" nz-input [(ngModel)]="ques.text" (blur)="save()" style=" width: 200px;">
        </div>

        <div style="margin-top: 10px; display: flex; align-items: center;">
          <span style="">音频：</span>
          <app-audio-recorder [audioUrl]="ques.audio_url"
            (audioUploaded)="onItemAudioUploadSuccess($event, ques, 'audio_url')">
          </app-audio-recorder>
        </div>
        
        <div style="margin-top: 10px; display: flex; ">
          <span style="">图片：</span>
          <div style="width: 300px;">
            <app-upload-image-with-preview [picUrl]="ques.pic_url"
              (imageUploaded)="onItemImgUploadSuccess($event, ques, 'pic_url')">
            </app-upload-image-with-preview>
          </div>
          <button *ngIf="ques.pic_url" style="float: right;" nz-button nzType="" (click)="onDeletaImg(ques, 'pic_url')">
            x
          </button>
        </div>

        <div style="margin-top: 10px; display: flex; ">
          <span style="">视频：</span>
          <div style="width: 300px;">
 
            <app-upload-video [videoUrl]="ques?.video_url?.replace('.mp4', '_h.mp4')" [showUploadBtn]="true" 
              (videoUploaded)="onVideoUploaded($event, ques, 'video_url')" >
            </app-upload-video>

          </div>
          <!-- <button *ngIf="ques.video_url" style="float: right;" nz-button nzType="" (click)="onDeleteVideo(ques, 'video_url')">
            x
          </button> -->
        </div>
      </div>



      <div 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 *ngFor="let cItem of it?.checkbox?.list">
              <label style="" nz-checkbox [(ngModel)]="cItem.value" (ngModelChange)="checkboxChange(it.checkbox, it)">{{cItem.label}}</label>
            </div> -->
            <label style="" nz-checkbox [(ngModel)]="ques.optionTypeText" (ngModelChange)="checkboxChange($event, ques, 'optionTypeText')">文本</label>
            <label style="" nz-checkbox [(ngModel)]="ques.optionTypeAudio" (ngModelChange)="checkboxChange($event, ques, 'optionTypeAudio')">音频</label>
            <label style="" nz-checkbox [(ngModel)]="ques.optionTypePic" (ngModelChange)="checkboxChange($event, ques, 'optionTypePic')">图片</label>
          </div>

        </div>

        <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 align="center" style="display: flex; align-items: center; justify-content: center;margin-top: -7px;">
                  <nz-radio-group [ngModel]="option.answer" (ngModelChange)="radioChange($event, option, 'answer')">
                    <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>
              <button style="float:right" nz-button nzType="danger" (click)="deleteOptionBtnClick(ques.optionArr, j)">
                x
              </button>
            </div>

    
            <div *ngIf="ques.optionTypeText" style="margin-top: 5px; display: flex; align-items: center; ">
              <span style="">文本：</span>
              <input type="text" nz-input [(ngModel)]="option.text" (blur)="save()" style=" width: 200px;">
            </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 *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>

      </div>
      <div style="margin-top: 30px">
        <button nz-button nzType="dashed" (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 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>