<div class="list-template">
  <div class="list-template__content">
    <div class="list-template__top" nz-row>
      <div nz-col nzLg='18' class="list-template__searchBox">
        <div class="list-template__searchItem searchItem-100">
          <span class="label">发药时间区间：</span>
          <nz-range-picker [(ngModel)]="dateRange" nzFormat="yyyy-MM-dd HH:mm:ss"
					(ngModelChange)="changeDate($event)"></nz-range-picker>
        </div>
				<div class="list-template__searchItem">
				  <span class="label">科室名称：</span>
				  <nz-select class="formItem" [nzDropdownMatchSelectWidth]="false" (nzOnSearch)="changeInp($event,'dept')" nzServerSearch nzShowSearch nzAllowClear nzPlaceHolder="请选择申请科室" [(ngModel)]="department">
				    <ng-container *ngFor="let option of hospitals1">
				      <nz-option *ngIf="!loading" [nzLabel]="option.dept" [nzValue]="option.id"></nz-option>
				    </ng-container>
				    <nz-option *ngIf="loading" 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 class="formItem" [nzDropdownMatchSelectWidth]="false" (nzOnSearch)="changeInp($event,'commodity')" nzServerSearch nzShowSearch nzAllowClear nzPlaceHolder="请选择商品名称" [(ngModel)]="commodity">
					  <ng-container *ngFor="let option of commodityData">
					    <nz-option *ngIf="!loading" [nzLabel]="option.drugName + '('+option.specs+')'" [nzValue]="option.id"></nz-option>
					  </ng-container>
					  <nz-option *ngIf="loading" 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 class="formItem" [nzDropdownMatchSelectWidth]="false" (nzOnSearch)="changeInp($event,'batch')" nzServerSearch nzShowSearch nzAllowClear nzPlaceHolder="请选择批次号" [(ngModel)]="batch">
					  <ng-container *ngFor="let option of batchData">
					    <nz-option *ngIf="!loading" [nzLabel]="option.batchNo" [nzValue]="option.id"></nz-option>
					  </ng-container>
					  <nz-option *ngIf="loading" nzDisabled nzCustomContent>
					    <i nz-icon nzType="loading" class="loading-icon"></i> 搜索中...
					  </nz-option>
					</nz-select>
				</div> -->
      </div>
      <div nz-col nzLg="6" class="list-template__btns">
        <button class="btn default" (click)='search()'>搜索</button>
        <button class="btn default ml8" (click)='reset()'>重置</button>
				<button *ngIf="coopBtns.export" class="btn default ml8" (click)='excelExport()'>导出</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>科室名称</th>
						<th>药品名称</th>
            <th>开始库存</th>
            <th>实消</th>
            <th>增发</th>
            <th>实发</th>
            <th>终止库存</th>
						<th>操作</th>
          </tr>
        </thead>
        <tbody v-if="listOfData && listOfData.length>0">
          <tr *ngFor="let data of listOfData">
            <td>{{ data['2'] }}</td>
						<td>{{ data['3'] }} {{data['4']}}</td>
						<td>{{ data['5']}}</td>
						<td>{{ data['6']}}</td>
            <td>{{ data['7']}}</td>
            <td>{{ data['8']}}</td>
            <td>{{ data['9']}}</td>
						<td>
						  <div class="coop">
						    <span *ngIf="coopBtns.look" (click)="detail(data['0'],data['1'])">发药详情</span>
						  </div>
						</td>
          </tr>
        </tbody>
      </nz-table>
      <div class="list-template__pagination">
        <nz-pagination [(nzPageIndex)]="pageIndex" [(nzTotal)]="listLength" nzShowSizeChanger [(nzPageSize)]="pageSize"
          (nzPageIndexChange)="getList()" (nzPageSizeChange)="getList()">
        </nz-pagination>
      </div>
    </div>
  </div>

  <!-- 新增/编辑模态框 -->
  <div class="save add display_flex align-items_center justify-content_flex-center" *ngIf="modal">
    <div class="modalBody">
      <div class="title">发药详情<i class="icon_transport transport-guanbi" (click)="hideModal()"></i>
      </div>
      <overlay-scrollbars #osComponentRef1 class="content">
        <div class="list-template__bottom">
          <nz-table class="list-template__nzTable" [nzData]="viewData" nzSize="middle" [nzShowPagination]="false"
            [nzLoading]="detailsLoading">
            <thead>
              <tr class="thead">
                <th>批次号|科室</th>
              	<th>商品名称|规格</th>
                <th>消耗量+增发+原库存=实发量</th>
                <th>包装规格</th>
                <th>发药箱数</th>
                <th>新库存</th>
                <th>发药日期</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let data of viewData">
								<td>
									<div>{{ data['0'] }}</div>
									<div>{{ data['1'] }}</div>
								</td>
								<td>
									<div>{{ data['2']}}</div>
									<div>{{ data['3']}}</div>
								</td>
								<td>{{ data['4']}} + {{data['5']}} +
								 {{data['6'] }} = {{data.num}}</td>
								 
								<td>{{ data['7']}}</td>
								<td>{{ data['8']==0 ? '-' : data['8']}}</td>
								<td>{{ data['9']}}</td>
								<td>{{ data['10']}}</td>
              </tr>
            </tbody>
          </nz-table>
					<div class="list-template__pagination">
					  <nz-pagination [(nzPageIndex)]="pageDetailIndex" [(nzTotal)]="listDetailLength" nzShowSizeChanger [(nzPageSize)]="pageSize"
					    (nzPageIndexChange)="detailList()" (nzPageSizeChange)="detailList()">
					  </nz-pagination>
					</div>
        </div>
      </overlay-scrollbars>
      <div class="display_flex justify-content_flex-center">
        <button class="btn" nz-button nzType="primary" (click)="hideModal()">知道了</button>
      </div>
    </div>
  </div>

  <!-- 打印 -->
  <div id="report" style="display: none;">
		<div class="monad" 
				*ngIf="rowData"
				style="padding: 10px;
				border: 1px solid #e7e7e7;
				border-radius: 5px;">
			<div class="monad-title" 
				style="text-align: center;
				font-size: 18px;
				border-bottom: 1px solid #e7e7e7;
				padding-bottom: 10px;">
				大输液发药单-{{rowData.applyDeptDTO?rowData.applyDeptDTO.dept:''}}
			</div>
			<div class="monad-sign" style="display: flex;line-height: 23px;font-size: 14px;">
				<div style="margin-right: 15px;">日期：{{rowData.createTime|date:'yyyy-MM-dd HH:mm'}}</div>
				<div style="margin-right: 15px;">批次号：{{rowData.batch?rowData.batch.batchNo:'-'}}</div>
				<div style="margin-right: 15px;">单号：{{rowData.packingNo}}</div>
			</div>
			<div class="monad-sign" style="display: flex;line-height: 23px;font-size: 14px;">
				<div style="margin-right: 15px;">取药药房：{{rowData.pharmacyDTO?rowData.pharmacyDTO.dept:'-'}}</div>
			</div>
			<div style="border: 1px solid #e7e7e7;border-bottom: none;font-size: 14px;">
				<div class="thead" style="display: flex;">
					<div style="width: 40%;display: flex;font-size: 12px;
					align-items: center;
					justify-content: center;
					flex-wrap: wrap;
					border-right: 1px solid #e7e7e7;
					border-bottom: 1px solid #e7e7e7;">药品名称</div>
					
					<div style="width: 20%;display: flex;font-size: 12px;
					align-items: center;
					justify-content: center;
					flex-wrap: wrap;
					border-right: 1px solid #e7e7e7;
					border-bottom: 1px solid #e7e7e7;">规格</div>
					
					<div style="width: 10%;display: flex;font-size: 12px;
					align-items: center;
					justify-content: center;
					flex-wrap: wrap;
					border-right: 1px solid #e7e7e7;
					border-bottom: 1px solid #e7e7e7;">15日消耗</div>
					
					<div style="width: 8%;display: flex;font-size: 12px;
					align-items: center;
					justify-content: center;
					flex-wrap: wrap;
					border-right: 1px solid #e7e7e7;
					border-bottom: 1px solid #e7e7e7;">包规</div>
					
					<div style="width: 8%;display: flex;font-size: 12px;
					align-items: center;
					justify-content: center;
					flex-wrap: wrap;
					border-right: 1px solid #e7e7e7;
					border-bottom: 1px solid #e7e7e7;">实消</div>
					
					<div style="width: 10%;display: flex;font-size: 12px;
					align-items: center;
					justify-content: center;
					flex-wrap: wrap;
					border-right: 1px solid #e7e7e7;
					border-bottom: 1px solid #e7e7e7;">临时增发</div>
					
					<div style="width: 10%;display: flex;font-size: 12px;
					align-items: center;
					justify-content: center;
					flex-wrap: wrap;
					border-bottom: 1px solid #e7e7e7;">箱数</div>
				</div>
				<div *ngFor="let data of codes" style="display: flex;">
					<div style="width: 40%;display: flex;font-size: 12px;
					align-items: center;
					justify-content: center;
					flex-wrap: wrap;
					border-right: 1px solid #e7e7e7;
					border-bottom: 1px solid #e7e7e7;">{{ data.drugsInfoDTO.drugName }}</div>
					
					<div style="width: 20%;display: flex;font-size: 12px;
					align-items: center;
					justify-content: center;
					flex-wrap: wrap;
					border-right: 1px solid #e7e7e7;
					border-bottom: 1px solid #e7e7e7;">{{ data.drugsInfoDTO.specs }}</div>
					
					<div style="width: 10%;display: flex;font-size: 12px;
					align-items: center;
					justify-content: center;
					flex-wrap: wrap;
					border-right: 1px solid #e7e7e7;
					border-bottom: 1px solid #e7e7e7;">15日消耗</div>
					
					<div style="width: 8%;display: flex;font-size: 12px;
					align-items: center;
					justify-content: center;
					flex-wrap: wrap;
					border-right: 1px solid #e7e7e7;
					border-bottom: 1px solid #e7e7e7;">{{ data.drugsInfoDTO.packingSpecs }}</div>
					
					<div style="width: 8%;display: flex;font-size: 12px;
					align-items: center;
					justify-content: center;
					flex-wrap: wrap;
					border-right: 1px solid #e7e7e7;
					border-bottom: 1px solid #e7e7e7;">{{ data.expendCount }}</div>
					
					<div style="width: 10%;display: flex;font-size: 12px;
					align-items: center;
					justify-content: center;
					flex-wrap: wrap;
					border-right: 1px solid #e7e7e7;
					border-bottom: 1px solid #e7e7e7;">{{ data.addSub || 0 }}</div>
					
					<div style="width: 10%;display: flex;font-size: 12px;
					align-items: center;
					justify-content: center;
					flex-wrap: wrap;
					border-bottom: 1px solid #e7e7e7;">
						<span *ngIf="data.drugsInfoDTO.drugName!='合计'">
							{{ data.cartonNum }} {{data.giveOutType && data.giveOutType.value==1?
							data.drugsInfoDTO.unit:'箱'}}
						</span>
					</div>
					
				</div>
			</div>
		</div>
		
		<div class="monad"
				style="padding: 10px;
				border: 1px solid #e7e7e7;
				border-radius: 5px;margin-bottom: 40px;">
			<div class="monad-title" 
				style="text-align: center;
				font-size: 18px;
				border-bottom: 1px solid #e7e7e7;
				padding-bottom: 10px;">
				大输液批次消耗汇总单
			</div>
			<div class="monad-sign" style="display: flex;line-height: 23px;font-size: 14px;">
				<div style="margin-right: 15px;">日期：666</div>
				<div style="margin-right: 15px;">批次号：777</div>
			</div>
			<div style="border: 1px solid #e7e7e7;border-bottom: none;font-size: 14px;">
				<div class="thead" style="display: flex;">
					<div style="width: 40%;display: flex;font-size: 12px;
					align-items: center;
					justify-content: center;
					flex-wrap: wrap;
					border-right: 1px solid #e7e7e7;
					border-bottom: 1px solid #e7e7e7;">药品名称</div>
					
					<div style="width: 20%;display: flex;font-size: 12px;
					align-items: center;
					justify-content: center;
					flex-wrap: wrap;
					border-right: 1px solid #e7e7e7;
					border-bottom: 1px solid #e7e7e7;">药品规格</div>
					
					<div style="width: 13%;display: flex;font-size: 12px;
					align-items: center;
					justify-content: center;
					flex-wrap: wrap;
					border-right: 1px solid #e7e7e7;
					border-bottom: 1px solid #e7e7e7;">包装规格</div>
					
					<div style="width: 13%;display: flex;font-size: 12px;
					align-items: center;
					justify-content: center;
					flex-wrap: wrap;
					border-right: 1px solid #e7e7e7;
					border-bottom: 1px solid #e7e7e7;">发药总量</div>
		
					<div style="width: 14%;display: flex;font-size: 12px;
					align-items: center;
					justify-content: center;
					flex-wrap: wrap;
					border-bottom: 1px solid #e7e7e7;">箱数合计</div>
					
				</div>
				<div style="display: flex;">
					<div style="width: 40%;display: flex;font-size: 12px;
					align-items: center;
					justify-content: center;
					flex-wrap: wrap;
					border-right: 1px solid #e7e7e7;
					border-bottom: 1px solid #e7e7e7;">葡萄胎</div>
					
					<div style="width: 20%;display: flex;font-size: 12px;
					align-items: center;
					justify-content: center;
					flex-wrap: wrap;
					border-right: 1px solid #e7e7e7;
					border-bottom: 1px solid #e7e7e7;">100ml*1</div>
					
					<div style="width: 13%;display: flex;font-size: 12px;
					align-items: center;
					justify-content: center;
					flex-wrap: wrap;
					border-right: 1px solid #e7e7e7;
					border-bottom: 1px solid #e7e7e7;">100</div>
					
					<div style="width: 13%;display: flex;font-size: 12px;
					align-items: center;
					justify-content: center;
					flex-wrap: wrap;
					border-right: 1px solid #e7e7e7;
					border-bottom: 1px solid #e7e7e7;">200</div>
					
					
					<div style="width: 14%;display: flex;font-size: 12px;
					align-items: center;
					justify-content: center;
					flex-wrap: wrap;
					border-bottom: 1px solid #e7e7e7;">
					<span>
						20箱
					</span>
					</div>
					
				</div>
			</div>
		</div>
  </div>

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

<!-- 查看详情 -->
<router-outlet></router-outlet>
<!-- 遮罩 -->
<app-mask *ngIf="maskFlag"></app-mask>
