<div class="list-template">
  <div class="list-template__content">
    <div class="list-template__top" nz-row>
      <div nz-col nzXl='15' class="list-template__searchBox">
        <div class="list-template__searchItem">
          <span class="label label--big">计划主题：</span>
          <input nz-input class="formItem" placeholder="请输入关键字" [(ngModel)]="searchCriteria.name" />
        </div>
        <div class="list-template__searchItem">
          <span class="label label--big">重复策略：</span>
          <nz-select [nzDropdownMatchSelectWidth]="false" class="formItem" nzAllowClear nzPlaceHolder="请选择重复策略" [(ngModel)]="searchCriteria.planTypeId">
            <ng-container *ngFor="let data of planTypes">
              <nz-option *ngIf="!isLoading" [nzLabel]="data.name" [nzValue]="data.id"></nz-option>
            </ng-container>
            <nz-option *ngIf="isLoading" nzDisabled nzCustomContent>
              <i nz-icon nzType="loading" class="loading-icon"></i> 搜索中...
            </nz-option>
          </nz-select>
        </div>
      </div>
      <div nz-col nzXl="9" class="list-template__btns">
        <button nz-button class="btn default" (click)='getList(1)'>搜索</button>
        <button nz-button class="btn default ml8" (click)='reset()'>重置</button>
        <button nz-button *ngIf="coopBtns.add" class="btn default ml8" (click)="addModal()">新增</button>
      </div>
    </div>
    <div class="list-template__bottom">
      <nz-table class="list-template__nzTable" [nzData]="listOfData" nzSize="middle" [nzShowPagination]="false"
        [nzLoading]="loading1">
        <thead>
          <tr class="thead">
            <th nzWidth="10%">计划主题</th>
            <th nzWidth="8%">重复策略</th>
            <th nzWidth="12%">执行时间</th>
            <th nzWidth="10%">执行时长（天）</th>
            <th nzWidth="10%">巡检表</th>
            <th nzWidth="10%">签到方式</th>
            <th nzWidth="10%">巡检类型</th>
            <th nzWidth="10%">状态</th>
            <th nzWidth="20%">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let data of listOfData;let i = index">
            <td>{{ data.name }}</td>
            <td>{{ data.planType?.name }}</td>
            <td [ngSwitch]="data.planType.value">
              <ng-container *ngSwitchCase="'none'">{{ data.execTime|date:'yyyy年MM月dd日HH时mm分' }}</ng-container>
              <ng-container *ngSwitchCase="'day'">{{ data.execTime|date:'HH时mm分' }}</ng-container>
              <ng-container *ngSwitchCase="'week'">{{data.weekName}} {{ data.execTime|date:'HH时mm分' }}</ng-container>
              <ng-container *ngSwitchCase="'month'">{{data.planDay}}日 {{ data.execTime|date:'HH时mm分' }}</ng-container>
              <ng-container *ngSwitchCase="'year'">{{ data.execTime|date:'MM月dd日HH时mm分' }}</ng-container>
            </td>
            <td>{{ data.execDay }}</td>
            <td>{{ data.inspectionFormDTO?.name }}</td>
            <td>{{ data.signType?.name }}</td>
            <td>{{ data.type?.name }}</td>
            <td>{{ data.status?.name }}</td>
            <td>
              <div class="coop">
                <!-- <span *ngIf="coopBtns.look" (click)="detail(data.id)">查看</span> -->
                <span *ngIf="coopBtns.del" (click)="showDelModal(data.id,'您确认要删除吗？','删除','del')">删除</span>
                <span *ngIf="coopBtns.edit" (click)="edit(data)">编辑</span>
                <span *ngIf="coopBtns.edit" (click)="planConfig(data)">配置</span>
                <span *ngIf="coopBtns.isStartUp && data.planType.value != 'none' && (data.status.value == '2' || data.status.value == '3')" (click)="showDelModal(data.id, data.status.value == 2 ? '您确认要停止巡检计划吗？' : '您确认要启动巡检计划吗？', data.status.value == 2 ? '停用' : '启用', 'switch', data.status.value == 2)">{{data.status.value == 2 ? '停用' : '启用'}}</span>
                <span *ngIf="coopBtns.executeNow && data.status.value != '1'" (click)="showDelModal(data.id, '您确认立即执行计划一次吗？确认后会立即生成计划内配置的巡检任务', '执行一次', 'once')">执行一次</span>
              </div>
            </td>
          </tr>
        </tbody>
      </nz-table>
      <div class="list-template__pagination">
        <nz-pagination [(nzPageIndex)]="pageIndex" [(nzTotal)]="listLength" [(nzPageSize)]="pageSize"
          (nzPageIndexChange)="getList(0)" (nzPageSizeChange)="getList(0)">
        </nz-pagination>
      </div>
    </div>
  </div>

  <!-- 新增/编辑模态框 -->
  <div class="save display_flex justify-content_flex-center align-items_center add" *ngIf="modal">
    <div class="modalBody">
      <div class="title">{{add?"新增":"编辑"}}巡检计划<i class="icon_transport transport-guanbi" (click)="hideAddModal()"></i>
      </div>
      <overlay-scrollbars #osComponentRef1 class="content">
        <form nz-form [formGroup]="validateForm" class="addForm" (ngSubmit)="submitForm()">
          <nz-form-item>
            <nz-form-label [nzSpan]="5" nzRequired nzFor="name">计划主题</nz-form-label>
            <nz-form-control [nzSpan]="19" nzErrorTip="请输入计划主题!">
              <nz-input-group>
                <input nz-input formControlName="name" placeholder="请输入计划主题" />
              </nz-input-group>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label class="line_height_normal" [nzSpan]="5" nzRequired nzFor="content">计划内容</nz-form-label>
            <nz-form-control [nzSpan]="19" nzErrorTip="请输入计划内容!">
              <nz-input-group>
                <textarea formControlName="content" nz-input placeholder="请输入计划内容"></textarea>
              </nz-input-group>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSpan]="5" nzRequired nzFor="formId">巡&nbsp;&nbsp;检&nbsp;&nbsp;单</nz-form-label>
            <nz-form-control [nzSpan]="19" nzErrorTip="请选择巡检单!">
              <nz-select [nzDropdownMatchSelectWidth]="false" formControlName="formId" nzShowSearch nzAllowClear
                nzPlaceHolder="请选择巡检单" nzServerSearch (nzOnSearch)="changeFormId($event)">
                <ng-container *ngFor="let data of formIds">
                  <nz-option *ngIf="!isLoading" [nzLabel]="data.name" [nzValue]="data.id">
                  </nz-option>
                </ng-container>
                <nz-option *ngIf="isLoading" nzDisabled nzCustomContent>
                  <i nz-icon nzType="loading" class="loading-icon"></i> 搜索中...
                </nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSpan]="5" nzRequired nzFor="type">巡检类型</nz-form-label>
            <nz-form-control [nzSpan]="19" nzErrorTip="请选择巡检类型!">
              <nz-select formControlName="type" nzPlaceHolder="请选择巡检类型">
                <nz-option [nzValue]="data.value" [nzLabel]="data.name" *ngFor="let data of types"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSpan]="5" nzRequired nzFor="execDay">执行时长</nz-form-label>
            <nz-form-control [nzSpan]="19" nzErrorTip="请填写执行时长!">
              <nz-input-number nzPlaceHolder="请填写执行时长" class="w100" formControlName="execDay" [nzMin]="0" [nzStep]="1" [nzFormatter]="formatterExecDay" [nzParser]="parserExecDay"></nz-input-number>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSpan]="5" nzRequired nzFor="planType">重复策略</nz-form-label>
            <nz-form-control [nzSpan]="19" nzErrorTip="请选择重复策略!">
              <nz-select formControlName="planType" nzPlaceHolder="请选择重复策略" (ngModelChange)="planTypeChange($event)">
                <nz-option [nzValue]="data.value" [nzLabel]="data.name" *ngFor="let data of planTypes"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
          <div style="display: flex;justify-content: space-between;">
            <nz-form-item *ngIf="validateForm.value.planType == 'week'" style="flex: 1;" class="mr8">
              <nz-form-label [nzSpan]="24" nzRequired nzFor="doWeek">执行时间（选择周）</nz-form-label>
              <nz-form-control [nzSpan]="24" nzErrorTip="请选择周!">
                <nz-select formControlName="doWeek" nzPlaceHolder="请选择周">
                  <nz-option [nzValue]="1" nzLabel="周一"></nz-option>
                  <nz-option [nzValue]="2" nzLabel="周二"></nz-option>
                  <nz-option [nzValue]="3" nzLabel="周三"></nz-option>
                  <nz-option [nzValue]="4" nzLabel="周四"></nz-option>
                  <nz-option [nzValue]="5" nzLabel="周五"></nz-option>
                  <nz-option [nzValue]="6" nzLabel="周六"></nz-option>
                  <nz-option [nzValue]="7" nzLabel="周日"></nz-option>
                </nz-select>
              </nz-form-control>
            </nz-form-item>
            <nz-form-item *ngIf="validateForm.value.planType == 'month'" style="flex: 1;" class="mr8">
              <nz-form-label [nzSpan]="24" nzRequired nzFor="doMonth">执行时间（选择日）</nz-form-label>
              <nz-form-control [nzSpan]="24" nzErrorTip="请选择日!">
                <nz-select formControlName="doMonth" nzPlaceHolder="请选择日">
                  <nz-option [nzValue]="item" [nzLabel]="item + '号'" *ngFor="let item of months">
                  </nz-option>
                </nz-select>
              </nz-form-control>
            </nz-form-item>
            <nz-form-item *ngIf="validateForm.value.planType == 'year'" style="flex: 1;" class="mr8">
              <nz-form-label [nzSpan]="24" nzRequired nzFor="doYear">执行时间（选择月日）</nz-form-label>
              <nz-form-control [nzSpan]="24" nzErrorTip="请选择月日!">
                <nz-date-picker nzFormat="MM-dd" formControlName="doYear" nzPlaceHolder="请选择月日"></nz-date-picker>
              </nz-form-control>
            </nz-form-item>
            <nz-form-item *ngIf="validateForm.value.planType == 'none'" style="flex: 1;" class="mr8">
              <nz-form-label [nzSpan]="24" nzRequired nzFor="doNone">执行时间（选择年月日）</nz-form-label>
              <nz-form-control [nzSpan]="24" nzErrorTip="请选择年月日!">
                <nz-date-picker nzFormat="yyyy-MM-dd" formControlName="doNone" nzPlaceHolder="请选择年月日"></nz-date-picker>
              </nz-form-control>
            </nz-form-item>
            <nz-form-item *ngIf="validateForm.value.planType" style="flex: 1;">
              <nz-form-label [nzSpan]="validateForm.value.planType == 'day' ? 5 : 24" nzRequired nzFor="execTime">执行时间{{validateForm.value.planType == 'day' ? '' : '（选择时分）'}}</nz-form-label>
              <nz-form-control [nzSpan]="validateForm.value.planType == 'day' ? 19 : 24" nzErrorTip="请选择时分!">
                <nz-time-picker nzFormat="HH:mm" formControlName="execTime" class="w100" nzPlaceHolder="请选择时分"
                  [nzAllowEmpty]="false">
                </nz-time-picker>
              </nz-form-control>
            </nz-form-item>
          </div>
          <nz-form-item>
            <nz-form-label [nzSpan]="5" nzRequired nzFor="signType">签到方式</nz-form-label>
            <nz-form-control [nzSpan]="19" nzErrorTip="请选择签到方式!">
              <nz-select formControlName="signType" nzPlaceHolder="请选择签到方式">
                <nz-option [nzValue]="data.value" [nzLabel]="data.name" *ngFor="let data of signTypes"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
        </form>
      </overlay-scrollbars>
      <div class=" display_flex justify-content_flex-center">
        <button nzType="primary" nz-button (click)="submitForm()" [nzLoading]="btnLoading">确认</button>
        <button class="btn cancel" nz-button nzType="default" (click)="hideAddModal()">取消</button>
      </div>
    </div>
  </div>

  <!-- 删除模态框 -->
  <app-dialog-delete [delModal]="delModal" (hideDelModalEvent)="hideDelModal()" [btnLoading]="btnLoading"
    (confirmDelEvent)="confirmDel()" [content]="tipsMsg1"></app-dialog-delete>
</div>
<!-- 操作成功/失败提示框 -->
<app-prompt-modal *ngIf="promptModalShow" [content]="promptContent" [success]="ifSuccess" [show]="promptModalShow"
  [info]="promptInfo">
</app-prompt-modal>
<!-- 查看详情 -->
<router-outlet></router-outlet>
<!-- 遮罩 -->
<app-mask *ngIf="maskFlag"></app-mask>
