<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>
    <div style="font-size: 16px; border: 2px solid #ccc; border-radius: 10px; padding: 10px; width: 500px;">
      <div style="display: flex; justify-content: center; align-items: center;">
        <span style="width: 120px; margin-right: 20px;" align="right">page_id: </span>
        <input type="text" nz-input [(ngModel)]="item.page_id" (blur)="save()" style="margin-top: 5px">
      </div>
      <div style="display: flex; justify-content: center; align-items: center;">
        <span style="width: 120px; margin-right: 20px;" align="right">book_id: </span>
        <input type="text" nz-input [(ngModel)]="item.book_id" (blur)="save()" style="margin-top: 5px">
      </div>
      <div style="display: flex; justify-content: center; align-items: center;">
        <span style="width: 120px; margin-right: 20px;" align="right">part_name: </span>
        <input type="text" nz-input [(ngModel)]="item.part_name" (blur)="save()" style="margin-top: 5px">
      </div>
    </div>
    <!-- "page_id": 27,
    "book_id": "opw1",
    "part_name": "d", -->

    <h2 style="margin-top: 20px">音频配置：</h2>

    <div style="font-size: 16px; border: 2px solid #ccc; border-radius: 10px; padding: 10px; width: 500px;">
      
      <div *ngFor="let at of audioTypeArr" style="margin: 15px; display: flex; align-items: center;">
        <span style="margin-right: 20px; width: 150px; " align="right">{{at.info}}: </span>
        <app-audio-recorder
          [audioUrl]="item[at.key + '_audio_url']"
          (audioUploaded)="onAudioUploadSuccess($event, at.key + '_audio_url')"
        ></app-audio-recorder>
      </div>

      <!-- <nz-divider ></nz-divider>
      <span style="margin-left: 15px; ">选填:</span>
      <div *ngFor="let at of audioTypeArr2" style="margin: 15px; display: flex; align-items: center;">
        <span style="margin-right: 20px; width: 150px; " align="right">{{at.info}}: </span>
        <app-audio-recorder
          [audioUrl]="item[at.key + '_audio_url']"
          (audioUploaded)="onAudioUploadSuccess($event, at.key + '_audio_url')"
        ></app-audio-recorder>
      </div> -->


    </div>

    <div style="width: 300px;">
      <h2 style="margin-top: 20px">字体：</h2>
      <div style="width: 80%; display: flex; justify-content: center; align-items: center;">
        <input type="text" nz-input [(ngModel)]="item.fontSize" (blur)="changeFontSize()" style="margin-top: 5px">
      </div>
    </div>

    <!-- <div style="width: 300px;">
      <h2 style="margin-top: 20px">背景图：</h2>
      <app-upload-image-with-preview
        [picUrl]="item.pic_url"
        (imageUploaded)="onImageUploadSuccess($event, 'bg_pic_url')">
      </app-upload-image-with-preview>
    </div>


    <h2 style="margin-top: 20px">前景图：</h2>

    <div style="margin-top: 5px;">
      <button nz-button nzType="dashed" (click)="addForeground()"
              class="add-btn">
        <i nz-icon nzType="plus-circle" nzTheme="outline"></i>
        添加前景图
      </button>
    </div> -->


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

    <h2 >热区配置：</h2>
    <app-custom-hot-zone
      [bgItem]="item.bgItem"
      [hotZoneItemArr]="item.hotZoneItemArr"
      [customTypeGroupArr]="customTypeGroupArr"
      (save)="saveHotZone(item, $event)"
      [hotZoneFontObj]="item.hotZoneFontObj"
      >
    </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>
    <h2>连线组设置：</h2>
    <div style="padding: 10px; border: 2px solid #ccc; border-radius: 10px; width: 780px; ">
      <div *ngFor="let hzItem of item.hotZoneItemArr; let i = index">
        <div *ngIf="hzItem.gIdx == '0'" style="margin: 10px; display: flex; align-items: center;justify-content: 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; ">
            <div style="width: 120px;" align="center">
              <a  nz-dropdown [nzDropdownMenu]="menu">
                <h3 >{{hzItem.linkItem ? 'item-' + hzItem.linkItem : 'select item'}}
                  <i nz-icon nzType="down"></i>
                </h3>
              </a>
            </div>
            
            <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> -->


    <div style="margin-top: 30px;"></div>
    <h2>问题和单词匹配设置：</h2>
    <div style="padding: 10px; border: 2px solid #ccc; border-radius: 10px; width: 580px; ">
      <div *ngFor="let hzItem of item.hotZoneItemArr; let i = index">
        <div *ngIf="hzItem.gIdx == '0'" style="margin: 10px; display: flex; align-items: center;justify-content: center;">
          
          <div style="width: 500px; border: 1px solid #ccc; border-radius: 10px; padding: 15px; ">
  
            <div style="display:flex; align-items: center; height: 50px; ">
              <h3>问题：item-{{i+1}}</h3>
            </div>

            <div style="display: flex; align-items: center; margin-top: 15px">

              <div style="width: 170px">
                <span>单词：</span>
                <a nz-dropdown [nzDropdownMenu]="menu2">
                  {{hzItem.quesLabelId ? 'item-' + hzItem.quesLabelId +'-word' : 'select word'}}
                  <i nz-icon nzType="down"></i>
                </a>
                <nz-dropdown-menu #menu2="nzDropdownMenu">
                  <ul nz-menu nzSelectable>
                    <div *ngFor="let temp of item.hotZoneItemArr; let j = index" (click)="saveQuesLabel(hzItem, j+1)" >
                      <li *ngIf="temp.gIdx == '1' " nz-menu-item>item-{{j+1}}-word</li>
                    </div>
                  </ul>
                </nz-dropdown-menu>
              </div>

            </div>
           
          </div>
      
        </div>
  
      </div>
    </div>



    <div style="margin-top: 30px;"></div>
    <h2>书写组设置：</h2>
    <div style="padding: 10px; border: 2px solid #ccc; border-radius: 10px; width: 350px;">
      <div *ngFor="let hzItem of item.hotZoneItemArr; let i = index">
        <div *ngIf="hzItem.gIdx == '1'" style="margin: 10px; 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">
       
              <label *ngIf="hzItem.rectNew">
                {{'rect-new-' + hzItem.rectNew}}
              </label>

              <label *ngIf="!hzItem.rectNew && hzItem.rectItem">
                {{'rect-item-' + hzItem.rectItem}}
              </label>

              <label *ngIf="!hzItem.rectNew && !hzItem.rectItem">
                {{'select rect'}}
              </label>
         
              <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)="saveRectItem(hzItem, j+1)" >
                  <li *ngIf="temp.gIdx == '1' " nz-menu-item>rect-item-{{j+1}}</li>
                </div>
                <div *ngFor="let temp of item.hotZoneItemArr2; let j = index" (click)="saveRectNew(hzItem, j+1)" >
                  <li *ngIf="temp.gIdx == '6' " nz-menu-item>rect-new-{{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>
    
  



    <!-- <div style="margin-top: 30px;"></div>
    <h2>画圈组设置：</h2>
    <div style="padding: 10px; border: 2px solid #ccc; border-radius: 10px; width: 350px;">
      <div *ngFor="let hzItem of item.hotZoneItemArr; let i = index">
        <div *ngIf="hzItem.gIdx == '2'" style="margin: 10px; 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]="menu3">
       
              <label *ngIf="hzItem.circleItem">
                {{'circle-item-' + hzItem.circleItem}}
              </label>

              <label *ngIf="!hzItem.circleItem">
                {{'select circle'}}
              </label>
         
              <i nz-icon nzType="down"></i>
            </a>
            <nz-dropdown-menu #menu3="nzDropdownMenu">
              <ul nz-menu nzSelectable>
                <div *ngFor="let temp of item.hotZoneItemArr2; let j = index" (click)="saveCircleItem(hzItem, j+1)" >
                  <li *ngIf="temp.gIdx == '7' " nz-menu-item>circle-item-{{j+1}}</li>
                </div>
           
              </ul>
            </nz-dropdown-menu>
          </div>
        
       
        </div>
  
      </div>
    </div>


    <div style="margin-top: 30px;"></div>
    <h2>标记组设置：</h2>
    <div style="padding: 10px; border: 2px solid #ccc; border-radius: 10px; width: 350px;">
      <div *ngFor="let hzItem of item.hotZoneItemArr; let i = index">
        <div *ngIf="hzItem.gIdx == '4'" style="margin: 10px; 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]="menu4">
              {{hzItem.signItem ? 'sign-item-' + hzItem.signItem : 'select signItem'}}
              <i nz-icon nzType="down"></i>
            </a>

            <nz-dropdown-menu #menu4="nzDropdownMenu">
              <ul nz-menu nzSelectable>
                <div *ngFor="let temp of item.hotZoneItemArr2; let j = index" (click)="saveSignItem(hzItem, j+1)" >
                  <li *ngIf="temp.gIdx == '8' " nz-menu-item>sign-item-{{j+1}}</li>
                </div>
           
              </ul>
            </nz-dropdown-menu>
          </div>
        
       
        </div>
  
      </div>
    </div>


    <div style="margin-top: 30px;"></div>
    <h2>手指组设置：</h2>
    <div style="padding: 10px; border: 2px solid #ccc; border-radius: 10px; width: 350px;">
      <div *ngFor="let hzItem of item.hotZoneItemArr; let i = index">
        <div *ngIf="hzItem.gIdx == '5'" style="margin: 10px; 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]="menu4">
              {{hzItem.fingerItem ? 'finger-item-' + hzItem.fingerItem : 'select fingerItem'}}
              <i nz-icon nzType="down"></i>
            </a>

            <nz-dropdown-menu #menu4="nzDropdownMenu">
              <ul nz-menu nzSelectable>
                <div *ngFor="let temp of item.hotZoneItemArr2; let j = index" (click)="saveFingerItem(hzItem, j+1)" >
                  <li *ngIf="temp.gIdx == '9' " nz-menu-item>sign-item-{{j+1}}</li>
                </div>
           
              </ul>
            </nz-dropdown-menu>
          </div>
        
       
        </div>
  
      </div>
    </div>

  
    <div *ngIf=" item.typeArr &&  item.typeArr.length > 1" style="margin-top: 30px;">

      <h2>识别顺序设置：</h2>

      <div style="padding: 10px; border: 2px solid #ccc; border-radius: 10px; width: 350px;">

        <span style="position:absolute; margin-left: 10px">优先识别：</span>
        <nz-radio-group [ngModel]="item.firstGIdx" (ngModelChange)="onRadioChange($event)"  style="display: flex; align-items: center; justify-content: center; flex-wrap: wrap;">
          <div *ngFor="let type of item.typeArr;" style="display: flex; ">
            <label nz-radio nzValue="{{type.gIdx}}">{{type.name}}</label>
          </div>
        </nz-radio-group>

      </div>
    </div> -->
 


    <!-- <div style="margin-top: 30px; width: 200px; height: 50px; border: 1px solid #ccc ; border-radius: 5px; display: flex; align-items: center; justify-content: center;">
      <label nz-checkbox [(ngModel)]="item.isGuide" (ngModelChange)="save()">首次引导</label>
    </div> -->

    <div style="margin-top: 30px; 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>
