<div class="model-content">
	<div style="padding: 10px;">
		<span>开始引导音频: </span>
		<app-audio-recorder [audioUrl]="item.guideBegin_audio_url"
			(audioUploaded)="onAudioUploadSuccess($event, 'guideBegin_audio_url', item)"></app-audio-recorder>
		<span>结束猫猫音频: </span>
		<app-audio-recorder [audioUrl]="item.guideEnd_audio_url"
			(audioUploaded)="onAudioUploadSuccess($event, 'guideEnd_audio_url', item)"></app-audio-recorder>
		<span>点击猫猫提示重新开始音频: </span>
		<app-audio-recorder [audioUrl]="item.guideRestart_audio_url"
			(audioUploaded)="onAudioUploadSuccess($event, 'guideRestart_audio_url', item)"></app-audio-recorder>

		<div style="display: flex 1;margin-bottom: 10px;margin-left: 10px;">
			<span>上传 ske_json 文件</span><span> : </span>
			<nz-upload nzAccept=".json" [nzAction]="uploadUrl" [nzData]="uploadData" [nzShowUploadList]="false"
				(nzChange)="handleChange($event, item,'ske_json')">
				<button nz-button><i nz-icon nzType="upload"></i>Upload</button>
			</nz-upload>
			<span style="margin-left: 10px;">{{item["ske_json_name"]}}</span>
		</div>

		<div style="display: flex 1;margin-bottom: 10px;margin-left: 10px;">
			<span>上传 tex_json 文件</span><span> : </span>
			<nz-upload nzAccept=".json" [nzAction]="uploadUrl" [nzData]="uploadData" [nzShowUploadList]="false"
				(nzChange)="handleChange($event, item,'tex_json')">
				<button nz-button><i nz-icon nzType="upload"></i>Upload</button>
			</nz-upload>
			<span style="margin-left: 10px;">{{ item["tex_json_name"] }}</span>
		</div>

		<div style="display: flex 1;margin-bottom: 10px;margin-left: 10px;">
			<span>上传 tex_png 文件</span><span> : </span>
			<nz-upload nzAccept=".png" [nzAction]="uploadUrl" [nzData]="uploadData" [nzShowUploadList]="false"
				(nzChange)="handleChange($event, item,'tex_png')">
				<button nz-button><i nz-icon nzType="upload"></i>Upload</button>
			</nz-upload>
			<span style="margin-left: 10px;">{{ item["tex_png_name"] }}</span>
		</div>

		<div style="display: flex 1;margin-bottom: 10px;margin-left: 10px;">
			<span>上传结束 ske_json 文件</span><span> : </span>
			<nz-upload nzAccept=".json" [nzAction]="uploadUrl" [nzData]="uploadData" [nzShowUploadList]="false"
				(nzChange)="handleChange($event, item,'ske_json1')">
				<button nz-button><i nz-icon nzType="upload"></i>Upload</button>
			</nz-upload>
			<span style="margin-left: 10px;">{{item["ske_json1_name"]}}</span>
		</div>

		<div style="display: flex 1;margin-bottom: 10px;margin-left: 10px;">
			<span>上传结束 tex_json 文件</span><span> : </span>
			<nz-upload nzAccept=".json" [nzAction]="uploadUrl" [nzData]="uploadData" [nzShowUploadList]="false"
				(nzChange)="handleChange($event, item,'tex_json1')">
				<button nz-button><i nz-icon nzType="upload"></i>Upload</button>
			</nz-upload>
			<span style="margin-left: 10px;">{{ item["tex_json1_name"] }}</span>
		</div>


		<div style="display: flex 1;margin-bottom: 10px;margin-left: 10px;">
			<span>上传结束 tex_png 文件</span><span> : </span>
			<nz-upload nzAccept=".png" [nzAction]="uploadUrl" [nzData]="uploadData" [nzShowUploadList]="false"
				(nzChange)="handleChange($event, item,'tex_png1')">
				<button nz-button><i nz-icon nzType="upload"></i>Upload</button>
			</nz-upload>
			<span style="margin-left: 10px;">{{ item["tex_png1_name"] }}</span>
		</div>

		<div *ngFor="let q of questionArr; let i = index;"
			style="width: 500px; margin-top: 20px; border: 1px solid #ccc; border-radius: 5px; padding: 15px;">

			<div style=" display: flex; align-items: center;">
				<h3 style="margin-top: 5px">question-{{i+1}}:</h3>
				<app-audio-recorder style="margin-left: 10px; " [audioUrl]="q.question_audio_url"
					(audioUploaded)="onAudioUploadSuccess($event, 'question_audio_url', q)"></app-audio-recorder>

				<button *ngIf="q.option_arr.length < 5" nz-button nzType="primary" (click)="addOptionBtnClick(q)"
					style="margin-left: 15px;">
					+
				</button>
				<button nz-button nzType="danger" (click)="deleteQuestionBtnClick(i)" style="margin-left: 5px;">
					x
				</button>
			</div>

			<div *ngFor="let o of q.option_arr; let oi = index" style="margin-top: 5px; display: flex;">
				<div style="width: 200px;">
					<app-upload-image-with-preview [picUrl]="o.pic_url"
						(imageUploaded)="onImageUploadSuccess($event, 'pic_url', o)">
					</app-upload-image-with-preview>
				</div>
				<div style="margin-left: 10px">
					<h4>option-{{oi+1}} : </h4>

					<div style="width: 300px; margin-top: 15px;">
						<span>文本: </span>
						<input type="text" nz-input [(ngModel)]="o.text" (blur)="save()">
					</div>

					<app-audio-recorder [audioUrl]="o.audio_url"
						(audioUploaded)="onAudioUploadSuccess($event, 'audio_url', o)">
					</app-audio-recorder>

					<div style="display: flex; align-items: center; margin-top: 10px;">
						<nz-switch [(ngModel)]="o.is_right" (ngModelChange)="save()"></nz-switch>

						<button nz-button nzType="danger" (click)="deleteOptionBtnClick(q.option_arr, oi)"
							style="margin-left: 5px;">
							delete
						</button>
					</div>


				</div>
			</div>
		</div>

		<button nz-button nzType="dashed" (click)="addQuestionBtnClick()" style="height: 70px; margin-top: 20px;">
			<i nz-icon nzType="plus-circle" nzTheme="outline"></i>
			Add Question
		</button>

		<!-- <div style="width: 300px;" align='center'>
      <span>图1: </span>
      <app-upload-image-with-preview
        [picUrl]="item.pic_url"
        (imageUploaded)="onImageUploadSuccess($event, 'pic_url')">
      </app-upload-image-with-preview>
    </div>
   
    <div style="width: 300px; margin-top: 5px;" align='center'>
      <span>图2: </span>
      <app-upload-image-with-preview
        [picUrl]="item.pic_url_2"
        (imageUploaded)="onImageUploadSuccess($event, 'pic_url_2')">
      </app-upload-image-with-preview>
    </div>

    <div style="width: 300px; margin-top: 15px;">
      <span>文本: </span>
      <input type="text" nz-input [(ngModel)]="item.text" (blur)="save()">
    </div>

    <div style="margin-top: 5px">
      <span>音频: </span>
      <app-audio-recorder
        [audioUrl]="item.audio_url"
        (audioUploaded)="onAudioUploadSuccess($event, 'audio_url')"
      ></app-audio-recorder>
    </div> -->

	</div>

</div>