<div class="flex items-center text-xl font-medium mb-3 px-6">
  <span>治理方案</span>
  <span
    class="status-tag ml-4"
    [style.background-color]="hazardMeasureStatusBgColor"
    [style.color]="hazardMeasureStatusColor"
    >{{ hazardMeasureStatusText }}</span
  >
</div>
<div class="grid grid-cols-2 gap-x-6 px-6">
  <div class="measure-item">
    <div class="title">措施</div>
    <div class="content custom-scroll-bar">
      <div class="whitespace-pre-line">{{ data.plan.measure }}</div>
      <data-empty [isEmpty]="!data.plan.measure" text="暂无措施..."></data-empty>
    </div>
    @if (!data.plan.measure || beingRejected) {
      <div class="mask">
        <div class="center">
          <button class="precaution-button" nz-button nzType="primary" (click)="openFillModal()">点击填写</button>
        </div>
      </div>
    }
  </div>
  <div class="target-item">
    <div class="title">治理目标</div>
    <div class="content">
      <div class="whitespace-pre-line">{{ data.plan.target }}</div>
      <data-empty [isEmpty]="!data.plan.target" text="暂无目标..."></data-empty>
    </div>
    @if (!data.plan.target || beingRejected) {
      <div class="mask">
        <div class="center">
          <button class="precaution-button" nz-button nzType="primary" (click)="openFillModal()">点击填写</button>
        </div>
      </div>
    }
  </div>
</div>
@if (!stillEmpty) {
  <div class="pt-4 px-6 text-right">
    <span class="label">治理人：</span>
    <span class="value">{{ data.plan.userName }}</span>
    <span class="label ml-6">截止日期：</span>
    <span class="value">{{ data.plan.endDate | time: 'YYYY-MM-DD' }}</span>
  </div>
}
@if (auditable) {
  <div class="pt-4 px-6 pr-4">
    <div class="border-solid border-gray-300 rounded-xl border-[1px] px-4 py-2">
      <textarea
        class="rounded-xl pure-textarea w-full"
        [disabled]="loading"
        [(ngModel)]="comment"
        placeholder="请输入备注"
        maxlength="1000"
        cols="4"
      ></textarea>
    </div>
    <div class="flex justify-end mt-4 pr-4">
      <button nz-button class="precaution-green !rounded-lg" nzType="primary" (click)="handlePass()">通过</button>
      <button nz-button class="precaution-danger !rounded-lg ml-4" nzType="primary" (click)="handleReject()">
        驳回
      </button>
    </div>
  </div>
}
<ng-template #fillTemplate>
  @if (data.planCheckRemark) {
    <div class="pb-4 -mt-2">
      <nz-alert class="rounded-alert" nzType="warning" [nzMessage]="titleTemplate" [nzDescription]="reasonTemplate">
      </nz-alert>
    </div>
    <ng-template #titleTemplate>
      <div class="text-sm">驳回原因</div>
    </ng-template>
    <ng-template #reasonTemplate>
      <div class="text-xs whitespace-pre-line text-gray-600">{{ data.planCheckRemark }}</div>
    </ng-template>
  }
  <form nz-form [formGroup]="validateForm">
    <nz-form-item>
      <nz-form-label nzSpan="4" nzRequired>措施</nz-form-label>
      <nz-form-control nzSpan="20" nzErrorTip="请输入措施">
        <div class="flex justify-left">
          <textarea
            nz-input
            placeholder="措施"
            formControlName="measure"
            maxlength="1000"
            rows="3"
            class="precaution-input"
          ></textarea>
        </div>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label nzSpan="4" nzRequired>治理目标</nz-form-label>
      <nz-form-control nzSpan="20" nzErrorTip="请输入治理目标">
        <div class="flex justify-left">
          <textarea
            nz-input
            placeholder="治理目标"
            formControlName="target"
            rows="3"
            maxlength="1000"
            class="precaution-input"
          ></textarea>
        </div>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label nzSpan="4" nzRequired>治理人</nz-form-label>
      <nz-form-control nzSpan="20" nzErrorTip="请输入治理人">
        <div class="flex justify-left">
          <input nz-input placeholder="治理人" formControlName="executor" class="precaution-input" />
        </div>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label nzSpan="4" nzRequired>截止日期</nz-form-label>
      <nz-form-control nzSpan="20" nzErrorTip="请输入截止日期">
        <div class="flex justify-left">
          <nz-date-picker
            class="precaution-input"
            nzMode="date"
            formControlName="deadline"
            placeholder="截止日期"
            format="YYYY-MM-DD"
          />
        </div>
      </nz-form-control>
    </nz-form-item>
  </form>
</ng-template>
