<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 class="sbt" (click)="export()">导出评审明细</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($event)"
  >
    <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>
        @if (!eduProcess?.id) {
          <th nzEllipsis nzWidth="120px">申报部门</th>
        }
        <th nzEllipsis nzWidth="80px" nzAlign="center">文件状态</th>
        <th nzEllipsis nzWidth="100px" 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
          nz-popover
          [nzPopoverContent]="contentTemplateeditionUnit"
          #editionUnit
        >
          {{ fromatFiled(data?.get("childrens"), "editionUnit") }}
          <ng-template #contentTemplateeditionUnit>
            <div style="max-width: 400px">
              {{ editionUnit.innerText }}
            </div>
          </ng-template>
        </td>

        <td
          nzEllipsis
          nz-popover
          [nzPopoverContent]="contentTemplateChild"
          #childrens
        >
          @for (n of formatMapProfile(data?.get('childrens')); track n) {
          {{ n }}
          }
          <ng-template #contentTemplateChild>
            <div style="max-width: 400px">
              {{ childrens.innerText }}
            </div>
          </ng-template>
        </td>
        @if (!eduProcess?.id) {
          <td nzEllipsis>{{data?.get('department')?.get('name')}}</td>
        }
        <td nzEllipsis nzAlign="center">
          <span [style.color]="statusMap[data.id].color">{{
            statusMap[data.id].status
          }}</span>
        </td>
        <td nzEllipsis nzRight nzAlign="left">
          @if (statusMap[data.id].btn == '查看') {
          <a nz-button nzType="link" (click)="onReview(data)">查看</a>
          <a nz-button nzType="link" style="color:#c6233f;" (click)="onReject(data)">退回</a>
          }@else {
          <a nz-button nzType="link" (click)="onEmitMsg(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)]="showModal"
  nzTitle="收集教材源文件"
  (nzOnCancel)="handleCancel()"
  nzWidth="600px"
>
  <ng-container *nzModalContent>
    <div nz-row class="depart-modal">
      <div nz-col nzSpan="24">
        <div class="row">
          <div class="label">
            开始时间 <span style="color: #e8353e">*</span>
          </div>
          <div class="value">
            <nz-date-picker
              nzFormat="yyyy-MM-dd HH:mm:ss"
              [(ngModel)]="collectStartData"
              [nzShowTime]="{ nzDefaultOpenValue: timeDefaultValue }"
            ></nz-date-picker>
          </div>
        </div>
        <div class="row">
          <div class="label">
            截止时间 <span style="color: #e8353e">*</span>
          </div>
          <div class="value">
            <nz-date-picker
              nzFormat="yyyy-MM-dd HH:mm:ss"
              [(ngModel)]="collectEndData"
              [nzStatus]="collectEndData < collectStartData ? 'error' : ''"
              [nzShowTime]="{ nzDefaultOpenValue: timeDefaultValue }"
            ></nz-date-picker>
          </div>
        </div>
        <div class="row" style="align-items: start">
          <div class="label">收集教材</div>
          <div class="value">
            <nz-table
              #tableData
              [nzData]="textbookList"
              [nzTotal]="count"
              [(nzPageSize)]="limit"
              [nzPageIndex]="pageIndex"
              [nzLoading]="loading"
              nzSize="middle"
              [nzFrontPagination]="false"
              [nzScroll]="{ x: (maxWidth || '400') + 'px', y: '580px' }"
              nzTableLayout="fixed"
              [nzPageSizeOptions]="[10, 20, 30, 40, 50]"
              nzShowSizeChanger
              (nzPageIndexChange)="pageIndexChange($event)"
              (nzPageSizeChange)="onPageSizeChange($event)"
              nzBordered
            >
              <thead>
                <tr>
                  <th nzEllipsis nzWidth="120px" nzLeft>教材名称</th>
                  <th nzEllipsis nzWidth="120px">申报编号</th>
                  <th nzEllipsis nzWidth="80px">ISBN</th>
                  <th nzEllipsis nzWidth="120px">出版单位</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
                    nz-popover
                    [nzPopoverContent]="contentTemplateeditionUnit"
                    #editionUnit
                  >
                    {{ fromatFiled(data?.get("childrens"), "editionUnit") }}
                    <ng-template #contentTemplateeditionUnit>
                      <div style="max-width: 400px">
                        {{ editionUnit.innerText }}
                      </div>
                    </ng-template>
                  </td>
                </tr>
                }
              </tbody>
              }
            </nz-table>
            @if (textbookList.length == 0) {
            <nz-empty nzNotFoundImage="/img/group-empty.png"></nz-empty>
            }
          </div>
        </div>
      </div>
    </div>
  </ng-container>
  <div *nzModalFooter>
    <button nz-button nzType="default" (click)="handleCancel()">取消</button>
    <button
      nz-button
      nzType="primary"
      [disabled]="!this.collectStartData || !this.collectEndData"
      (click)="editCollect()"
    >
      收集
    </button>
  </div>
</nz-modal>

<nz-modal
  [(nzVisible)]="isVisible"
  nzTitle="教材源文件"
  (nzOnCancel)="isVisible = false"
  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) {
        <nz-collapse-panel
          #p
          [nzHeader]="title"
          [nzActive]="true"
          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
        [review]="true"
        [eduTextbookVolume]="currentTextbook?.get('childrens')[0]"
      ></app-upload-collect>
      }
    </div>
  </ng-container>
  <div *nzModalFooter>
    <button nz-button nzType="primary" (click)="isVisible = false">关闭</button>
  </div>
</nz-modal>
