<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one
  ~ or more contributor license agreements.  See the NOTICE file
  ~ distributed with this work for additional information
  ~ regarding copyright ownership.  The ASF licenses this file
  ~ to you under the Apache License, Version 2.0 (the
  ~ "License"); you may not use this file except in compliance
  ~ with the License.  You may obtain a copy of the License at
  ~
  ~   http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing,
  ~ software distributed under the License is distributed on an
  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  ~ KIND, either express or implied.  See the License for the
  ~ specific language governing permissions and limitations
  ~ under the License.
  -->

<nz-card>
  <div class="user-table-operate">
    <form nz-form [nzLayout]="'inline'" [formGroup]="form">
      <nz-form-item>
        <nz-form-label>{{ 'User Name' | translate }}</nz-form-label>
        <nz-form-control>
          <input nz-input formControlName="userName" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label>{{ 'Department' | translate }}</nz-form-label>
        <nz-form-control>
          <nz-tree-select
            style="width: 171px;"
            nzAllowClear
            nzDefaultExpandAll
            nzShowSearch
            nzPlaceHolder="{{ 'Please select' | translate }}"
            formControlName="deptCode"
            [nzNodes]="sysDeptTreeList"
          ></nz-tree-select>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label>{{ 'Email' | translate }}</nz-form-label>
        <nz-form-control>
          <input nz-input formControlName="email" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control>
          <button nz-button nzType="primary" (click)="queryUserList()">
            <i nz-icon nzType="search"></i>
            {{ 'Query' | translate }}
          </button>
          <button nz-button style="margin-left: 8px;" (click)="onShowUserDrawer()">
            <i nz-icon nzType="plus"></i>
            {{ 'Add User' | translate }}
          </button>
        </nz-form-control>
      </nz-form-item>
    </form>
  </div>

  <nz-table #table [nzData]="userList" [nzScroll]="{ x: '1100px' }" nzNoResult="{{ 'No result' | translate }}" nzBordered>
    <thead>
      <tr>
        <th>{{ 'User Name' | translate }}</th>
        <th>{{ 'Real Name' | translate }}</th>
        <th>{{ 'Department' | translate }}</th>
        <th>{{ 'Role' | translate }}</th>
        <th>{{ 'Status' | translate }}</th>
        <th>{{ 'Sex' | translate }}</th>
        <th>{{ 'Email' | translate }}</th>
        <th nzWidth="120px">{{ 'Create Time' | translate }}</th>
        <th nzWidth="120px" nzRight="0px">{{ 'Action' | translate }}</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let data of table.data">
        <td>{{ data.userName }}</td>
        <td>{{ data.realName }}</td>
        <td>{{ data.deptName }}</td>
        <td>{{ data.roleName }}</td>
        <td>{{ data['status@dict'] }}</td>
        <td>{{ data['sex@dict'] }}</td>
        <td>{{ data.email }}</td>
        <td>{{ data.createTime }}</td>
        <td class="td-action" nzRight="0px">
          <a (click)="onShowUserDrawer(data)">{{ 'Edit' | translate }}</a>
          <a nz-dropdown [nzDropdownMenu]="more">
            {{ 'More' | translate }}
            <i nz-icon nzType="down"></i>
          </a>
          <nz-dropdown-menu #more="nzDropdownMenu">
            <ul nz-menu nzSelectable>
              <li nz-menu-item (click)="onShowUserDrawer(data, true)">{{ 'Details' | translate }}</li>
              <li nz-menu-item (click)="onShowResetPasswordModal(data)">{{ 'Password' | translate }}</li>
              <li
                nz-menu-item
                nz-popconfirm
                nzPlacement="left"
                nzTitle="{{ 'Confirm to delete?' | translate }}"
                nzCancelText="{{ 'Cancel' | translate }}"
                nzOkText="{{ 'Ok' | translate }}"
                (nzOnConfirm)="onDeleteUser(data)"
              >
                {{ 'Delete' | translate }}
              </li>
            </ul>
          </nz-dropdown-menu>
        </td>
      </tr>
    </tbody>
  </nz-table>
</nz-card>

<submarine-user-password-modal
  [visible]="resetPasswordModalVisible"
  [userName]="currentSysUser?.userName"
  (close)="onHideResetPasswordModal()"
  (ok)="onChangePassword($event)"
></submarine-user-password-modal>

<submarine-user-drawer
  [visible]="userDrawerVisible"
  [readonly]="userDrawerReadonly"
  [sysDeptTreeList]="sysDeptTreeList"
  [sysUser]="currentSysUser"
  (close)="onCloseUserDrawer()"
  (submit)="onSubmitUserDrawer($event)"
></submarine-user-drawer>
