<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" nzPlaceHolder="请选择院区" [(ngModel)]="searchCriteria.hosId" (ngModelChange)="changeHospitalSearch($event)">
            <ng-container *ngFor="let option of hospitalSearchList">
              <nz-option *ngIf="!isLoading" [nzLabel]="option.hosName" [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>
          <input nz-input class="formItem" placeholder="请输入患者姓名" [(ngModel)]="searchCriteria.patientName" />
        </div>
        <div class="list-template__searchItem">
          <span class="label">当前科室：</span>
          <nz-select [nzDropdownMatchSelectWidth]="false" class="formItem" nzServerSearch nzShowSearch nzAllowClear nzPlaceHolder="请选择当前科室" [(ngModel)]="searchCriteria.department" (nzOnSearch)="changeInp($event, 'departmentSearch')" (nzOpenChange)="openDepartmentSearch($event)">
            <ng-container *ngFor="let data of deptSearchList">
              <nz-option *ngIf="!isLoading" [nzLabel]="data.dept" [nzValue]="data.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 [nzDropdownMatchSelectWidth]="false" class="formItem" nzAllowClear nzPlaceHolder="请选择患者类别" [(ngModel)]="searchCriteria.patientType">
            <ng-container *ngFor="let data of patientTypeList">
              <nz-option *ngIf="!isLoading" [nzLabel]="data.name" [nzValue]="data.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 [nzDropdownMatchSelectWidth]="false" class="formItem" nzAllowClear nzPlaceHolder="请选择护理等级" [(ngModel)]="searchCriteria.careLevel">
            <ng-container *ngFor="let data of careLevelList">
              <nz-option *ngIf="!isLoading" [nzLabel]="data.name" [nzValue]="data.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 [nzDropdownMatchSelectWidth]="false" class="formItem" nzAllowClear nzPlaceHolder="请选择病情级别" [(ngModel)]="searchCriteria.illnessState">
            <ng-container *ngFor="let data of illnessStateList">
              <nz-option *ngIf="!isLoading" [nzLabel]="data.name" [nzValue]="data.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>
      <div nz-col nzXl="8" class="list-template__btns">
        <button nz-button class="btn default" (click)='reset()'>重置</button>
        <button nz-button class="btn default ml8" (click)='getList(1)'>搜索</button>
        <button nz-button *ngIf="coopBtns.add" class="btn ml8 default" (click)="showModal()">新增</button>
      </div>
    </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="8%">患者类别</th>
            <th nzWidth="15%">患者姓名(床号)|联系电话</th>
            <th nzWidth="10%">患者标识</th>
            <th nzWidth="10%">住院号|条码号</th>
            <th nzWidth="11%">院区|当前科室</th>
            <th nzWidth="12%">护理等级|病情级别</th>
            <!-- <th nzWidth="8%">病情级别</th> -->
            <th nzWidth="8%">性别、年龄</th>
            <th nzWidth="12%">陪检方式|注意事项</th>
            <th nzWidth="14%">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let data of listOfData;let i = index">
            <td>{{ data.patientType?.name }}</td>
            <td>{{ data.patientName }}({{ data.bedNum }})<br>{{data.patientPhone}}</td>
            <td>{{ data.patientCode }}</td>
            <td>{{ data.residenceNo }}<br>{{ data.barCode }}</td>
            <td>{{ data.hospitalDTO?.hosName }}<br>{{ data.department?.dept }}</td>
            <td>{{ data.careLevel?.name }}<br>{{ data.illnessState?.name }}</td>
            <td>{{ data.gender?.name }}、{{ data.age }}</td>
            <td>{{ data.tripTypeDTO?.inspectMode }}<br>{{ data.remark }}</td>
            <td>
              <div class="coop">
                <span *ngIf="coopBtns.edit" (click)="edit(data)">编辑</span>
                <span *ngIf="coopBtns.removeSign" (click)="showDelModal(data, '您确认要清空标记吗？','清空标记','clearSign')">清空标记</span>
                <span *ngIf="coopBtns.lookLog" (click)="showLogs(data)">查看日志</span>
              </div>
            </td>
          </tr>
        </tbody>
      </nz-table>
      <div class="list-template__pagination">
        <nz-pagination [(nzPageIndex)]="pageIndex" [(nzTotal)]="listLength" [(nzPageSize)]="pageSize"
          (nzPageIndexChange)="getList(0)" (nzPageSizeChange)="getList(0)">
        </nz-pagination>
      </div>
    </div>
  </div>
</div>

<!-- 新增/编辑模态框 -->
<div class="save add display_flex align-items_center justify-content_flex-center" *ngIf="modal" (click)="clickExtra($event)">
  <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="patientName">患者姓名</nz-form-label>
          <nz-form-control nzErrorTip="请填写患者姓名!">
            <nz-input-group>
              <input type="text" nz-input formControlName="patientName" placeholder="请填写患者姓名" />
            </nz-input-group>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label style="line-height:40px;" [nzSm]="3" [nzXs]="24" 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 genderList">{{data.name}}</label>
            </nz-radio-group>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="age">年龄</nz-form-label>
          <nz-form-control nzErrorTip="请填写年龄!">
            <nz-input-group>
              <nz-input-number class="w100" formControlName="age" placeholder="请填写年龄" [nzMin]="0" [nzStep]="1" [nzPrecision]="0"></nz-input-number>
            </nz-input-group>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="patientCode">患者标识</nz-form-label>
          <nz-form-control nzErrorTip="请填写患者标识!">
            <nz-input-group>
              <input type="text" nz-input formControlName="patientCode" placeholder="请填写患者标识" />
            </nz-input-group>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="residenceNo">住院号</nz-form-label>
          <nz-form-control nzErrorTip="请填写住院号!">
            <nz-input-group>
              <input type="text" nz-input formControlName="residenceNo" placeholder="请填写住院号" />
            </nz-input-group>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="barCode">条码号</nz-form-label>
          <nz-form-control nzErrorTip="请填写条码号!">
            <nz-input-group>
              <input type="text" nz-input formControlName="barCode" placeholder="请填写条码号" />
            </nz-input-group>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="bedNum">床号</nz-form-label>
          <nz-form-control nzErrorTip="请填写床号!">
            <nz-input-group>
              <input type="text" nz-input formControlName="bedNum" placeholder="请填写床号" />
            </nz-input-group>
          </nz-form-control>
        </nz-form-item>
				<nz-form-item>
				  <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="patientPhone">联系电话</nz-form-label>
				  <nz-form-control nzErrorTip="请填写联系电话!">
				    <nz-input-group>
				      <input type="text" nz-input formControlName="patientPhone" placeholder="请填写联系电话" />
				    </nz-input-group>
				  </nz-form-control>
				</nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="hosId">院区</nz-form-label>
          <nz-form-control nzErrorTip="请选择院区!">
            <nz-select class="formItem" [nzDropdownMatchSelectWidth]="false" nzPlaceHolder="请选择院区" formControlName="hosId" (ngModelChange)="changeHospital($event)">
            <ng-container *ngFor="let option of hospitalList">
              <nz-option *ngIf="!isLoading" [nzLabel]="option.hosName" [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="department">当前科室</nz-form-label>
          <nz-form-control nzErrorTip="请选择当前科室!">
            <nz-select [nzDropdownMatchSelectWidth]="false" formControlName="department" nzShowSearch nzAllowClear nzPlaceHolder="请选择当前科室" nzServerSearch (nzOnSearch)="changeInp($event, 'department')" (nzOpenChange)="openDepartment($event)">
              <ng-container *ngFor="let data of deptList">
                <nz-option *ngIf="!isLoading" [nzLabel]="data.dept" [nzValue]="data.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="careLevel">护理等级</nz-form-label>
          <nz-form-control nzErrorTip="请选择护理等级!">
            <nz-select [nzDropdownMatchSelectWidth]="false" formControlName="careLevel" nzAllowClear nzPlaceHolder="请选择护理等级">
              <ng-container *ngFor="let data of careLevelList">
                <nz-option *ngIf="!isLoading" [nzLabel]="data.name" [nzValue]="data.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="illnessState">病情级别</nz-form-label>
          <nz-form-control nzErrorTip="请选择病情级别!">
            <nz-select [nzDropdownMatchSelectWidth]="false" formControlName="illnessState" nzAllowClear nzPlaceHolder="请选择病情级别">
              <ng-container *ngFor="let data of illnessStateList">
                <nz-option *ngIf="!isLoading" [nzLabel]="data.name" [nzValue]="data.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="patientType">患者类别</nz-form-label>
          <nz-form-control nzErrorTip="请选择患者类别!">
            <nz-select [nzDropdownMatchSelectWidth]="false" formControlName="patientType" nzAllowClear nzPlaceHolder="请选择患者类别">
              <ng-container *ngFor="let data of patientTypeList">
                <nz-option *ngIf="!isLoading" [nzLabel]="data.name" [nzValue]="data.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="tripType">陪检方式</nz-form-label>
          <nz-form-control nzErrorTip="请选择陪检方式!">
            <nz-select [nzDropdownMatchSelectWidth]="false" formControlName="tripType" nzAllowClear nzPlaceHolder="请选择陪检方式" (nzOpenChange)="openTripType($event)">
              <ng-container *ngFor="let data of tripTypeList">
                <nz-option *ngIf="!isLoading" [nzLabel]="data.inspectMode" [nzValue]="data.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="remark">注意事项</nz-form-label>
          <nz-form-control nzErrorTip="请选择注意事项!">
            <div class="noteSign">
              <textarea formControlName="remark" class="noteFocus mt8" id="noteFocus" (focus)="focusNote()" nz-input rows="5" placeholder="请填写注意事项" #remarkEle></textarea>
              <div class="noteList" id="noteList" *ngIf="isShowNoteList">
                <ng-container *ngIf="!noteLoading && noteList.length">
                  <div class="noteItem ellipsis-oneline" *ngFor="let item of noteList" [title]="item.name" (click)="selectNote(item.name)">{{item.name}}</div>
                </ng-container>
                <div *ngIf="!noteLoading && !noteList.length" class="w100 h100 padding8 display_flex justify-content_flex-center align-items_center">
                  <nz-empty></nz-empty>
                </div>
                <div *ngIf="noteLoading" class="w100 h100 padding8 display_flex justify-content_flex-center align-items_center">
                  <nz-spin nzSimple></nz-spin>
                </div>
              </div>
            </div>
          </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"
(confirmDelEvent)="confirmDel()" [content]="tipsMsg1"></app-dialog-delete>

<!-- 操作成功/失败提示框 -->
<app-prompt-modal *ngIf="promptModalShow" [content]="promptContent" [success]="ifSuccess" [show]="promptModalShow"
  [info]="promptInfo"></app-prompt-modal>

<!-- 查看日志 -->
<app-patient-log-prompt-modal *ngIf="logPromptModalShow" [show]="logPromptModalShow" [id]="patientId" (closeModelHs)="closeModelLog($event)"></app-patient-log-prompt-modal>
