<div class="textbook-table">
  <div class="tool">
     <div class="search">
        <nz-input-group style="width: 280px" [nzPrefix]="prefixTemplateUser">
          <input
            type="text"
            nz-input
            placeholder="输入教材名称 / ISBN / 作者名搜索"
            [(ngModel)]="searchValue"
            (ngModelChange)="onSearch($event)"
          />
        </nz-input-group>
        <ng-template #prefixTemplateUser
          ><span nz-icon nzType="search"></span
        ></ng-template>
      </div>
  </div>
  <nz-table
    #tableData
    [nzData]="textbookList"
    [nzTotal]="textbookList.length"
    [nzPageSize]="10"
    style="margin: 10px 0"
    [nzLoading]="loading"
    nzSize="middle"
    [nzNoResult]="emptyResult"
    nzTableLayout="fixed"
  >
    <thead>
      <tr>
        <th
          nzWidth="50px"
          nzLeft
          [nzChecked]="checkedAll"
          [nzIndeterminate]="false"
          nzLabel="Select all"
          (nzCheckedChange)="onAllChecked($event)"
        ></th>
        <th nzEllipsis nzWidth="50px" nzLeft>申报编号</th>
        <th nzEllipsis nzWidth="120px">教材名称</th>
        <th nzEllipsis nzWidth="50px">册数</th>
        <th nzEllipsis nzWidth="80px">第一主编/作者</th>
        <th nzEllipsis nzWidth="120px">所属本科专业</th>
        <th nzEllipsis nzWidth="80px">主要语种类型</th>
        <th nzEllipsis nzWidth="50px" nzRight>操作</th>
      </tr>
    </thead>
    <tbody>
      @for (data of textbookList; track data.id) {
      <tr>
        <td nzEllipsis
          nzLeft
          [nzChecked]="setOfCheckedId.has(data.id)"
          (nzCheckedChange)="onItemChecked(data.id, $event)"
        ></td>
        <td nzEllipsis
          nzLeft
          nzEllipsis
          class="activeTd"
        >
          {{ data?.get('ISBN') || "-" }}
        </td>
        <td nzEllipsis>
          {{ data?.get('title') || "-" }}
        </td>
        <td nzEllipsis>
          {{ data?.get('type') == '单册' ? '单册' : data?.get('typeNumber') || "-"  }}
        </td>
        <td nzEllipsis>
          {{ data?.get('author') || "-" }}
        </td>
        <td nzEllipsis>
          {{ data?.get('major').name || "-" }}
        </td>
        <td nzEllipsis>
          {{ data?.get('lang') || "-" }}
        </td>
        <td nzEllipsis nzRight>
          <button
            nz-button
            nz-dropdown
            [nzDropdownMenu]="menu"
            [nzPlacement]="'bottomLeft'"
          >
            <span nz-icon nzType="ellipsis" nzTheme="outline"></span>
          </button>
          <nz-dropdown-menu #menu="nzDropdownMenu">
            <ul nz-menu>
              <li nz-menu-item>
                <button
                  nz-button
                  nzType="link"
                  style="color: #231c1f"
                >
                  <span
                    nz-icon
                    nzType="caret-right"
                    nzTheme="outline"
                  ></span
                  >退回教材
                </button>
              </li>
            </ul>
          </nz-dropdown-menu>
        </td>
      </tr>
      }
    </tbody>
  </nz-table>
  <ng-template #emptyResult>
    <nz-empty nzNotFoundImage="/img/group-empty.png"></nz-empty>
  </ng-template>
</div>
<!-- 全选操作：批量操作 -->
@if (setOfCheckedId.size) {
  <div class="batch-toolbar-modal">
    <div class="batch-toolbar">
      <div class="styles_counter__18S08">
        <span>已选</span>
        <span class="styles_num__178Wa">{{ setOfCheckedId.size }}</span>
      </div>
      <div class="batch-toolbar-actions">
        <div class="ant-space ant-space-horizontal ant-space-align-center">
          <div class="ant-space-item" style="margin-right: 16px">
            <button nz-button nzType="text" (click)="deleteSelected()">
              <span nz-icon nzType="delete"></span>
              删除
            </button>
          </div>
        </div>
      </div>
      <div class="styles_cancel__AARoT">
        <button nz-button nzType="text" (click)="onAllChecked(false)">
          取消选中
        </button>
      </div>
    </div>
  </div>
  
}
