<form nz-form class="py-4" nzLayout="horizontal" [formGroup]="validateForm" (ngSubmit)="submitForm()">
  <div nz-row>
    <div nz-col [nzSpan]="11">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzRequired>计划名称</nz-form-label>
        <nz-form-control [nzSpan]="14" nzErrorTip="请输入计划名称">
          <input
            nz-input
            class="precaution-input"
            placeholder="请输入计划名称"
            maxlength="100"
            formControlName="title"
          />
        </nz-form-control>
      </nz-form-item>
    </div>
    <div nz-col [nzSpan]="13">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzRequired>组织级别</nz-form-label>
        <nz-form-control [nzSpan]="14" nzErrorTip="请选择组织级别">
          <nz-select
            class="precaution-select"
            nzPlaceHolder="请选择组织级别"
            formControlName="level"
            (ngModelChange)="onLevelChange($event)"
          >
            @for (level of levels; track level.value) {
              <nz-option [nzValue]="level.value" [nzLabel]="level.label"></nz-option>
            }
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>
  </div>
  <div nz-row>
    <div nz-col [nzSpan]="11">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzRequired>计划类型</nz-form-label>
        <nz-form-control [nzSpan]="14" nzErrorTip="请选择计划类型">
          <nz-select class="precaution-select" nzPlaceHolder="请选择计划类型" formControlName="type">
            @for (level of types; track level.value) {
              <nz-option [nzValue]="level.value" [nzLabel]="level.label"></nz-option>
            }
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div nz-col [nzSpan]="13">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzRequired>开始和结束时间</nz-form-label>
        <nz-form-control [nzSpan]="14" [nzErrorTip]="timeError">
          <nz-range-picker
            class="precaution-input"
            [nzShowTime]="false"
            [nzDisabledDate]="disabledDate"
            formControlName="time"
          ></nz-range-picker>
        </nz-form-control>
        <ng-template #timeError let-control>
          @if (control.errors?.required) {
            <div>请选择开始和结束时间</div>
          } @else if (control.errors?.message) {
            <div>{{ control.errors?.message }}</div>
          }
        </ng-template>
      </nz-form-item>
    </div>
  </div>
  <div nz-row>
    <div nz-col [nzSpan]="11">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzRequired>排查周期</nz-form-label>
        <nz-form-control [nzSpan]="14" nzErrorTip="请选择排查周期">
          <nz-select
            class="precaution-select"
            nzPlaceHolder="请选择排查周期"
            formControlName="cycle"
            (ngModelChange)="onCycleChange($event)"
          >
            @for (level of cycleOptions; track level.value) {
              <nz-option [nzValue]="level.value" [nzLabel]="level.label"></nz-option>
            }
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div nz-col [nzSpan]="11">
      <nz-form-item>
        @if (cycleControl.value) {
          <nz-form-control [nzSpan]="24" nzErrorTip="请填写排查频率" class="pl-4">
            @if (cycleControl.value !== '次') {
              <span>每</span>
              <nz-input-number class="precaution-input mx-2" formControlName="frequency"></nz-input-number>
              <span>{{ cycleShortLabel }}</span>
            }
            <nz-input-number class="precaution-input mx-2" formControlName="frequencyTimes"></nz-input-number>
            <span>次</span>
          </nz-form-control>
        }
      </nz-form-item>
    </div>
  </div>

  <nz-form-item>
    <nz-form-label style="width: 116px" nzRequired>排查目标</nz-form-label>
    <nz-form-control nzErrorTip="请选择排查目标">
      <risk-item-picker formControlName="targets" [visible]="riskItemPickerVisible" (close)="closeRiskItemPicker()">
        <button
          nz-button
          nzType="primary"
          class="precaution-secondary !rounded-xl ml-2"
          (click)="handleSelectTargets($event)"
        >
          {{ riskItemList.length > 0 ? '已选择' + riskItemList.length + '条' : '选择' }}
        </button>
      </risk-item-picker>
      <div class="text-sm text-gray-500 px-4 pt-4">
        <risk-items-visual-classify [data]="riskItemList"></risk-items-visual-classify>
      </div>
    </nz-form-control>
  </nz-form-item>

  <div class="pl-8">
    <nz-form-label>本次排查主要工作目标</nz-form-label>
    <nz-form-item>
      <nz-form-control [nzSpan]="23" nzErrorTip="请输入主要工作目标">
        <textarea
          nz-input
          class="precaution-input"
          placeholder="请输入主要工作目标, 最多 2000 字符"
          formControlName="content"
          rows="6"
          maxlength="2000"
        ></textarea>
      </nz-form-control>
    </nz-form-item>
  </div>
  <div class="flex justify-end pr-8 py-4">
    <button nz-button nzType="primary" class="precaution-secondary" (click)="onCancel()">取消</button>
    <button nz-button class="precaution-button ml-4" nzType="primary">提交</button>
  </div>
</form>
