<div class="shared-panel">
  <div class="shared-panel-header">
    <div class="title">场所/作业/设备</div>
  </div>
  <div class="poe-content">
    <div class="type-nav-container">
      <div class="type-nav-box">
        <risk-type-category-nav
          [emptyAbleToSelect]="true"
          [types]="types"
          [categories]="categories"
          [selectedType]="selectedType"
          [selectedCategory]="selectedCategory"
          (selectedTypeChange)="selectedTypeChange($event)"
          (selectedCategoryChange)="selectedCategoryChange($event)"
        ></risk-type-category-nav>
      </div>
    </div>
    <div class="flex-1">
      <div class="py-6 px-8 flex items-center justify-between">
        <div>
          <nz-radio-group
            class="precaution-button-group"
            nzSize="default"
            nzButtonStyle="solid"
            [(ngModel)]="activeTab"
            (ngModelChange)="activeTabChange($event)"
          >
            @for (item of poeTabs; track $index) {
              <label nz-radio-button [nzValue]="item.value" class="last:mr-0">{{ item.label }}</label>
            }
          </nz-radio-group>
        </div>
        <div>
          <button nz-button class="precaution-button" nzType="primary" (click)="addPoe()">新增</button>
          <button nz-button class="precaution-button ml-4" nzType="primary" nzDanger (click)="isEdit = !isEdit">
            {{ isEdit ? '退出编辑' : '编辑' }}
          </button>
        </div>
      </div>
      <div class="px-8 pb-6">
        @for (item of filteredList; track $index) {
          <div class="item-box" [class.is-edit]="isEdit">
            <div>{{ item.name }}</div>
            <div class="mask" *ngIf="isEdit">
              <span
                nz-icon
                nzType="edit"
                nzTheme="fill"
                class="text-white text-base cursor-pointer hover:text-primary mr-2"
                (click)="editItem(item)"
              ></span>
              <span
                nz-icon
                nzType="close-circle"
                nzTheme="fill"
                class="text-white text-base cursor-pointer hover:text-red-500"
                nz-popconfirm
                [nzPopconfirmTitle]="'删除【' + item.name + '】，此操作无法回滚，是否继续?'"
                nzPopconfirmPlacement="bottom"
                (nzOnConfirm)="deleteItem(item)"
              ></span>
            </div>
          </div>
        }
      </div>
    </div>
  </div>
</div>

<ng-template #formTpl>
  <form nz-form [formGroup]="validateForm">
    <nz-form-item>
      <nz-form-label> {{ currentTabLabel }}名称 </nz-form-label>
      <nz-form-control nzErrorTip="请输入{{ currentTabLabel }}名称!">
        <div class="flex justify-left">
          <input
            nz-input
            type="text"
            [placeholder]="'请输入' + currentTabLabel + '名称'"
            formControlName="name"
            class="precaution-input"
          />
        </div>
      </nz-form-control>
    </nz-form-item>
  </form>
</ng-template>
