<nz-modal [nzMaskClosable]="false" [nzFooter]="modalFooter" [nzWidth]="780" [(nzVisible)]="isVisiable" nzTitle="项目节点"
  (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
  <nz-spin [nzSpinning]="modelLoad" [nzDelay]="500">
    <nz-collapse class="my_collapse" nzAccordion style="margin: 0 15px 15px;">
      <nz-collapse-panel *ngFor="let panel of panels;index as i;" [nzHeader]="panel.name" [nzActive]="panel.active">
        <div style="padding-left: 15px;">
          <span>选择项目类型</span>
          <nz-select style="width: 150px;" [(ngModel)]="nodeType['node' + (i + 1)]" nzPlaceHolder="Choose"
            (ngModelChange)="selectChange(panel.value, $event)">
            <nz-option *ngFor="let item of panel.childPanel.list" [nzValue]="item.value" [nzLabel]="item.label">
            </nz-option>
          </nz-select>
          <nz-upload [nzShowUploadList]="false" [nzData]="{json: jsonData}" (nzChange)="nzChange($event, (i + 1))" nzName="file"
            [nzBeforeUpload]="beforeUpload"
            nzAction="/zabbixBox/maintainProject/addMaintainProjectNode">
            <button nz-button (click)="confirmJSON(i)">
              <i class="anticon anticon-upload"></i><span>上传</span>
            </button>
          </nz-upload>
        </div>
        <nz-table #basicTable [nzData]="listOfDataList['node' + (i + 1)]" [nzLoading]="false">
          <thead>
            <tr>
              <th>文件名称</th>
              <th>文件大小</th>
              <th style="min-width: 200px;">文件备注</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let data of basicTable.data">
              <td>{{ data.fileName }}</td>
              <td>{{ data.fileSize }}</td>
              <td>
                <span class="edit_hover" *ngIf="!data.edit"
                  (click)="data.edit = true">{{ data.beiz || '点击编辑备注' }}</span>
                <span *ngIf="data.edit">
                  <input style="width: calc(100% - 40px);" nz-input placeholder="填写备注" [(ngModel)]="data.beiz">
                  <i class="anticon anticon-check" style="color: #0b56de;" (click)="editData(data, (i + 1))"></i>
                  <i class="anticon anticon-close" style="color: #c12222;" (click)="data.edit = false"></i>
                </span>
              </td>
              <td>
                <a (click)="viewFile(data)">下载</a>
                <nz-divider nzType="vertical"></nz-divider>
                <a (click)="delFile(data, (i + 1))">删除</a>
              </td>
            </tr>
          </tbody>
        </nz-table>
      </nz-collapse-panel>
    </nz-collapse>
  </nz-spin>
  <ng-template #modalFooter></ng-template>
</nz-modal>