<div class="model-content">
	<nz-card nzTitle="课程练习内容编辑" style="margin:5vw;" nzType="inner">
		<nz-divider nzText="标题" nzOrientation="left"></nz-divider>
		<div nz-row>
			<div style="width: 300px; margin-top: 15px;">
				<span>点击输入标题: </span>
				<input type="text" nz-input [(ngModel)]="item.title" (blur)="save()">
			</div>
		</div>


		<nz-form-control [nzSpan]="18">
			<span>标题声音: </span>
			<app-audio-recorder [audioUrl]="item.audio_url"
				(audioUploaded)="onAudioUploadSuccess($event, item, 'audio_url')">
			</app-audio-recorder>
		</nz-form-control>
		<nz-divider nzText="类别" nzOrientation="left"></nz-divider>

		<button style="margin: 10px;" nz-button nzType="danger" (click)="addSheepfold()">
			<span>添加</span>
		</button>

		<button style="margin: 10px;" nz-button nzType="danger" (click)="delSheepfold(item.sheepfoldArr.length-1)">
			<span>删除</span>
		</button>

		<div nz-row>
			<div *ngFor="let data of item.sheepfoldArr;let i = index" style="margin: 2vw;">
				<div nz-col [nzXs]='24' [nzSm]='12' [nzMd]='12' [nzLg]='9'>
					<nz-card nzTitle="类别-{{i + 1}}" style="height: 150px; margin: 1vw;">
						<nz-form-item>
							<nz-form-label [nzSpan]="6" nzFor="{{i}}.word">标题</nz-form-label>
							<nz-form-control [nzSpan]="12">
								<input nz-input type="text" id="{{i}}.word" placeholder="请输入标题" [(ngModel)]="data.word"
									(blur)="save()">
							</nz-form-control>
						</nz-form-item>
					</nz-card>
				</div>

			</div>
		</div>
		<nz-divider nzText="选项" nzOrientation="left"></nz-divider>
		<div nz-row>
			<nz-form-item>
				<nz-form-label [nzSpan]="6" nzFor="add-btn" nzNoColon=true>选项</nz-form-label>
				<nz-form-control [nzXs]='24' [nzSm]='12' [nzMd]='12' [nzLg]='6'>
					<button nz-button nzType="dashed" class="add-btn" id="sheep-add-btn" (click)="addSheep()">
						<i nz-icon nzType="plus-circle" nzTheme="outline"></i>添加
					</button>
				</nz-form-control>
			</nz-form-item>
		</div>

		<div nz-row>
			<div *ngFor="let data of item.sheepArr;let i = index" style="margin: 1vw;">
				<div nz-col [nzXs]='24' [nzSm]='12' [nzMd]='12' [nzLg]='8'>
					<nz-card nzTitle="选项-{{i + 1}}" [nzExtra]="extraTemplate1" style="height: 550px; margin: 1vw;">
						<nz-form-item>
							<nz-form-label [nzSpan]="6">类别</nz-form-label>
							<nz-form-control [nzSpan]="12">
								<nz-radio-group [(ngModel)]="data.sheepfoldId"
									(ngModelChange)="setSheepfoldId($event, data)">
									<label nz-radio [nzValue]="option.id"
										*ngFor="let option of item.sheepfoldArr; let j = index">类别-{{j +
										1}}（{{option.word}}）</label>
								</nz-radio-group>
							</nz-form-control>
						</nz-form-item>
						<nz-form-item>
							<nz-form-label [nzSpan]="6" nzFor="{{i}}.picUrl">图片</nz-form-label>
							<nz-form-control [nzSpan]="12">
								<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]="6" nzFor="{{i}}.word">文本</nz-form-label>
							<nz-form-control [nzSpan]="12">
								<input nz-input type="text" id="{{i}}.word" placeholder="请录入内容" [(ngModel)]="data.word"
									(blur)="save()">
							</nz-form-control>
						</nz-form-item>
					</nz-card>
					<ng-template #extraTemplate1>
						<button style="margin: 10px;" nz-button nzType="danger" (click)="delSheep(i)">
							<span>删除</span>
						</button>
					</ng-template>
				</div>
			</div>
		</div>
	</nz-card>
</div>