<div class="px-6">
  <div class="flex justify-between items-center">
    <div>
      <filter-button-group
        [options]="departmentOptions"
        (change)="onSelectDepartment($event)"
        [activeValue]="currentDepartment"
        [colon]="false"
      />
    </div>
    <div class="pb-4">
      @if (currentDepartment !== -1 && planBelongToMe) {
        <button class="precaution-secondary !rounded-2xl ml-4" nz-button nzType="primary" (click)="onToggleEditor()">
          {{ editing ? '返回' : '任务制定' }}
        </button>
      }
    </div>
  </div>
</div>
@if (!departmentOptions.length) {
  <div class="py-4">
    <data-empty text="请添加部门" [isEmpty]="true" [textColor]="'#999'" />
  </div>
} @else {
  <div class="px-4">
    <div class="wrapper">
      <plan-task-rounds
        [data]="data"
        [rounds]="rounds"
        [selectedRoundId]="selectedRoundId"
        [departmentId]="currentDepartment"
        (onSelect)="onRoundChange($event)"
      />
      @if (currentRound) {
        <div class="right-wrapper" style="min-height: 600px">
          <div class="title flex justify-between items-center">
            <div>
              <span class="text-base font-medium">
                <span>{{ getFrequencyLabel(data) }}</span>
                <span>（{{ currentRound.time }}）</span>
              </span>
            </div>
            <div>
              @if (editing) {
                @if (roundCopyVisible) {
                  <span
                    class="inline-flex items-center cursor-pointer text-primary hover:opacity-80 ml-4"
                    nz-dropdown
                    [nzTrigger]="'click'"
                    [nzDropdownMenu]="menuRound"
                    [nzOverlayStyle]="{ top: '0px', left: '-40px' }"
                    nzOverlayClassName="datav-dropdown"
                  >
                    <span nz-icon nzType="icons:copy" class="text-xl"></span>
                    <span class="ml-1">复制到其他轮</span>
                  </span>
                }
              }
            </div>
          </div>
          <!-- times button group -->
          <div class="p-4 pr-8 flex justify-between items-center">
            <div class="button-group">
              @for (turn of turns; track turn) {
                <div class="button-item" [ngClass]="{ active: turn === currentTurn }" (click)="onTurnChange(turn)">
                  <span>第{{ turn + 1 }}次</span>
                </div>
              }
            </div>
            <div>
              @if (editing) {
                <span
                  class="inline-flex items-center cursor-pointer text-primary hover:opacity-80"
                  (click)="onAddTask()"
                >
                  <span nz-icon nzType="icons:plus" class="text-xl"></span>
                  <span class="ml-1">新增</span>
                </span>
                @if (turnCopyVisible) {
                  <span
                    class="inline-flex items-center cursor-pointer text-primary hover:opacity-80 ml-4"
                    nz-dropdown
                    [nzDropdownMenu]="menu"
                    [nzOverlayStyle]="{ top: '0px', left: '-40px' }"
                    nzOverlayClassName="datav-dropdown"
                  >
                    <span nz-icon nzType="icons:copy" class="text-xl"></span>
                    <span class="ml-1">复制</span>
                  </span>
                }
              }
            </div>
          </div>

          @if (!editing) {
            <plan-round-static-table [list]="list" (fetchDetail)="fetchDetail()" [planFillable]="planFillable" />
          }
          @if (editing) {
            <plan-round-edit-form
              [plan]="data"
              [round]="currentRound"
              [list]="list"
              [departmentId]="currentDepartment"
              [times]="currentTurn"
              (fetchDetail)="fetchDetail()"
            />
          }
        </div>
      }
    </div>
  </div>
}

<nz-dropdown-menu #menuRound="nzDropdownMenu">
  <ul nz-menu>
    @for (item of otherRounds; track item.meta.id) {
      <li nz-menu-item nzSelectable (click)="onCopyToRound(item)">
        <span>复制到</span>
        <span class="font-medium text-primary text-base">{{ item.time }}</span>
      </li>
    }
  </ul>
</nz-dropdown-menu>

<nz-dropdown-menu #menu="nzDropdownMenu">
  <ul nz-menu>
    @for (item of turns; track item) {
      @if (item !== currentTurn) {
        <li nz-menu-item nzSelectable (click)="onCopyToTurn(item)">
          <span>复制到第</span>
          <span class="font-medium text-primary text-lg">{{ item + 1 }}</span>
          <span>次</span>
        </li>
      }
    }
  </ul>
</nz-dropdown-menu>
