<div class="searchBar" @fade>
  <app-search-item [label]="'userName' | translate" [(value)]="userName"></app-search-item>
  <div class="btnLine">
    <button nz-button [nzType]="'primary'" class="searchBtn" [nzLoading]="isLoading" (click)="onSearch()"><span>{{'search' | translate}}</span></button>
    <button nz-button class="searchBtn" [nzLoading]="isLoading" (click)="onGetAll()"><span>{{'allData' | translate}}</span></button>
    <button nz-button class="searchBtn" [nzLoading]="isLoading" (click)="add()"><span>{{'add' | translate}}</span></button>
  </div>
</div>
<div class="tableBar" @fade>
  <nz-table #nzTable
            [nzData]="data"
            [nzLoading]="isLoading">
    <thead nz-thead>
    <tr>
      <th nz-th><span>{{'num' | translate}}</span></th>
      <th nz-th><span>{{'userNo' | translate}}</span></th>
      <th nz-th><span>{{'userRealName' | translate}}</span></th>
      <th nz-th><span>{{'userName' | translate}}</span></th>
      <th nz-th><span>{{'nickName' | translate}}</span></th>
      <th nz-th><span>{{'email' | translate}}</span></th>
      <th nz-th><span>{{'phone' | translate}}</span></th>
      <th nz-th><span>{{'userRole' | translate}}</span></th>
      <th nz-th><span>{{'oper' | translate}}</span></th>
    </tr>
    </thead>
    <tbody nz-tbody>
    <tr *ngFor="let one of nzTable.data,let i = index">
      <td nz-td>{{i + 1}}</td>
      <td nz-td>{{one.userNo}}</td>
      <td nz-td>{{one.realName}}</td>
      <td nz-td>{{one.userName}}</td>
      <td nz-td>{{one.nickName}}</td>
      <td nz-td>{{one.email}}</td>
      <td nz-td>{{one.phone}}</td>
      <td nz-td>{{one.roleName}}</td>
      <td nz-td>
        <span class="editSpan" (click)="edit(one)">{{'edit' | translate}}</span>
        <nz-divider nzType="vertical"></nz-divider>
        <span class="deleteFontColor" (click)="deleteConfirm(one.userNo)">{{'delete' | translate}}</span>
      </td>
    </tr>
    </tbody>
  </nz-table>
</div>

<nz-modal [(nzVisible)]="isVisible" [nzTitle]="(isUpdate ? 'editUser' : 'addUser') | translate" [nzContent]="modalContent" nzWidth="500"
          [nzFooter]="modalFooter" (nzOnCancel)="cancel()" nzMaskClosable="false">
  <ng-template #modalContent>
    <app-search-item [(value)]="req.nickName" [label]="'nickName' | translate" inModal="true"></app-search-item>
    <app-search-item [(value)]="req.realName" [label]="'userRealName' | translate" inModal="true"></app-search-item>
    <app-search-item [(value)]="req.userName" [label]="'loginName' | translate" inModal="true"></app-search-item>
    <app-search-select [(value)]="req.companyNo" [label]="'selectCompany' | translate" optL="companyName"
                       [data]="companys" inModal="true" optV="companyNo"></app-search-select>
    <app-search-select [(value)]="req.roleNo" [label]="'selectRole' | translate" optL="roleName"
                       [data]="roles" inModal="true" optV="roleNo"></app-search-select>
    <app-search-item [(value)]="req.password" type="password" *ngIf="!isUpdate"
                     [label]="'loginPassword' | translate" inModal="true"></app-search-item>
    <app-search-item [(value)]="req.phone" [label]="'userPhone' | translate" inModal="true" [maxlength]="11"></app-search-item>
    <app-search-item [(value)]="req.email" [label]="'userEmail' | translate" inModal="true"></app-search-item>
    <app-search-item [(value)]="req.img" [label]="'userImg' | translate" inModal="true"></app-search-item>
    <app-search-item [(value)]="req.remark" [label]="'remark' | translate" inModal="true"></app-search-item>
  </ng-template>
  <ng-template #modalFooter>
    <button nz-button nzType="default" [nzLoading]="isLoading" (click)="cancel()"><span>{{'cancel' | translate}}</span></button>
    <button nz-button nzType="primary" class="searchBtn" [nzLoading]="isLoading" (click)="save()"><span>{{'confirm' | translate}}</span></button>
  </ng-template>
</nz-modal>
