<div class="list-template">
  <div class="list-template__content">
    <div class="list-template__top" nz-row>
      <div nz-col nzXl='16' class="list-template__searchBox">
        <div class="list-template__searchItem">
          <span class="label">用户类型</span>：
          <nz-select class="formItem" [nzDropdownMatchSelectWidth]="false" nzShowSearch nzAllowClear
            nzPlaceHolder="请选择用户类型" [(ngModel)]="userType">
            <nz-option nzLabel="{{data.name}}" nzValue="{{data.id}}" *ngFor="let data of userTypes"></nz-option>
          </nz-select>
        </div>
        <div class="list-template__searchItem">
          <span class="label">所属科室</span>：
          <nz-select class="formItem" (nzOnSearch)="changeInp(hosId,'search',$event)"
            [nzDropdownMatchSelectWidth]="false" nzServerSearch nzShowSearch nzAllowClear nzPlaceHolder="请选择所属科室"
            [(ngModel)]="department">
            <ng-container *ngFor="let option of alldepart1">
              <nz-option *ngIf="!isLoading" [nzLabel]="option.dept" [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 class="list-template__searchItem">
          <span class="label">所属组</span>：
          <nz-select class="formItem" [nzDropdownMatchSelectWidth]="false" nzShowSearch nzAllowClear
            nzPlaceHolder="请选择所属组" [(ngModel)]="userGroup1">
            <nz-option nzLabel="{{data.groupName}}" nzValue="{{data.id}}" *ngFor="let data of allUserGroup1">
            </nz-option>
          </nz-select>
        </div>
        <div class="list-template__searchItem">
          <span class="label">用户名</span>：
          <input nz-input class="formItem" [(ngModel)]="num" placeholder="请输入用户名" nzSize="default" />
        </div>
        <div class="list-template__searchItem">
          <span class="label">姓名</span>：
          <input nz-input class="formItem" [(ngModel)]="name" placeholder="请输入姓名" nzSize="default" />
        </div>
      </div>
      <div nz-col nzXl='8' class="list-template__btns">
        <button nz-button class="btn default" (click)='search()'>搜索</button>
        <button nz-button class="btn ml8 default" (click)='reset()'>重置</button>
        <button nz-button *ngIf="coopBtns.add" class="btn ml8 default" (click)="showModal()">新增</button>
        <button nz-button *ngIf="coopBtns.templateDownload" class="btn ml8 default" (click)="excelExport()">模板下载</button>
        <button nz-button *ngIf="coopBtns.import" class="btn ml8 default" (click)="excelImport()">导入</button>
      </div>
    </div>
		<div class="list-template__checkBoxes">
		  <nz-checkbox-group [(ngModel)]="checkOptionsOne" (ngModelChange)="log(checkOptionsOne)"></nz-checkbox-group>
		</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="5%">序号</th>
            <th nzWidth="10%">姓名</th>
            <th nzWidth="5%">用户名</th>
            <th nzWidth="10%">绩效ID</th>
            <th nzWidth="5%">性别</th>
            <th nzWidth="10%">手机号码</th>
            <th nzWidth="10%">所属科室</th>
            <th nzWidth="10%">所属组</th>
            <th nzWidth="10%">用户类型</th>
						<th nzWidth="10%">用户状态</th>
            <th nzWidth="15%">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let data of listOfData;let index=index;">
            <td>{{index+(pageIndex-1) * pageSize + 1}}</td>
            <td>{{ data.name }}</td>
            <td>{{ data.account }}</td>
            <td>{{ data.gradeId }}</td>
            <td>{{data.gender?data.gender.name:''}}</td>
            <td>{{ data.phone }}</td>
            <td>{{ data.dept?data.dept.dept:'' }}</td>
            <td>
              <div *ngIf="data.group&&data.group.length">
                <div *ngFor="let gro of data.group;let i=index;">
                  <span *ngIf='i!=data.group.length-1'>{{gro.groupName}},</span>
                  <span *ngIf='i==data.group.length-1'>{{gro.groupName}}</span>

                </div>
              </div>
              <div *ngIf="!data.group||!data.group.length">
                -
              </div>
            </td>
            <td>{{ data.usertype ? data.usertype.name : '' }}</td>
						<td>{{ data.accountStatus?.name }}</td>
            <td>
              <div class="coop">
                <span *ngIf="coopBtns.look && !checkOptionsOne[0].checked" (click)="detail(data.id)">查看</span>
                <span *ngIf="coopBtns.edit || checkOptionsOne[0].checked" (click)="edit(data)">编辑</span>
								<span *ngIf="checkOptionsOne[0].checked" (click)="recover(data)">恢复</span>
                <span *ngIf="coopBtns.unlock && data.accountStatus && data.accountStatus.value==2" (click)="unlock(data,1)">解锁</span>
								<span *ngIf="(coopBtns.lock && data.accountStatus && data.accountStatus.value==1) || (coopBtns.lock && !data.accountStatus)" (click)="unlock(data,2)">锁定</span>
								<span *ngIf="coopBtns.del && !checkOptionsOne[0].checked" (click)="del(data)">删除</span>
                <span *ngIf="coopBtns.resetPwd && !checkOptionsOne[0].checked" (click)="resetPwd(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">用户管理 - {{add?"新增":"编辑"}}<i class="icon_transport transport-guanbi" (click)="hideModal()"></i>
    </div>
    <overlay-scrollbars #osComponentRef1 class="content">
      <form nz-form [formGroup]="validateForm" class="addForm" (ngSubmit)="submitForm()">
        <nz-form-item>
          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="name">姓名</nz-form-label>
          <nz-form-control nzErrorTip="请填写姓名!">
            <nz-input-group>
              <input type="name" nz-input formControlName="name" placeholder="请填写姓名" />
            </nz-input-group>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="account">用户名</nz-form-label>
          <nz-form-control nzErrorTip="请填写用户名!">
            <nz-input-group>
              <input type="account" nz-input formControlName="account" placeholder="请填写用户名" />
            </nz-input-group>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="gradeId">绩效ID</nz-form-label>
          <nz-form-control nzErrorTip="请填写绩效ID!">
            <nz-input-group>
              <input type="gradeId" nz-input formControlName="gradeId" placeholder="请填写绩效ID" />
            </nz-input-group>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSm]="6" [nzXs]="24" [nzRequired]="wxRequired" nzFor="weixin">微信</nz-form-label>
          <nz-form-control nzErrorTip="请填写微信!">
            <nz-input-group>
              <input type="weixin" nz-input formControlName="weixin" placeholder="请填写微信" />
            </nz-input-group>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="usertype">用户类型</nz-form-label>
          <nz-form-control nzErrorTip="请选择用户类型!">
            <nz-select [nzDropdownMatchSelectWidth]="false" type="usertype" nzShowSearch nzAllowClear
              formControlName="usertype" nzPlaceHolder="请选择用户类型" (ngModelChange)="usertypeChange($event)">
              <nz-option nzLabel="{{data.name}}" nzValue="{{data.value}}" *ngFor="let data of userTypes">
              </nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
				<nz-form-item>
				  <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="priority">优先级</nz-form-label>
				  <nz-form-control nzErrorTip="请选择优先级!">
				    <nz-select [nzDropdownMatchSelectWidth]="false" formControlName="priority" nzShowSearch
				    nzPlaceHolder="请选择优先级" nzServerSearch>
				      <ng-container *ngFor="let option of priority_c_List">
				        <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>
				  </nz-form-control>
				</nz-form-item>
        <nz-form-item *ngIf="validateForm.value.usertype == 4">
          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="companyId">所属公司</nz-form-label>
          <nz-form-control nzErrorTip="请选择所属公司!">
            <nz-select (nzOnSearch)="changeCompanyInp(hosId,'add',$event)" [nzDropdownMatchSelectWidth]="false"
              nzServerSearch nzShowSearch nzAllowClear formControlName="companyId" nzPlaceHolder="请选择所属公司">
              <ng-container *ngFor="let option of allcompany">
                <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>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="dept">所属科室</nz-form-label>
          <nz-form-control nzErrorTip="请选择所属科室!">
            <nz-select (nzOnSearch)="changeInp(hosId,'add',$event)" [nzDropdownMatchSelectWidth]="false" type="dept"
              nzServerSearch nzShowSearch nzAllowClear formControlName="dept" nzPlaceHolder="请选择所属科室">
              <ng-container *ngFor="let option of alldepart">
                <nz-option *ngIf="!isLoading" [nzLabel]="option.dept" [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>
          </nz-form-control>
        </nz-form-item>
				<nz-form-item>
				  <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="mngmtDept">管理科室</nz-form-label>
				  <nz-form-control nzErrorTip="请选择管理科室!">
				    <nz-select nzMode="multiple" (nzOnSearch)="changeInp(hosId,'add',$event)" [nzDropdownMatchSelectWidth]="false" type="dept"
				      nzServerSearch nzShowSearch nzAllowClear formControlName="mngmtDept" nzPlaceHolder="请选择所属科室">
				      <ng-container *ngFor="let option of alldepart">
				        <nz-option *ngIf="!isLoading" [nzLabel]="option.dept" [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>
				  </nz-form-control>
				</nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="deptPhone">手机号码</nz-form-label>
          <nz-form-control nzErrorTip="请填写正确的手机号码!">
            <nz-input-group>
              <input type="deptPhone" pattern="[\d-]+" nz-input formControlName="deptPhone" placeholder="请填写手机号码" />
            </nz-input-group>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label style="line-height:40px;" [nzSm]="3" [nzXs]="24" nzRequired nzFor="gender">性别</nz-form-label>
          <nz-form-control nzErrorTip="请选择性别!">
            <nz-radio-group type="gender" formControlName="gender">
              <label nz-radio nzValue="{{data.id}}" *ngFor="let data of genders">{{data.name}}</label>
            </nz-radio-group>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="userGroup">用户组</nz-form-label>
          <nz-form-control nzErrorTip="请选择用户组!">
            <nz-select [nzDropdownMatchSelectWidth]="false" type="userGroup" nzAllowClear nzMode="multiple"
              formControlName="userGroup" nzPlaceHolder="请选择用户组">
              <nz-option nzLabel="{{data.groupName}}" nzValue="{{data.id}}" *ngFor="let data of allUserGroup">
              </nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="role">角色</nz-form-label>
          <nz-form-control nzErrorTip="请选择角色!">
            <nz-select [nzDropdownMatchSelectWidth]="false" type="role" nzShowSearch nzAllowClear nzMode="multiple"
              formControlName="role" nzPlaceHolder="请选择角色">
              <nz-option nzLabel="{{data.role}}" nzValue="{{data.id}}" *ngFor="let data of allUserRole">
              </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)="hideModal()">取消</button>
    </div>
  </div>
</div>
<!-- 删除模态框 -->
<app-dialog-delete [delModal]="delModal" (hideDelModalEvent)="hideDelModal()" [btnLoading]="btnLoading" [cancenlLoading]="cancenlLoading"
  (confirmDelEvent)="confirmDel()" (cancelDelEvent)="cancelDel()" content="是否删除企业微信同用户？" confirmTxt="是" cancelTxt="否">
</app-dialog-delete>

<!-- 恢复账号 -->
<app-dialog-delete [delModal]="recoverModal" [btnLoading]="recoverLoading" (hideDelModalEvent)="hideRecoverModal()"
  (confirmDelEvent)="confirmRecover()" (cancelDelEvent)="hideRecoverModal()" content="您确认恢复此用户吗？" confirmTxt="是" cancelTxt="否">
</app-dialog-delete>

<!-- 解锁/锁定 -->
<app-dialog-delete [delModal]="lockModal" [btnLoading]="lockLoading" (hideDelModalEvent)="hideLockModal()"
  (confirmDelEvent)="confirmLock()" (cancelDelEvent)="hideLockModal()" [content]="lockContent" confirmTxt="是" cancelTxt="否">
</app-dialog-delete>

<!-- 重置密码模态框 -->
<app-dialog-delete [delModal]="resetModal" (hideDelModalEvent)="hideResetModal()" [btnLoading]="btnLoading" [cancenlLoading]="cancenlLoading"
  (confirmDelEvent)="confirmReset()" (cancelDelEvent)="cancelReset()" content="是否重置密码？">
</app-dialog-delete>
<!-- 操作成功/失败提示框 -->
<app-prompt-modal *ngIf="promptModalShow" [content]="promptContent" [success]="ifSuccess" [show]="promptModalShow"
  [info]="promptInfo"></app-prompt-modal>

<!-- 查看详情 -->
<router-outlet (deactivate)="getList()"></router-outlet>

<!-- 遮罩 -->
<app-mask *ngIf="maskFlag"></app-mask>

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