<div class="content-heading justify-content-between">
  <div>框架配置 - 用户管理</div>
  <div>
    <a frameRole res="optr_manage" href="#" (click)="goViewStep({},'add')"><em class="fa-lg fas icon-plus "></em></a>
  </div>
</div>
<div [hidden]="viewStep !== 'page' " class="ml-0 table-responsive bg-white">
  <table class="table table-striped table-hover table-bordered">
    <thead>
      <tr>
        <th>#</th>
        <th><a (click)="frameOptr.sort('login_name')">登录名称</a></th>
        <th>真实姓名</th>
        <th>所属角色</th>
        <th>联系电话</th>
        <th>状态</th>
        <th>机构类型</th>
        <th>机构名称</th>
        <!-- <th>职务</th> -->
        <th>最后登录时间</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let optr of frameOptr.getRecords(); let i = index">
        <td>{{i + 1}}</td>
        <td>{{optr.login_name}}</td>
        <td>{{optr.optr_name}}</td>
        <td>{{optr.optr_name}}</td>
        <td>{{optr.optr_mobile}}</td>
        <td [innerHTML]="optr.optr_status | frameStatus "> </td>
        <td>{{optr.org_type | frameDict: 'OrgType'}}</td>
        <td>{{optr.org_name}}</td>
        <!-- <td>{{optr.optr_post}}</td> -->
        <td>{{optr.last_login_time}}</td>
        <td align="center">
          <a href="#" *ngIf="optr.optr_id>0" frameRole res="optr_manage" title="修改" (click)="goViewStep(optr,'edit')"><em class="fa-lg fas fa-edit mr-1"></em></a>
          <a href="#" *ngIf="optr.optr_id>0" frameRole res="optr_manage" title="删除" (click)="delete(optr)"><em class="fa-lg fas fa-trash mr-1" style="color:#F56D6D"></em></a>
          <a href="#" *ngIf="optr.optr_id>0" frameRole res="optr_manage" title="重置密码"  (click)="resetPassword(optr)"><em class="fa-lg fas icon-lock mr-1"></em></a>
          <a href="#" *ngIf="optr.optr_id>0 && optr.optr_status === 'Active'" frameRole res="optr_manage" title="禁用"  (click)="enable(optr,'InActive')"><em class="fa-lg fas icon-close mr-1"></em></a>
          <a href="#" *ngIf="optr.optr_id>0 && optr.optr_status === 'InActive'" frameRole res="optr_manage" title="启用"  (click)="enable(optr,'Active')"><em class="fa-lg fas icon-plus mr-1"></em></a>
        </td>
      </tr>
    </tbody>
  </table>
  <frame-pager [url]="'frame/optr/pageGx.htm'" #frameOptr></frame-pager>
</div>

<div [hidden]="viewStep === 'page' ">
  <div class="card card-default">
    <div class="card-body">
      <form [formGroup]="valForm" class="form-validate form-horizontal" novalidate="">

        <div class="row" formGroupName="passwordGroup">
          <label class="col-lg-1 col-form-label text-lg-right">登录名称</label>
          <div class="col-lg-3">
            <input class="form-control" [readonly]="viewStep === 'edit'" type="text" #elLoginName formControlName="login_name"
              [formControl]="valForm.get('passwordGroup.login_name')" [(ngModel)]="optr.login_name" />
            <span class="text-danger" *ngIf="valForm.get('passwordGroup.login_name').hasError('required') && (valForm.get('passwordGroup.login_name').dirty || valForm.get('passwordGroup.login_name').touched)">请输入登录名称</span>
            <span class="text-danger" *ngIf="valForm.get('passwordGroup.login_name').hasError('rangewords') && (valForm.get('passwordGroup.login_name').dirty ||valForm.get('passwordGroup.login_name').touched)">登录名称最少需要2个字符，最大允许16个字符</span>
          </div>

          <label class="col-lg-1 col-form-label text-lg-right">登录密码</label>
          <div class="col-lg-3">
            <input class="form-control" [readonly]="viewStep === 'edit'" type="password" formControlName="login_pass"
              [formControl]="valForm.get('passwordGroup.login_pass')" [(ngModel)]="optr.login_pass" />
            <span class="text-danger" *ngIf="valForm.get('passwordGroup.login_pass').hasError('required') && (valForm.get('passwordGroup.login_pass').dirty || valForm.get('passwordGroup.login_pass').touched)">请输入操作员登录密码</span>
            <span class="text-danger" *ngIf="valForm.get('passwordGroup.login_pass').hasError('rangewords') && (valForm.get('passwordGroup.login_pass').dirty || valForm.get('passwordGroup.login_pass').touched) ">登录密码最少需要6个字符，最大允许24个字符</span>
          </div>

          <label class="col-lg-1 col-form-label text-lg-right">密码确认</label>
          <div class="col-lg-3">
            <input class="form-control" [readonly]="viewStep === 'edit'" type="password" formControlName="confirmPassword"
              [formControl]="valForm.get('passwordGroup.confirmPassword')" [(ngModel)]="optr.confirmPassword" />
            <span class="text-danger" *ngIf="valForm.get('passwordGroup.confirmPassword').hasError('equalTo')">登录密码两次输入不一致</span>
          </div>
        </div>
        <div class="row mt-3">
          <label class="col-lg-1 col-form-label text-lg-right">真实姓名</label>
          <div class="col-lg-3">
            <input class="form-control" type="text" formControlName="optr_name" [formControl]="valForm.controls['optr_name']"
              [(ngModel)]="optr.optr_name" />
            <span class="text-danger" *ngIf="valForm.controls['optr_name'].hasError('required') && (valForm.controls['optr_name'].dirty || valForm.controls['optr_name'].touched)">请输入操作员真实姓名</span>
            <span class="text-danger" *ngIf="valForm.controls['optr_name'].hasError('rangewords') && (valForm.controls['optr_name'].dirty ||valForm.controls['optr_name'].touched)">最少需要2个字符，最大允许32个字符</span>
          </div>

          <label class="col-lg-1 col-form-label text-lg-right">所属角色</label>
          <div class="col-lg-3">
            <select class="form-control" type="text" formControlName="optr_role" [formControl]="valForm.controls['optr_role']"
              [(ngModel)]="optr.optr_role">
              <option value="-1">不分配角色</option>
              <option *ngFor="let role of roleArray" [value]="role.role_id">
                {{role.role_name}}
              </option>
            </select>
          </div>

          <label class="col-lg-1 col-form-label text-lg-right">帐号状态</label>
          <div class="col-lg-3">
            <select class="custom-select" formControlName="optr_status" [formControl]="valForm.controls['optr_status']"
              [(ngModel)]="optr.optr_status" frameDict [dictName]="'FrameStatus'" [dictValue]="optr.optr_status" [tipFlag]="false"></select>
            <span class="text-danger" *ngIf="valForm.controls['optr_status'].hasError('required') && (valForm.controls['optr_status'].dirty || valForm.controls['optr_status'].touched)">操作员状态不允许为空</span>
          </div>
        </div>

        <div class="row mt-3">
          <label class="col-lg-1 col-form-label text-lg-right">性别</label>
          <div class="col-lg-3">
            <select class="custom-select" formControlName="optr_sex" [formControl]="valForm.controls['optr_sex']"
              [(ngModel)]="optr.optr_sex" frameDict [dictName]="'StdSexType'" [dictValue]="optr.optr_sex" [tipFlag]="false"></select>
          </div>
          <label class="col-lg-1 col-form-label text-lg-right">个人电话</label>
          <div class="col-lg-3">
            <input class="form-control" type="number" formControlName="optr_mobile" [formControl]="valForm.controls['optr_mobile']"
              [(ngModel)]="optr.optr_mobile" />
          </div>
          <label class="col-lg-1 col-form-label text-lg-right">办公电话</label>
          <div class="col-lg-3">
            <input class="form-control" type="number" formControlName="optr_tel" [formControl]="valForm.controls['optr_tel']"
              [(ngModel)]="optr.optr_tel" />
          </div>
        </div>


        <div class="row mt-3">

          <label class="col-lg-1 col-form-label text-lg-right">机构类型</label>
          <div class="col-lg-3">
            <select class="custom-select" formControlName="dept_type" [formControl]="valForm.controls['dept_type']"
              [(ngModel)]="optr.dept_type" frameDict [dictName]="'OrgType'"  [(dictValue)]="optr.dept_type" [tipFlag]="true"
              (change)="findDept(optr.dept_type)">
            </select>

          </div>

          <label class="col-lg-1 col-form-label text-lg-right">机构名称</label>
          <div class="col-lg-3">
            <!-- 编辑无法将值设置进去，暂时使用原生select -->
            <!-- <flex-select [allowClear]="true" [(items)]="orgArray" [(ngModel)]="optr.optr_dept" optionValueField="id"
              optionTextField="org_name" placeholder="请选择"  width="150"
              noResultsFound="无数据">
            </flex-select> -->
            <select class="custom-select"  formControlName="optr_dept" [formControl]="valForm.controls['optr_dept']"   [(ngModel)]="optr.optr_dept">
              <option value="" >请选择</option>
              <option *ngFor="let item of orgArray" value="{{item.id}}"> {{item.org_name}} </option>
            </select>
            <span class="text-danger" *ngIf="valForm.controls['optr_dept'].hasError('required') && (valForm.controls['optr_dept'].dirty || valForm.controls['optr_dept'].touched)">所属部门不能为空</span>
          </div>

          <label class="col-lg-1 col-form-label text-lg-right">担任职务</label>
          <div class="col-lg-3">
            <input class="form-control" type="text" formControlName="optr_post" [formControl]="valForm.controls['optr_post']"
              [(ngModel)]="optr.optr_post" />
          </div>

        </div>

        <div class="row mt-3">
          <label class="col-lg-1 col-form-label text-lg-right">电子邮件</label>
          <div class="col-lg-3">
            <input class="form-control" type="text" formControlName="optr_email" [formControl]="valForm.controls['optr_email']"
              [(ngModel)]="optr.optr_email" />

            <span class="text-danger" *ngIf="valForm.controls['optr_email'].hasError('email') && (valForm.controls['optr_email'].dirty || valForm.controls['optr_email'].touched)">电子邮件格式错误</span>
          </div>
        </div>

      </form>
      <div class="card-footer mt-2 text-center">
        <button class="btn btn-info" (click)="submitForm(valForm.value)">{{viewStep + ' 操作员'}}</button>&nbsp;&nbsp;&nbsp;
        <button class="btn btn-default" (click)="optr = {};viewStep ='page'">取消操作</button>
      </div>
    </div>
  </div>
</div>