<div class="col-lg-12" style="margin-bottom:40px" [hidden]="silenceUpload === true">
  <h4 class="page-header mt0" *ngIf="uploadTitle.length > 0 ">{{uploadTitle}}</h4>
  <div class="card">
    <div class="card-body">
      <table class="table">
        <thead>
        <tr>
          <th width="10">#</th>
          <th>文件名</th>
          <th>大小</th>
          <th>上传进度</th>
          <th>状态</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let item of uploader.queue; let i = index;">
          <td>{{i + 1}}</td>
          <td><strong>{{ item?.file?.name }}</strong></td>
          <td nowrap>{{ item?.file?.size/1024/1024 | number : '.0-2' }} MB</td>
          <td>
            <div class="progress" style="margin-bottom: 0;">
              <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': item.progress + '%' }"></div>
            </div>
          </td>
          <td class="text-center">
            <span *ngIf="item.isSuccess"><i class="fa fa-ok"></i></span>
            <span *ngIf="item.isCancel"><i class="icon-close mr"></i></span>
            <span *ngIf="item.isError"><i class="fas fa-times"></i></span>
          </td>
          <td nowrap>
            <button type="button" class="btn btn-info btn-xs" (click)="item.upload()" [disabled]="item.isReady || item.isUploading || item.isSuccess">
              <span class="fa icon-cloud-upload mr"></span> 上传
            </button>
            <button  type="button" class="btn btn-warning btn-xs ml-2" (click)="item.cancel()" [disabled]="!item.isUploading">
              <span class="icon-close mr"></span> 取消
            </button>
            <button type="button" class="btn btn-danger btn-xs ml-2" (click)="item.remove()">
              <span class="icon-trash mr"></span> 移除
            </button>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
        <div class="float-left ml-2 row ">
          <label class="file-upload  mr-2" *ngIf="templateUrl !== undefined">
            <button type="button" class="btn btn-default btn-s" >
              <span class="fa icon-cloud-download mr"></span> 模版下载
            </button>
          </label>
          <label class="file-upload" *ngIf="multiple !== true">
            <button type="button" class="btn btn-info btn-s" >
              <span class="fa icon-doc mr"></span> 选择文件
            </button>
            <input #elSimpleUpload id="elSimpleFile" type="file" ng2FileSelect [uploader]="uploader" />
          </label>
          <label class="file-upload" *ngIf="multiple === true">
            <button type="button" class="btn btn-info btn-s" >
              <span class="fa icon-docs mr"></span> 选择文件
            </button>
            <input #elMultipleUpload id="elMultFile" type="file" ng2FileSelect [uploader]="uploader" multiple/>
          </label>
        </div>
        <div class="float-right">
          <button type="button" class="btn btn-info btn-s" (click)="uploader.uploadAll()" [disabled]="!uploader.getNotUploadedItems().length">
            <span class="fa icon-cloud-upload mr"></span> 上传文件
          </button>
          <button type="button" class="btn btn-warning btn-s ml-2" (click)="uploader.cancelAll()" [disabled]="!uploader.isUploading">
            <span class="icon-close mr"></span> 停止上传
          </button>
          <button type="button" class="btn btn-danger btn-s ml-2" (click)="uploader.clearQueue()" [disabled]="!uploader.queue.length">
            <span class="icon-trash mr"></span> 取消上传
          </button>
        </div>
      </div>
  </div>
</div>
