<nz-page-header>
  <nz-page-header-title
    >本社教材源文件
    <br />
    <div class="subtitle">
      将本社出版社的教材源文件PDF或数字资源链接提交至申报系统，以供评审使用
    </div>
  </nz-page-header-title>
</nz-page-header>
<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]="count"
    [(nzPageSize)]="limit"
    [nzPageIndex]="pageIndex"
    style="margin: 10px 0"
    [nzLoading]="loading"
    nzSize="middle"
    [nzFrontPagination]="false"
    [nzScroll]="{ x: (maxWidth || '800') + 'px', y: '580px' }"
    nzTableLayout="fixed"
    [nzPageSizeOptions]="[10, 20, 30, 40, 50]"
    nzShowSizeChanger
    (nzPageIndexChange)="pageIndexChange($event)"
    (nzPageSizeChange)="onPageSizeChange()"
  >
    <thead>
      <tr>
        <th nzEllipsis nzWidth="120px" nzLeft>教材名称</th>
        <th nzEllipsis nzWidth="120px">申报编号</th>
        <th nzEllipsis nzWidth="120px">ISBN</th>
        <th nzEllipsis nzWidth="120px">推荐单位</th>
        <th nzEllipsis nzWidth="120px">推荐单位联系人</th>
        <th nzEllipsis nzWidth="80px" nzAlign="center">任务状态</th>
        <th nzEllipsis nzWidth="80px" nzAlign="center" nzRight>操作</th>
      </tr>
    </thead>
    @if (textbookList.length > 0) {
    <tbody>
      @for (data of textbookList; track data.id) {
      <tr>
        <td
          nzEllipsis
          class="activeTd"
          (click)="
            toUrl('/common/textbook/details/' + data?.id)
          "
          nz-popover
          [nzPopoverContent]="contentTemplatetitle"
        >
          {{ data?.get("title") || "-" }}
          <ng-template #contentTemplatetitle>
            <div style="max-width: 400px">
              {{ data?.get("title") || "-" }}
            </div>
          </ng-template>
        </td>
        <td nzEllipsis>
          {{ data?.get("code") ?? "-" }}
        </td>
        <td
          nzEllipsis
          nz-popover
          [nzPopoverContent]="contentTemplateISBN"
          #ISBN
        >
          {{ fromatFiled(data?.get("childrens"), "ISBN") }}
          <ng-template #contentTemplateISBN>
            <div style="max-width: 400px">
              {{ ISBN.innerText }}
            </div>
          </ng-template>
        </td>
        <td nzEllipsis>
          {{ data?.get("department")?.get("name") }}
        </td>
        <td nzEllipsis>
          {{
            data
              ?.get("eduProcess")
              ?.get("profileSubmitted")
              ?.get("user")
              ?.get("name")
          }}
        </td>
        <td nzEllipsis nzAlign="center">
          <span [style.color]="statusMap[data.id].color">{{
            statusMap[data.id].status
          }}</span>
        </td>
        <td nzEllipsis nzRight nzAlign="center">
          @if (statusMap[data.id].btn) {
          <a nz-button nzType="link" (click)="onEditModal(data)">{{
            statusMap[data.id].btn
          }}</a>
          }@else { 
            <a nz-button nzType="link" (click)="onCheckModal(data)">查看</a>
          }
        </td>
      </tr>
      }
    </tbody>
    }
  </nz-table>
  @if (textbookList.length == 0) {
  <nz-empty nzNotFoundImage="/img/group-empty.png"></nz-empty>
  }

  <div class="loading" [hidden]="!showLoading">
    <nz-spin nzSimple [nzSize]="'large'"></nz-spin>
  </div>
</div>

<nz-modal
  [(nzVisible)]="isVisible"
  nzTitle="上传教材源文件"
  (nzOnCancel)="handleCancel()"
  nzWidth="600px"
>
  <ng-container *nzModalContent>
    <div nz-row class="modal-content">
      @if (currentTextbook?.get('type')=='全册') {
      <nz-collapse [nzBordered]="false">
        @for (panel of currentTextbook?.get('childrens'); track panel) { @if
          (panel?.get('editionUnit') == tbookSer.profile.user?.department?.name) {
        <nz-collapse-panel
          #p
          [nzHeader]="title"
          [nzActive]="false"
          nzExpandedIcon="caret-right"
          style="
            background: #f7f7f7;
            border-radius: 4px;
            margin-bottom: 24px;
            border: 0px;
          "
        >
          <ng-template #title>
            <span class="panel-title">{{
              "分册" + ($index + 1) + "-" + currentTextbook?.get("title")
            }}</span>
          </ng-template>
          <div class="">
            <app-upload-collect
              #children
              [eduTextbookVolume]="panel"
            ></app-upload-collect>
          </div>
          <ng-template #expandedIcon let-active>
            {{ active }}
            <span
              nz-icon
              nzType="caret-right"
              class="ant-collapse-arrow"
              [nzRotate]="p.nzActive ? 90 : -90"
            ></span>
          </ng-template>
        </nz-collapse-panel>
        } }
      </nz-collapse>
      } @else {
      <app-upload-collect
        #children
        [eduTextbookVolume]="currentTextbook?.get('childrens')[0]"
      ></app-upload-collect>
      }
    </div>
  </ng-container>
  <div *nzModalFooter>
    <button nz-button nzType="default" [disabled]="btnLoading" (click)="handleCancel()">取消</button>
    <button nz-button nzType="default" [nzLoading]="btnLoading" (click)="saveCollect('sbmit')">
      提交
    </button>
    <button
      nz-button
      nzType="primary"
      [disabled]="false"
      (click)="saveCollect('save')"
      [nzLoading]="btnLoading"
    >
      保存
    </button>
  </div>
</nz-modal>
<!-- 查看预览 -->
<nz-modal
  [(nzVisible)]="isVisiblePreview"
  nzTitle="查看文件"
  (nzOnCancel)="handleCancel()"
  nzWidth="600px"
>
  <ng-container *nzModalContent>
    <div nz-row class="modal-content">
      @if (currentTextbook?.get('type')=='全册') {
      <nz-collapse [nzBordered]="false">
        @for (panel of currentTextbook?.get('childrens'); track panel) { @if
          (panel?.get('editionUnit') == tbookSer.profile.user?.department?.name) {
        <nz-collapse-panel
          #p
          [nzHeader]="title"
          [nzActive]="false"
          nzExpandedIcon="caret-right"
          style="
            background: #f7f7f7;
            border-radius: 4px;
            margin-bottom: 24px;
            border: 0px;
          "
        >
          <ng-template #title>
            <span class="panel-title">{{
              "分册" + ($index + 1) + "-" + currentTextbook?.get("title")
            }}</span>
          </ng-template>
          <div class="">
            <app-upload-collect
              #children
              [eduTextbookVolume]="panel"
              [review]="true"
            ></app-upload-collect>
          </div>
          <ng-template #expandedIcon let-active>
            {{ active }}
            <span
              nz-icon
              nzType="caret-right"
              class="ant-collapse-arrow"
              [nzRotate]="p.nzActive ? 90 : -90"
            ></span>
          </ng-template>
        </nz-collapse-panel>
        } }
      </nz-collapse>
      } @else {
      <app-upload-collect
        #children
        [eduTextbookVolume]="currentTextbook?.get('childrens')[0]"
        [review]="true"
      ></app-upload-collect>
      }
    </div>
  </ng-container>
  <div *nzModalFooter>
    <button nz-button nzType="default" (click)="handleCancel()">关闭</button>
  </div>
</nz-modal>