<div [class.pointer-events-none]="detailConfig.visible" [class.invisible]="detailConfig.visible">
  <div class="flex justify-between">
    <div class="headline pl-2">排查计划</div>
    <div class="pr-4">
      <button
        nz-button
        class="precaution-secondary"
        nzType="primary"
        style="border-radius: 12px"
        (click)="handleAddPlan()"
      >
        创建计划
      </button>
    </div>
  </div>
  <div class="flex">
    <div class="overview-panel flex-1 flex h-[140px]">
      <div class="w-[393px] r-border px-[3%]">
        <div class="semi-annual-switch">
          <div class="arrow" (click)="handleSemiAnnualChange('left')">
            @if (leftArrowVisible) {
              <span
                nz-icon
                nzType="icons:material-left-arrow"
                class="text-2xl cursor-pointer hover:text-primary"
              ></span>
            }
          </div>
          <div class="text">
            {{ semiAnnual?.label || '' }}
          </div>
          <div class="arrow" (click)="handleSemiAnnualChange('right')">
            @if (rightArrowVisible) {
              <span
                nz-icon
                nzType="icons:material-right-arrow"
                class="text-2xl cursor-pointer hover:text-primary"
              ></span>
            }
          </div>
        </div>
        <div class="pb-2">
          @for (row of types; track $index) {
            <div class="plan-type" [class.active]="currentType === row.key" (click)="handlePlanTypeChange(row.key)">
              <span class="section-label">{{ row.label }}：</span>
              <span class="unit-number">{{ row.count + '起' }}</span>
            </div>
          }
        </div>
      </div>
      <div class="flex flex-1">
        <!-- <div class="flex flex-col justify-between py-4 w-[393px] pl-[6%] pr-[4%]">
          @for (row of secondSection; track $index) {
            <div class="flex items-center h-1/3 justify-between">
              <span class="section-label">{{ row.label }}：</span>
              <span class="link-number text-left flex-1 pl-[20%]">{{ row.value + '%' }}</span>
            </div>
          }
        </div> -->

        <div class="flex pt-8 pr-24 pl-[2%]">
          <div class="section-label pt-2 mr-8">排查中发现隐患：</div>
          <div class="grid grid-cols-2 gap-x-12 text-3 relative -top-2">
            @for (item of discoveryList; track item.level) {
              <div class="pb-3 text-right">
                <span>{{ item.level }}隐患</span>
                <span class="text-3xl ml-1 font-alibaba-heavy" [style.color]="item.color">{{ item.count }}</span>
                <span class="text-xs">起</span>
              </div>
            }
          </div>
        </div>
        <div class="flex-1"></div>
      </div>
    </div>
    <!-- <div class="overview-panel ml-5 w-[30%] pt-[13px]">
      <div class="notifications">
        @for (item of notifications; track $index) {
          <div class="notification-item">
            <div class="type">
              <div
                class="type-tag"
                [style.color]="getNotificationTypeColor(item.type)"
                [style.background-color]="getNotificationTypeBgColor(item.type)"
              >
                {{ getNotificationTypeText(item.type) }}
              </div>
            </div>
            <div class="title">{{ item.title }}</div>
            <div class="time pl-2">{{ item.createDate | date: 'yyyy-MM-dd HH:mm' }}</div>
          </div>
        }
      </div>
    </div> -->
  </div>
  <div class="grid grid-cols-4 gap-5 py-5">
    @for (plan of plans; track plan.id) {
      <plan-card [data]="plan" (onViewDetail)="handleViewDetail($event)"></plan-card>
    }
  </div>

  <nz-spin [nzSpinning]="fetching">
    <div class="flex justify-center items-center">
      <data-empty [isEmpty]="plans.length === 0" textColor="black"></data-empty>
      <div class="pagination">
        @if (pageConfig.total > pageConfig.size) {
          <nz-pagination
            [nzPageIndex]="pageConfig.page + 1"
            [nzTotal]="pageConfig.total"
            [nzPageSize]="pageConfig.size"
            (nzPageIndexChange)="onCurrentPageChange($event - 1)"
            [nzShowSizeChanger]="false"
          />
        }
      </div>
    </div>
  </nz-spin>
</div>
@if (detailConfig.visible) {
  <inspection-plan-detail
    @horizontalInOutReverse300ms
    [data]="detailConfig.data"
    [loading]="fetchingDetail"
    (onEdit)="handleEditPlan($event)"
    (onClose)="handleCloseDetail()"
    (refreshList)="handleRefreshList()"
    (onFetchDetail)="handleFetchDetail($event)"
  ></inspection-plan-detail>
}

<custom-drawer
  [visible]="formConfig.visible"
  (onClose)="closeFormDrawer()"
  [width]="740"
  [title]="formConfig.isEdit ? '编辑计划' : '创建计划'"
>
  <plan-form
    #hazardForm
    [data]="formConfig.data"
    [isEdit]="formConfig.isEdit"
    (onClose)="closeFormDrawer()"
    (refreshList)="handleRefreshList()"
    (fetchDetail)="handleFetchDetail($event)"
  ></plan-form>
</custom-drawer>
