<div class="model-content">


  <div style="padding: 20px;">

    <h3>填充背景</h3>
    <div style="width: 300px;">
      <app-upload-image-with-preview
      [picUrl]="item.bg_pic_url"
      (imageUploaded)="onImageUploadSuccess($event, 'bg_pic_url', item)">
      </app-upload-image-with-preview>
    </div>

    <h2 style="margin-top: 30px;">热区配置：</h2>
    <app-custom-hot-zone
      [bgItem]="item.bgItem"
      [hotZoneItemArr]="item.hotZoneItemArr"
      [customTypeGroupArr]="customTypeGroupArr"
      (save)="saveHotZone(item, $event)"
      >

    </app-custom-hot-zone>


    <div style="margin-top: 50px;"></div>
    <h2>点位标注：</h2>
    <app-custom-hot-zone
    [isRotate]="true"
    [bgItem]="item.bgItem2"
    [hotZoneItemArr]="item.hotZoneItemArr2"
    [customTypeGroupArr]="customTypeGroupArr2"
    (save)="saveHotZone2(item, $event)"
      >
    </app-custom-hot-zone>

    <div style="margin-top: 30px;"></div>

    <div *ngFor="let hzItem of item.hotZoneItemArr; let i = index">
      <div style="width: 300px; border: 1px solid #ccc; border-radius: 10px; padding: 5px; margin-top: 5px;">
        <h2>item-{{i+1}}</h2>

        <a nz-dropdown [nzDropdownMenu]="menu">
          {{hzItem.pointItem ? '填空区 item-' + hzItem.pointItem : '选择填空区'}}
          <i nz-icon nzType="down"></i>
        </a>
        <nz-dropdown-menu #menu="nzDropdownMenu">
          <ul nz-menu nzSelectable>
            <div *ngFor="let temp of item.hotZoneItemArr2; let j = index" (click)="savePointItem(hzItem, j+1)" >
              <li *ngIf="temp.gIdx == '3' " nz-menu-item>填空区 item-{{j+1}}</li>
            </div>
          </ul>
        </nz-dropdown-menu>


        <div style="margin-top: 20px;"></div>
        <span>答案图片</span>
        <app-upload-image-with-preview
          [picUrl]="hzItem.answer_pic_url"
          (imageUploaded)="onImageUploadSuccess($event, 'answer_pic_url', hzItem)">
        </app-upload-image-with-preview>
      </div>

    </div>



    <div style="margin-top: 10px; width: 200px; height: 50px; border: 1px solid #ccc ; border-radius: 5px; display: flex; align-items: center; justify-content: center;">
      <label nz-checkbox [(ngModel)]="item.isDebug" (ngModelChange)="save()">调试模式</label>
    </div>
    
    <div style="margin-top: 20px; margin-bottom: 20px; border: 2px solid #ccc; border-radius: 10px; width: 400px;">

      <div style="width: 90%; display:flex; align-items: center; margin: 10px;"> 
        <span style="width: 200px">纵向缩放偏移量:</span><input [disabled]="!item.isDebug" type="text" nz-input [(ngModel)]="item.scaleOffY" (blur)="save()">
      </div>

      <div style="width: 90%; display:flex; align-items: center; margin: 10px;"> 
        <span style="width: 200px">纵向位置偏移量:</span><input [disabled]="!item.isDebug" type="text" nz-input [(ngModel)]="item.positionOffY" (blur)="save()">
      </div>

   </div>






  </div>

</div>
