<div class="panel panel-default">
  <div>
    <!--标题-->
    <div class="panel-title">
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item">统计分析</li>
          <li class="breadcrumb-item active" aria-current="page">各场次考点考场数</li>
        </ol>
      </nav>
    </div>
  </div>

  <div class="panel-body ml-sm " [hidden]="editShowType=='only'">
    <!--查询条件
    <div class="row mb-3 ml-1" [hidden]="editShowType=='only'">
      <div class="col-lg-12">
        <form (ngSubmit)="framePager.goSearch()" class="form-inline">
          <div class="input-group mr-1 input-group-sm">
            <label>关键字：</label>
            <input name="query" [(ngModel)]="query.query" class="input-sm form-control" type="text" value="" maxlength="64"
              placeholder="请输入查询关键字">
          </div>
          <button class="btn btn-primary btn-rounded btn-outline btn-sm  mr-1" (click)="framePager.goSearch()">
            <i class="fa fa-search"></i> 查询</button>
        </form>
      </div>
    </div>-->

    <!-- 工具栏 -->
    <div class="row mb-2" [hidden]="editShowType=='only'">
      <div class="col-lg-12">
        <div class="pull-left">
          <button class="btn btn-primary mr-1 btn-sm" data-toggle="tooltip" data-placement="left" (click)="export()"
            title="导出">
            <i class="fa icon-login"></i>导出</button>
        </div>

      </div>
    </div>

    <!--表格-->
    <div class="row" [hidden]="editShowType=='only'">
      <div class="col-sm-12 ml-0">
        <table class="table table-sm table-striped table-hover table-bordered bg-white">
          <thead>
            <tr>
              <th>序号</th>
              <th>第1场次考点名称</th>
              <th>第1场次考场数</th>
              <th>第2场次考点名称</th>
              <th>第2场次考场数</th>
              <th>第3场次考点名称</th>
              <th>第3场次考场数</th>
              <th>第4场次考点名称</th>
              <th>第4场次考场数</th>
              <th>第5场次考点名称</th>
              <th>第5场次考场数</th>
              <th>第6场次考点名称</th>
              <th>第6场次考场数</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let item of temp_roomNum; let i = index">
              <td align="center">{{i+1}}</td>
              <td align="center">{{!A_roomNum[i] ? "" : A_roomNum[i].unit_name}}</td>
              <td align="center">{{!A_roomNum[i] ? "" : A_roomNum[i].room_num}}</td>
              <td align="center">{{!B_roomNum[i] ? "" : B_roomNum[i].unit_name}}</td>
              <td align="center">{{!B_roomNum[i] ? "" : B_roomNum[i].room_num}}</td>
              <td align="center">{{!C_roomNum[i] ? "" : C_roomNum[i].unit_name}}</td>
              <td align="center">{{!C_roomNum[i] ? "" : C_roomNum[i].room_num}}</td>
              <td align="center">{{!D_roomNum[i] ? "" : D_roomNum[i].unit_name}}</td>
              <td align="center">{{!D_roomNum[i] ? "" : D_roomNum[i].room_num}}</td>
              <td align="center">{{!X_roomNum[i] ? "" : X_roomNum[i].unit_name}}</td>
              <td align="center">{{!X_roomNum[i] ? "" : X_roomNum[i].room_num}}</td>
              <td align="center">{{!Y_roomNum[i] ? "" : Y_roomNum[i].unit_name}}</td>
              <td align="center">{{!Y_roomNum[i] ? "" : Y_roomNum[i].room_num}}</td>
        
            </tr>
            <tr *ngIf="total">
              <td></td>
              <td align="center">合计</td>
              <td align="center">{{total.a_num}}</td>
              <td align="center"></td>
              <td align="center">{{total.b_num}}</td>
              <td align="center"></td>
              <td align="center">{{total.c_num}}</td>
              <td align="center"></td>
              <td align="center">{{total.d_num}}</td>
              <td align="center"></td>
              <td align="center">{{total.x_num}}</td>
              <td align="center"></td>
              <td align="center">{{total.y_num}}</td>
            </tr>
          </tbody>
        </table>
       
      </div>
      <!-- 编辑页面 -->
      <div class="col-lg-12" *ngIf="item && editShowType != null &&editShowType!='modal'">
        <ng-container *ngTemplateOutlet="editTemplateModal">
        </ng-container>
      </div>

    </div>
  </div>
  <!-- only编辑页面-->
  <div class="col-lg-12" *ngIf="item && editShowType != null &&editShowType =='only'">
    <ng-container *ngTemplateOutlet="editTemplateModal">
    </ng-container>
  </div>
</div>

<!--编辑界面模板-->
<ng-template #editFormTemplate>
  <form [formGroup]="formModel" *ngIf="item" (ngSubmit)="save()" class="form-validate form-horizontal" novalidate>
    <input type="hidden" formControlName="id" [formControl]="formModel.controls['id']" />

    <div class="row mt-3">
      <label class="col-lg-2 col-form-label text-lg-right">收费代码</label>
      <div class="col-lg-4">
        <input class="form-control" type="text" cols="5" placeholder="请填写收费代码" formControlName="fee_item_code"
          [formControl]="formModel.controls['fee_item_code']" [(ngModel)]="item.fee_item_code" />
        <span class="text-danger"
          *ngIf="formModel.get('fee_item_code').hasError('required') && (formModel.get('fee_item_code').dirty || formModel.get('fee_item_code').touched)">请填写收费代码</span>
        <span class="text-danger"
          *ngIf="formModel.get('fee_item_code').hasError('maxlength') && (formModel.get('fee_item_code').dirty || formModel.get('fee_item_code').touched)">收费代码不能超过3位</span>
        <span class="text-danger"
          *ngIf="formModel.controls['fee_item_code'].hasError('pattern') && (formModel.controls['fee_item_code'].dirty ||formModel.controls['fee_item_code'].touched)">收费代码只能为字符和数字</span>
      </div>

      <label class="col-lg-2 col-form-label text-lg-right">收费名称</label>
      <div class="col-lg-4">
        <input class="form-control" type="text" placeholder="请填写收费名称" formControlName="fee_item_name"
          [formControl]="formModel.controls['fee_item_name']" [(ngModel)]="item.fee_item_name" />
        <span class="text-danger"
          *ngIf="formModel.get('fee_item_name').hasError('required') && (formModel.get('fee_item_name').dirty || formModel.get('fee_item_name').touched)">请填写收费名称</span>
      </div>
    </div>

    <div class="row mt-3">
      <label class="col-lg-2 col-form-label text-lg-right">收费金额</label>
      <div class="col-lg-4">
        <input class="form-control" type="number" cols="5" placeholder="收费金额" formControlName="price"
          [formControl]="formModel.controls['price']" [(ngModel)]="item.price" />
        <span class="text-danger"
          *ngIf="formModel.get('price').hasError('required') && (formModel.get('price').dirty || formModel.get('price').touched)">请填写收费金额</span>
      </div>
    </div>

    <div class="row mt-3">
      <label class="col-lg-2 col-form-label text-lg-right">说明</label>
      <div class="col-lg-10">
        <textarea class="form-control" [(ngModel)]="item.remark" rows="5" formControlName="remark"
          [formControl]="formModel.controls['remark']"></textarea>
      </div>
    </div>

  </form>
</ng-template>


<ng-template #editTemplateModal>
  <div class="modal-content">
    <div class="modal-header info-success-qm">
      <div class="pull-left">
        <em class="fa-lg fas fa-edit "></em> <span *ngIf="item?.id">编辑</span> <span *ngIf="!item?.id">新增</span>
      </div>

      <button type="button" class="close" (click)="hideModal()">×</button>
    </div>

    <div class="modal-body">
      <div [ngTemplateOutlet]="editFormTemplate"></div>

    </div>
    <div class="modal-footer">
      <button class="btn btn-info" (click)="save()">
        <i class="fa fa-info-circle"> </i> 保存
      </button>
      <button class="btn btn-default" (click)="hideModal()">
        <i class="icon-close"> </i> 取消
      </button>
    </div>
  </div>
</ng-template>