<div class="list-template">
  <div class="content list-template__content">
		<div class="list-template__top" nz-row>
		  <div nz-col nzXl='18' class="list-template__searchBox">
				<div class="list-template__searchItem">
					<span class="label">状态：</span>
					<nz-select class="formItem" [nzDropdownMatchSelectWidth]="false" nzShowSearch nzPlaceHolder="请选择状态" [(ngModel)]="state">
						<ng-container *ngFor="let option of stateList">
							<nz-option [nzLabel]="option.name" [nzValue]="option.id"></nz-option>
						</ng-container>
					</nz-select>
				</div>
				<div class="list-template__searchItem">
					<span class="label">月度任务：</span>
					<nz-select class="formItem" [nzDropdownMatchSelectWidth]="false" nzShowSearch nzPlaceHolder="请选择月度任务" [(ngModel)]="monthTask">
						<ng-container *ngFor="let option of monthlyData">
							<nz-option [nzLabel]="option.taskTitle" [nzValue]="option.id"></nz-option>
						</ng-container>
					</nz-select>
				</div>
				<div class="list-template__searchItem">
					<span class="label">优先级：</span>
					<nz-select class="formItem" [nzDropdownMatchSelectWidth]="false" nzShowSearch nzPlaceHolder="请选择优先级" [(ngModel)]="priority">
						<ng-container *ngFor="let option of priorityData">
							<nz-option [nzLabel]="option.name" [nzValue]="option.id"></nz-option>
						</ng-container>
					</nz-select>
				</div>
			<!-- 	<div class="list-template__searchItem">
					<span class="label">执行人：</span>
					<nz-select class="formItem" [nzDropdownMatchSelectWidth]="false" nzServerSearch nzShowSearch
						(nzOnSearch)="changeUser($event)" nzAllowClear nzPlaceHolder="请选择执行人员" [(ngModel)]="executor">
						<ng-container *ngFor="let option of dutyUser">
							<nz-option *ngIf="!isLoading" [nzLabel]="option.name" [nzValue]="option.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 class="list-template__btns">
				<button class="btn default" (click)='search()'>搜索</button>
				<button class="btn default ml8" (click)='reset()'>重置</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>任务内容</th>
						<th>月度任务标题</th>
						<th>预计完成时间</th>
						<th>优先级</th>
						<th>状态</th>
						<th>开始时间</th>
						<th>结束时间</th>
						<th>执行人</th>
						<th nzWidth="240px">操作</th>
					</tr>
				</thead>
				<tbody v-if="listOfData && listOfData.length>0">
					<tr *ngFor="let data of listOfData let index = index;">
						<td>{{ data.taskContent || '-' }}</td>
						<td>{{ data.monthTaskDTO.taskTitle || '-' }}</td>
						<td>{{ data.estimatedCompletionTime|date:'yyyy-MM-dd HH:mm:ss' }}</td>
						<td>{{ data.priority && data.priority.name||'-'}}</td>
						<td>{{ data.state && data.state.name||'-'}}</td>
						<td>{{ data.startTime | date:'yyyy-MM-dd HH:mm:ss'}}</td>
						<td>{{ data.endTime | date:'yyyy-MM-dd HH:mm:ss'}}</td>
						<td>{{ data.executorDTO && data.executorDTO.name||'-' }}</td>
						<td>
							<div class="coop">
								<span *ngIf="coopBtns.startTask && data.state && data.state.value==1" (click)="startTask(data)">开始任务</span>
								<span *ngIf="coopBtns.accomplish && data.state && data.state.value==2" (click)="accomplish(data)">完成任务</span>
								<span *ngIf="coopBtns.record && data.state && data.state.value==2" (click)="record(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 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]="startModal" (hideDelModalEvent)="hideStartModal()" [btnLoading]="btnLoading"
    (confirmDelEvent)="confirmStart()" 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>
	
<!-- 任务记录 -->
<div class="save add display_flex align-items_center justify-content_flex-center" *ngIf="allocationModal">
  <div class="modalBody">
    <div class="title">任务记录<i class="icon_transport transport-guanbi" (click)="hideAllocationModal()"></i>
    </div>
    <div class="content">
      <form nz-form [formGroup]="validateAllocationForm" class="addForm" (ngSubmit)="submitAllocationForm()">
				<nz-form-item>
				  <nz-form-label class="margin-label" [nzSm]="6" [nzXs]="24" nzRequired nzFor="taskConclusion">任务记录</nz-form-label>
				  <nz-form-control nzErrorTip="请输入任务记录!">
				    <nz-input-group>
							<textarea formControlName="taskConclusion" nz-input rows="3" placeholder="请输入任务记录"></textarea>
						</nz-input-group>
				  </nz-form-control>
				</nz-form-item>
				
				<nz-form-item>
				  <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="manHour">工时</nz-form-label>
				  <nz-form-control nzErrorTip="请输入工时!">
				    <nz-input-group>
							<nz-input-number
								formControlName="manHour"
								[nzMin]="0"
								[nzPrecision]="0"
								[nzMax]="999999"
								[nzStep]="1"
								[nzPlaceHolder]="'请输入工时'"
							 ></nz-input-number>
				    </nz-input-group>
				  </nz-form-control>
				</nz-form-item>
      </form>
    </div>
    <div class="display_flex justify-content_flex-center">
      <button nzType="primary" nz-button (click)="submitAllocationForm()" [nzLoading]="btnLoading">确认</button>
      <button class="btn cancel" nz-button nzType="default" (click)="hideAllocationModal()">取消</button>
    </div>
  </div>
</div>

<!-- 完成任务 -->
<div class="save add display_flex align-items_center justify-content_flex-center" *ngIf="accomplishModal">
  <div class="modalBody">
    <div class="title">完成任务<i class="icon_transport transport-guanbi"></i>
    </div>
    <div class="content padding-bottom">
			<div class="item">
				<div class="label"><span class="sign">*</span>任务总结:</div>
				<textarea [(ngModel)]="taskConclusion" nz-input rows="3" placeholder="请输入任务总结"></textarea>
			</div>
			<div class="item">
				<div class="label"><span class="sign">*</span>总工时:</div>
				<nz-input-number
					[(ngModel)]="manHour"
					[nzMin]="0"
					[nzPrecision]="0"
					[nzMax]="999999"
					[nzStep]="1"
					[nzPlaceHolder]="'请输入工时'"
				 ></nz-input-number>
			</div>
			
		</div>
    <div class="display_flex justify-content_flex-center">
      <button nzType="primary" nz-button (click)="submitAccomplishForm()" [nzLoading]="btnLoading">确认</button>
      <button class="btn cancel" nz-button nzType="default" (click)="hideAccomplishModal()">取消</button>
    </div>
  </div>
</div>