<div class="model-content">


  <!-- <app-formula-input style="position: absolute;right:0;" [(ngfModel)]="item.title" (ngfBlur)="save()"></app-formula-input><br>
  <app-formula-input [(ngfModel)]="item.title" (ngfBlur)="save()"></app-formula-input><br> -->
  <div style="padding: 20px;">


    <h2>热区配置：</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
    [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 *ngIf="hzItem.gIdx == '0'" style="margin-top: 25px; display: flex; align-items: center;">
        
        <div style="width: 300px; height: 70px; border: 1px solid #ccc; border-radius: 10px; padding: 5px; ">

          <h3>item-{{i+1}}</h3>
          <span>服务端点位：</span>
  
          <a nz-dropdown [nzDropdownMenu]="menu2">
            {{hzItem.pointItem ? 'point-item-' + hzItem.pointItem : 'select point'}}
            <i nz-icon nzType="down"></i>
          </a>
          <nz-dropdown-menu #menu2="nzDropdownMenu">
            <ul nz-menu nzSelectable>
              <div *ngFor="let temp of item.hotZoneItemArr2; let j = index" (click)="savePointItem(hzItem, j+1)" >
                <li *ngIf="temp.gIdx == '0' " nz-menu-item>point-item-{{j+1}}</li>
              </div>
            </ul>
          </nz-dropdown-menu>
        </div>
      
        <div style="margin: 10px;">
          ----连接到----
        </div>
        <div style="width: 300px; height: 70px; border: 1px solid #ccc; border-radius: 10px; padding: 5px; ">
          <a nz-dropdown [nzDropdownMenu]="menu">
            <h3>{{hzItem.linkItem ? 'item-' + hzItem.linkItem : 'select item'}}
              <i nz-icon nzType="down"></i>
            </h3>
          </a>
          <nz-dropdown-menu #menu="nzDropdownMenu">
            <ul nz-menu nzSelectable>
              <div *ngFor="let temp of item.hotZoneItemArr; let j = index" (click)="saveLinkItem(hzItem, j+1)" >
                <li *ngIf="i != j && temp.gIdx == '0' " nz-menu-item>item-{{j+1}}</li>
              </div>
            </ul>
          </nz-dropdown-menu>
        </div>
      </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="width: 100%; margin-top: 15px; margin-bottom: 50px;" align="center">
      <h2>气泡文本</h2>
      <div style="width: 80%; display: flex; justify-content: center; align-items: center;">
        <input type="text" nz-input [(ngModel)]="item.title" (blur)="save()" style="margin-top: 5px">

      </div>

    </div>

    <app-custom-hot-zone
    [bgItem]="item.bgItem"
    [hotZoneItemArr]="item.hotZoneItemArr"
    [customTypeGroupArr]="customTypeGroupArr"
    (save)="saveHotZone(item, $event)"
    >

    </app-custom-hot-zone> -->
    <!-- <div style="width: 300px;" align='center'>
      <span>图1: </span>
      <app-upload-image-with-preview
        [picUrl]="item.pic_url"
        (imageUploaded)="onImageUploadSuccess($event, 'pic_url')">
      </app-upload-image-with-preview>
    </div>

    <div style="width: 300px; margin-top: 5px;" align='center'>
      <span>图2: </span>
      <app-upload-image-with-preview
        [picUrl]="item.pic_url_2"
        (imageUploaded)="onImageUploadSuccess($event, 'pic_url_2')">
      </app-upload-image-with-preview>
    </div>

    <div style="width: 300px; margin-top: 15px;">
      <span>文本: </span>
      <input type="text" nz-input [(ngModel)]="item.text" (blur)="save()">
    </div>

    <div style="margin-top: 5px">
      <span>音频: </span>
      <app-audio-recorder
        [audioUrl]="item.audio_url"
        (audioUploaded)="onAudioUploadSuccess($event, 'audio_url')"
      ></app-audio-recorder>
    </div> -->

  </div>

</div>
