<div class="p-5">
  <div class="grid grid-cols-2 px-2" style="border-bottom: 1px solid var(--border-gray)">
    <div class="field-wrapper pr-4 relative">
      <div class="field" style="padding-right: 188px">
        <label class="label">计划名称：</label>
        <span class="value">{{ data.title }}</span>
      </div>
      <div class="field">
        <label class="label">计划类型：</label>
        <span class="value">{{ getTypeText(data.type) }}</span>
      </div>
      <div class="field">
        <label class="label">排查周期：</label>
        <span class="value">{{ getFrequencyText(data) }}</span>
      </div>
      <div class="field">
        <label class="label">排查目标：</label>
        <span class="value">共{{ points.length }}条风险</span>
        <span
          #pointPopover
          nz-popover
          nzPopoverPlacement="right"
          [nzPopoverTitle]="riskIemTitleTpl"
          [nzPopoverContent]="riskItemContentTpl"
          [nzPopoverVisible]="pointsDetailVisible"
          [nzPopoverTrigger]="null"
          [nzPopoverBackdrop]="true"
          nzPopoverOverlayClassName="custom-popover"
        >
          <button
            class="precaution-secondary !rounded-2xl ml-4"
            nzSize="small"
            nz-button
            nzType="primary"
            (click)="openPointsDetail()"
          >
            <span class="text-xs">查看详情</span>
          </button>
        </span>
      </div>
      <div class="field">
        <label class="label">排查总人次：</label>
        <span class="value">{{ data.planTotalPeopleTimes ? data.planTotalPeopleTimes + '人次' : ' - ' }}</span>
      </div>
      <div class="field">
        <label class="label">本次排查主要工作目标：</label>
        <span class="value whitespace-pre-line">{{ data.content }}</span>
      </div>
      <ng-container *ngTemplateOutlet="manual"></ng-container>
    </div>
    <div class="field-wrapper flex flex-col justify-start pl-4">
      <div class="field">
        <label class="label">计划开始与结束时间：</label>
        <span class="value">
          <span>{{ data.startDate | time: 'YYYY/MM/DD' }} - {{ data.endDate | time: 'YYYY/MM/DD' }}</span>
          <span class="text-c6">（合计{{ diffDays }}天）</span>
        </span>
      </div>
      <div class="field flex">
        <label class="label">参与部门：</label>
        <span class="value flex-1">
          <span>{{ getDepartmentsName(data.departments) }}</span>
          @if (planBaseModifyAble) {
            <button
              class="precaution-secondary !rounded-2xl ml-4"
              nzSize="small"
              nz-button
              nzType="primary"
              (click)="openDepartmentsEditModal()"
            >
              <span class="text-xs">添加部门</span>
            </button>
          }
        </span>
      </div>
      <plan-detail-progress [data]="data" (onConfirm)="confirmToPublish()" />
    </div>
  </div>
</div>
<ng-template #manual>
  <div class="manual">
    <div class="item r-border">
      <div>
        <img src="assets/icons/hazard/manual.svg" alt="排查手册" />
      </div>
      <div class="text">排查手册</div>
    </div>
    <div
      class="item"
      nz-popover
      nzPopoverPlacement="bottom"
      [nzPopoverTitle]="seasonTitleTpl"
      [nzPopoverContent]="seasonContentTpl"
      nzPopoverTrigger="click"
      nzPopoverOverlayClassName="custom-popover"
    >
      <div>
        <img src="assets/icons/hazard/season.svg" alt="季节特点" />
      </div>
      <div class="text">季节特点</div>
    </div>
  </div>
</ng-template>

<ng-template #seasonTitleTpl>
  <div class="py-1">
    <span class="text-base font-medium text-primary">季节特点</span>
  </div>
</ng-template>
<ng-template #seasonContentTpl>
  <div class="py-2 px-4 text-sm text-[#4E5969] max-w-[400px] max-h-[400px] overflow-y-auto custom-scroll-bar">
    <div class="mb-2">
      <span class="text-c6 font-bold">当前季节：</span>
      <span>春季</span>
    </div>
    <div>
      @for (item of springSpecifics; track item.title) {
        <div class="mb-2">
          <span class="text-c6 font-bold">{{ item.title }}: </span>
          <span>{{ item.content }}</span>
        </div>
      }
    </div>
  </div>
</ng-template>

<ng-template #riskIemTitleTpl>
  <div class="py-1">
    <span class="text-base font-medium text-primary">
      <span>风险数</span>
      <span>（{{ points.length }}）</span>
    </span>
  </div>
</ng-template>

<ng-template #riskItemContentTpl>
  <div class="py-2 px-4 text-sm text-[#4E5969] max-w-[400px] max-h-[400px] overflow-y-auto custom-scroll-bar">
    @for (item of riskItems; track item.id; let index = $index) {
      <div class="mb-2">
        <span class="text-c6 font-bold">{{ $index + 1 }}. </span>
        <span>{{ item.title }}</span>
      </div>
    }
  </div>
  <div class="h-10 flex justify-between" style="border-top: 1px solid rgba(0, 0, 0, 0.06)">
    @if (planBaseModifyAble) {
      <div
        class="flex-1 text-primary text-center leading-10 cursor-pointer hover:text-blue-400"
        style="border-right: 1px solid rgba(0, 0, 0, 0.06)"
        (click)="createPointsEditModal()"
      >
        继续添加
      </div>
    }
    <div
      class="flex-1 text-primary text-center leading-10 cursor-pointer hover:text-blue-400"
      (click)="closePointsDetail()"
    >
      关闭
    </div>
  </div>
</ng-template>

<ng-template #departmentsTpl>
  <div class="">
    <nz-checkbox-group class="flex flex-col gap-3" [(ngModel)]="temporaryDepartmentOptions" />
  </div>
</ng-template>
