<ion-header>
    <ion-toolbar>
        <ion-title>信息采集</ion-title>
        <ion-buttons slot="end">
            <ion-button (click)="onCancel()">取消</ion-button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>

<ion-content>
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
        <ion-list>
            <ng-container *ngFor="let field of fieldList">
                <!-- 文本输入 -->
                <ion-item *ngIf="field.type === 'String'" lines="full">
                    <ion-label position="stacked">
                        {{field.name}}
                        <span *ngIf="field.required" class="required">*</span>
                    </ion-label>
                    <ion-input [formControlName]="field.key" type="text" [placeholder]="field.placeholder || ''">
                    </ion-input>
                    <ion-note slot="error"
                        *ngIf="getFieldControl(field.key)?.hasError('required') && getFieldControl(field.key)?.touched">
                        请输入{{field.name}}
                    </ion-note>
                </ion-item>

                <!-- 数字输入 -->
                <ion-item *ngIf="field.type === 'Number'" lines="full">
                    <ion-label position="stacked">
                        {{field.name}}
                        <span *ngIf="field.required" class="required">*</span>
                    </ion-label>
                    <ion-input [formControlName]="field.key" type="number" [placeholder]="field.placeholder || ''">
                    </ion-input>
                    <ion-note slot="error"
                        *ngIf="getFieldControl(field.key)?.hasError('required') && getFieldControl(field.key)?.touched">
                        请输入{{field.name}}
                    </ion-note>
                    <ion-note slot="error"
                        *ngIf="getFieldControl(field.key)?.hasError('min') && getFieldControl(field.key)?.touched">
                        最小值不能小于{{field.min}}
                    </ion-note>
                    <ion-note slot="error"
                        *ngIf="getFieldControl(field.key)?.hasError('max') && getFieldControl(field.key)?.touched">
                        最大值不能超过{{field.max}}
                    </ion-note>
                </ion-item>

                <!-- 日期选择 -->
                <ion-item *ngIf="field.type === 'Date'" lines="full">
                    <ion-label position="stacked">
                        {{field.name}}
                        <span *ngIf="field.required" class="required">*</span>
                    </ion-label>
                    <ion-datetime [formControlName]="field.key" displayFormat="YYYY-MM-DD" [max]="today">
                    </ion-datetime>
                    <ion-note slot="error"
                        *ngIf="getFieldControl(field.key)?.hasError('required') && getFieldControl(field.key)?.touched">
                        请选择{{field.name}}
                    </ion-note>
                </ion-item>

                <!-- 单选按钮 -->
                <ion-item *ngIf="field.type === 'Radio' && field.options" lines="full">
                    <ion-label position="stacked">
                        {{field.name}}
                        <span *ngIf="field.required" class="required">*</span>
                    </ion-label>
                    <ion-radio-group [formControlName]="field.key">
                        <ion-item *ngFor="let option of field.options" lines="none">
                            <ion-label>{{option.label}}</ion-label>
                            <ion-radio slot="start" [value]="option.value"></ion-radio>
                        </ion-item>
                    </ion-radio-group>
                    <ion-note slot="error"
                        *ngIf="getFieldControl(field.key)?.hasError('required') && getFieldControl(field.key)?.touched">
                        请选择{{field.name}}
                    </ion-note>
                </ion-item>

                <!-- 下拉选择 -->
                <ion-item *ngIf="field.type === 'Select' && field.options" lines="full">
                    <ion-label position="stacked">
                        {{field.name}}
                        <span *ngIf="field.required" class="required">*</span>
                    </ion-label>
                    <ion-select [formControlName]="field.key" interface="action-sheet">
                        <ion-select-option *ngFor="let option of field.options" [value]="option.value">
                            {{option.label}}
                        </ion-select-option>
                    </ion-select>
                    <ion-note slot="error"
                        *ngIf="getFieldControl(field.key)?.hasError('required') && getFieldControl(field.key)?.touched">
                        请选择{{field.name}}
                    </ion-note>
                </ion-item>

                <!-- 多选框 -->
                <ion-item *ngIf="field.type === 'Checkbox' && field.options" lines="full">
                    <ion-label position="stacked">
                        {{field.name}}
                        <span *ngIf="field.required" class="required">*</span>
                    </ion-label>
                    <ion-checkbox-group [formControlName]="field.key">
                        <ion-item *ngFor="let option of field.options" lines="none">
                            <ion-label>{{option.label}}</ion-label>
                            <ion-checkbox slot="start" [value]="option.value"></ion-checkbox>
                        </ion-item>
                    </ion-checkbox-group>
                    <ion-note slot="error"
                        *ngIf="getFieldControl(field.key)?.hasError('required') && getFieldControl(field.key)?.touched">
                        请至少选择一项{{field.name}}
                    </ion-note>
                </ion-item>

                <!-- 开关 -->
                <ion-item *ngIf="field.type === 'Boolean'" lines="full">
                    <ion-label>{{field.name}}</ion-label>
                    <ion-toggle [formControlName]="field.key"></ion-toggle>
                </ion-item>

                <!-- 文本域 -->
                <ion-item *ngIf="field.type === 'Textarea'||field.type === 'TextArea'" lines="full">
                    <ion-label position="stacked">
                        {{field.name}}
                        <span *ngIf="field.required" class="required">*</span>
                    </ion-label>
                    <ion-textarea [formControlName]="field.key" autoGrow="true" rows="4">
                    </ion-textarea>
                    <ion-note slot="error"
                        *ngIf="getFieldControl(field.key)?.hasError('required') && getFieldControl(field.key)?.touched">
                        请输入{{field.name}}
                    </ion-note>
                </ion-item>
            </ng-container>
        </ion-list>

        <ion-button type="submit" expand="block" class="ion-margin" [disabled]="!form.valid">
            提交
        </ion-button>
    </form>
</ion-content>