<div class="list-template">
  <div class="content list-template__content">
		<div class="list-left">
			<div class="tree-top-add">
				<button class="btn default" (click)='addTree(1)'>新增一级目录</button>
			</div>
			<div class="tree-opt">
				<div class="item" (click)='addTree(2)'>新增</div>
				<div class="item" (click)="treeDel()">删除</div>
				<div class="item" (click)='editTree(3)'>修改</div>
			</div>
			<div class="tree-content">
				<nz-tree [nzData]="nodes"
				(nzClick)="nodeClick($event)"
				[nzExpandedKeys]="defaultExpandedKeys"
				[nzTreeTemplate]="nzTreeTemplate"
				>
				</nz-tree>
				<ng-template #nzTreeTemplate let-node>
					 <span class="custom-node" [ngClass]="treeItem?.id === node.origin.id?'activeClass':''">
							<span *ngIf="!node.isLeaf">
								<i nz-icon [nzType]="node.isExpanded ? 'minus-square' : 'plus-square'" (click)="openFolder(node)"></i>
								<span class="folder-name">{{ node.title }}</span>
							</span>
							<span *ngIf="node.isLeaf">
								<span class="file-name">{{ node.title }}</span>
							</span>
						</span>
				</ng-template>
			</div>
		</div>
		<div class="list-right">
			<div class="list-template__top">
			  <div class="list-template__searchBox">
					<div class="list-template__searchItem">
					  <span class="label">文档名称：</span>
					  <input nz-input class="formItem" [(ngModel)]="fileName" placeholder="请输入文档名称" nzSize="default" />
					</div>
			  </div>
			  <div class="list-template__btns">
			    <button class="btn default" (click)='search()'>搜索</button>
			    <button class="btn default ml8" (click)='reset()'>重置</button>
					<button class="btn default ml8" (click)='excelImport("",1)'>上传文档</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>文档名称</th>
			        <th>文档格式</th>
			        <th>大小</th>
			        <th>上传者</th>
			        <th>更新时间</th>
			        <th nzWidth="25%">操作</th>
			      </tr>
			    </thead>
			    <tbody v-if="listOfData && listOfData.length>0">
			      <tr *ngFor="let data of listOfData let index = index;">
							<td>{{ index+(pageIndex-1) * pageSize + 1 }}</td>
			        <td>{{ data.fileName || '-' }}</td>
			        <td>{{ data.fileType||'0' }}</td>
			        <td>{{ data.docSize ||'0' }}</td>
			        <td>{{ data.createUserDTO && data.createUserDTO.name || '0'}}</td>
			        <td>{{ data.updateTime|date:'yyyy-MM-dd HH:mm:ss'}}</td>
			        <td>
			          <div class="coop">
									<span *ngIf="coopBtns.del" (click)="delList($event,data.id)">删除</span>
									<span *ngIf="coopBtns.download" (click)="excelExport($event,data)">下载</span>
			            <span *ngIf="coopBtns.updata" (click)="excelImport(data.id,2)">更新</span>
									<span *ngIf="coopBtns.look" (click)="detail(data)">查看历史</span>
								</div>
			        </td>
			      </tr>
			    </tbody>
			  </nz-table>
			  <div class="list-template__pagination">
			    <nz-pagination [(nzPageIndex)]="pageIndex" [(nzTotal)]="listLength" nzShowSizeChanger [(nzPageSize)]="pageSize"
			      (nzPageIndexChange)="getList()" (nzPageSizeChange)="getList()">
			    </nz-pagination>
			  </div>
			</div>
		</div>

  </div>

  <!-- 新增/编辑模态框 -->
  <div class="save add display_flex align-items_center justify-content_flex-center" *ngIf="modal">
    <div class="modalBody">
      <div class="title">查看历史<i class="icon_transport transport-guanbi" (click)="hideModal()"></i>
      </div>
      <overlay-scrollbars #osComponentRef1 class="content">
        <div class="list-template__bottom">
          <nz-table class="list-template__nzTable" [nzData]="viewData" nzSize="middle" [nzShowPagination]="false"
            [nzLoading]="loading1">
            <thead>
              <tr class="thead">
								<th>文档名称</th>
								<th>文档格式</th>
                <th>上传者</th>
                <th>版本号</th>
                <th>大小</th>
                <th>上传时间</th>
        				<th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let data of viewData">
								<td>{{ data.fileName }}</td>
								<td>{{ data.fileType||'-' }}</td>
                <td>{{ data.createUserDTO?data.createUserDTO.name:'-' }}</td>
                <td>{{ data.fileVersion||'-' }}</td>
                <td>{{ data.docSize||'0' }}</td>
                <td>{{ data.createTime|date:'yyyy-MM-dd HH:mm:ss'}}</td>
								<td>
								  <div class="coop">
										<!-- <span *ngIf="coopBtns.del" (click)="delHistory(data)">删除</span> -->
										<span *ngIf="coopBtns.download" (click)="excelHistory(data)">下载</span>
									</div>
								</td>
              </tr>
            </tbody>
          </nz-table>
        </div>
      </overlay-scrollbars>
      <div class="display_flex justify-content_flex-center">
        <button class="btn" nz-button nzType="primary" (click)="hideModal()">知道了</button>
      </div>
    </div>
  </div>
  <!-- 删除模态框 -->
  <app-dialog-delete [delModal]="delModal" (hideDelModalEvent)="hideDelModal()" [btnLoading]="btnLoading"
    (confirmDelEvent)="confirmDel()" content="您确认要删除文档吗？"></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>

<app-upload-file [isShow]="isShow" (hideFormHand)="hideExcelImport($event)" *ngIf="isShow" (submitFormHand)="submitExcelImport($event)"></app-upload-file>

<!-- 删除树结构模态框 -->
  <app-dialog-delete [delModal]="delTreeModal" (hideDelModalEvent)="hideTreeModal()" [btnLoading]="btnLoading"
    (confirmDelEvent)="confirmTree()" content="您确认要删除目录吗？"></app-dialog-delete>

<!-- 新增一级目录 -->
<div class="save display_flex justify-content_flex-center align-items_center add" *ngIf="addModal">
	<div class="modalAddBody">
		<div class="title">{{add?'新增':'编辑'}}<i class="icon_transport transport-guanbi" (click)="hideAddModal()"></i>
		</div>
		<div class="content">
			<form nz-form [formGroup]="validateTreeForm" class="addForm" (ngSubmit)="submitForm()">
				<nz-form-item *ngIf="treeType==2">
					<nz-form-label [nzSpan]="7" nzFor="parent">父级目录名称</nz-form-label>
					<nz-form-control [nzSpan]="17" nzErrorTip="请输入父级目录名称!">
						<nz-input-group>
							<input nz-input disabled formControlName="parent" placeholder="请输入父级目录名称" />
						</nz-input-group>
					</nz-form-control>
				</nz-form-item>
				<nz-form-item>
					<nz-form-label [nzSpan]="7" nzRequired nzFor="folderName">目录名称</nz-form-label>
					<nz-form-control [nzSpan]="17" nzErrorTip="请输入目录名称!">
						<nz-input-group>
							<input nz-input formControlName="folderName" placeholder="请输入目录名称" />
						</nz-input-group>
					</nz-form-control>
				</nz-form-item>
			</form>
		</div>
		<div class=" display_flex justify-content_flex-center">
			<button nzType="primary" [nzLoading]="btnLoading" nz-button (click)="submitAddForm()">确认</button>
			<button class="btn cancel" nz-button nzType="default" (click)="hideAddModal()">取消</button>
		</div>
	</div>
</div>
