<form nz-form [formGroup]="searchForm" class="search_form" [nzLayout]="'vertical'">
  <div nz-row [nzGutter]="24">
    <div nz-col [nzSpan]="6">
      <nz-form-item>
        <nz-form-label>用户名</nz-form-label>
        <nz-form-control>
          <input  nzSize="large"  nz-input formControlName="userName" placeholder="请输入" />
        </nz-form-control>
      </nz-form-item>
    </div>
    <div nz-col [nzSpan]="6">
      <nz-form-item>
        <nz-form-label>登录账户</nz-form-label>
        <nz-form-control>
          <input  nzSize="large"  nz-input formControlName="loginName" placeholder="请输入"/>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div nz-col [nzSpan]="6">
      <nz-form-item>
        <nz-form-label>联系方式</nz-form-label>
        <nz-form-control>
          <input  nzSize="large"  nz-input formControlName="telephone" placeholder="请输入"/>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div nz-col [nzSpan]="6">
      <nz-form-item>
        <nz-form-label>账户状态</nz-form-label>
        <nz-form-control>
          <nz-select  nzSize="large"  formControlName="status" nzAllowClear [nzPlaceHolder]="'请选择'">
            <nz-option *ngFor="let item of accountStatus" nzValue="{{item.codeValue}}" nzLabel="{{item.codeName}}"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div nz-col [nzSpan]="6">
        <button nz-button [nzType]="'primary'" (click)="searchFormSubmit()">查询</button>
        <button nz-button (click)="searchFormReset()">重置</button>
        <button nz-button [nzType]="'primary'" (click)="showEditAccount(true, null)">创建</button>
    </div>
  </div>
</form>

<nz-table #basicTable
          [nzScroll]="{ x: '1100px' }"
          [nzBordered]="true"
          [nzFrontPagination]="false"
          [nzShowQuickJumper]="true"
          [nzShowTotal]="totalTemplate"
          [(nzPageIndex)]="tablePageNum"
          (nzPageIndexChange)="queryData()"
          [nzTotal]="tableData.total"
          [nzData]="tableData.list" >
  <thead>
  <tr>
    <th nzWidth="80px">用户名</th>
    <th nzWidth="50px">登录账户</th>
    <th nzWidth="80px">联系方式</th>
    <th nzWidth="50px">创建时间</th>
    <th nzWidth="50px">更新时间</th>
    <th nzRight nzWidth="50px">操作</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let data of basicTable.data">
    <td>{{data.userName}}</td>
    <td>{{data.loginName}}</td>
    <td>{{data.telephone}}</td>
    <td>{{data.createTime | date: 'yyyy-MM-dd HH:mm'}}</td>
    <td>{{data.updateTime | date: 'yyyy-MM-dd HH:mm'}}</td>
    <td nzRight>
      <a (click)="showEditAccount(false, data)">修改</a>
      <nz-divider nzType="vertical"></nz-divider>
      <a nz-dropdown [nzDropdownMenu]="menu">
        更多
        <span nz-icon nzType="down"></span>
      </a>
      <nz-dropdown-menu #menu="nzDropdownMenu">
        <ul nz-menu nzSelectable>
          <li nz-menu-item *ngIf="data.status == 1"><a (click)="showDisable(data.id)">禁用账户</a></li>
          <li nz-menu-item *ngIf="data.status == 2"><a (click)="showRestore(data.id)">恢复账户</a></li>
          <li nz-menu-item><a (click)="showResetPwd(data.id)">密码重置</a></li>
          <li nz-menu-item nzDanger (click)="showDelData(data.id)">删除</li>
        </ul>
      </nz-dropdown-menu>
    </td>
  </tr>
  </tbody>
  <ng-template #totalTemplate let-total>总计 {{ total }} 条</ng-template>
</nz-table>

<nz-modal [(nzVisible)]="editAccountVisible" nzTitle="{{editAccountTitle}}" [nzFooter]="null" (nzOnCancel)="closeEditAccount()">
  <ng-container *nzModalContent>
    <form nz-form [formGroup]="editAccountForm" (ngSubmit)="submitEditAccountForm()">

      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>用户名</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="用户名填写有误！">
          <input  nzSize="large"  nz-input formControlName="userName"/>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>登录账户</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="登录账户填写有误！">
          <input  nzSize="large"  nz-input formControlName="loginName"/>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24">联系方式</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <input  nzSize="large"  nz-input formControlName="telephone"/>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>角色权限</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="角色权限选择有误！">
          <nz-select  nzSize="large"  nzShowSearch formControlName="roleId">
            <nz-option *ngFor="let item of roleData" nzValue="{{item.id}}" nzLabel="{{item.roleName}}"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>

      <div nz-flex [nzJustify]="'center'">
        <button nz-button nzType="primary" class="submit-btn">保存</button>
      </div>

    </form>
  </ng-container>
</nz-modal>
