<div class="model-content">

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


    <div style="width: 1000px; margin-bottom: 20px;">
      <textarea nz-input rows="{{myContent.split('\n').length + 1}}" [(ngModel)]="myContent" style=" resize:none; ">
      </textarea>
    </div>

<!-- 
    <nz-upload 
      nzAction="http://staging-teach.ireadabc.com/fileUpload" 
      [nzType]="'drag'"
      [nzDirectory]="true"
      nzMultiple 
      nzShowUploadList="true"
      (nzChange)="handleChange($event)"
      >
      
      <button nz-button>
        <i nz-icon nzType="upload"></i>
        上传文件夹中的文件
      </button>
    </nz-upload> -->






<!-- 
    <ng-template #customTemplate>
      <div class="upload-drag-icon">
        <i nz-icon nzType="inbox"></i>
      </div>
      <p class="ant-upload-text">单击或拖动文件到此区域上传</p>
      <p class="ant-upload-hint">支持单个或批量上传。严禁上传公司数据或其他带有隐私的文件</p>
    </ng-template>
    
    <ng-template #listOfFiles>
      <ul nz-list nzBordered>
        <li nz-list-item *ngFor="let file of fileList">
          <div nzAlign="center">
            <i nz-icon nzType="paper-clip"></i>
            <span class="filename">{{ file.name }}</span>
            <span class="file-size">({{ file.size }})</span>
            <button nz-button nzType="link" nzSize="small" (click)="removeFile(file)">
              <i nz-icon nzType="delete"></i>
            </button>
          </div>
        </li>
      </ul>
    </ng-template>
    
    <nz-upload
      [nzType]="'drag'"
      [nzBeforeUpload]="beforeUpload"
      [nzCustomRequest]="customReq"
      [nzListType]="'picture'"
      [nzFileList]="fileList"
      [nzShowUploadList]="true"
      [nzPreview]="preview"
      [nzRemove]="remove"
      [nzDisabled]="false"
      [nzLimit]="limit"
      [nzSize]="'50'"
      [nzFileType]="'image/png'"
      [nzHeaders]="headers"
      [nzData]="uploadData"
      [nzName]="'file'"
      [nzAction]="'http://staging-teach.ireadabc.com/fileUpload'"
      [nzAccept]="'image/png, image/jpeg'"
      [nzDirectory]="true"
      [nzOpenFileDialogOnClick]="false"

      (nzChange)="handleChange($event)"
      (nzPreviewFile)="handlePreview($event)"
      (nzRemove)="handleRemove($event)"
      (nzUpload)="handleUpload($event)"
      (nzError)="handleError($event)"
  
    >

      <button nz-button>
        <i nz-icon nzType="upload"></i><span>上传文件夹</span>
      </button>
    </nz-upload> -->

    


    
    <div style="margin-bottom: 10px;">
      <h1>整体设置：</h1>
      <app-form-group 
        [group_arr]="item.global_setting || []" 
        [canUploadDir]="false"
        (uploadDirector)="uploadDirectorFinishGlobal($event)"
        (save)="saveFormGroupGlobal($event)"
      >
      </app-form-group>
    </div>


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

      <h1>内容数据：</h1>
      <app-form-group 
        [group_arr]="item.group_arr || []" 
        [canUploadDir]="false"
        (uploadDirector)="uploadDirectorFinish($event)"
        (save)="saveFormGroup($event)"
      >
      </app-form-group>
    </div>

    <!-- <div style="margin-top: 30px;">
      <button nz-button nzType="dashed" (click)="addGroupBtnClick()"
              class="add-btn">
        <i nz-icon nzType="plus-circle" nzTheme="outline"></i>
        Add One Group
      </button>
    </div> -->

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

    <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
      [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: 350px;">
      <div *ngFor="let hzItem of item.hotZoneItemArr; let i = index">
        <div *ngIf="hzItem.gIdx == '1' || hzItem.gIdx == '6'" 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 && hzItem.rectNum">
                {{'rect-num-' + hzItem.rectNum}}
              </label>

              <label *ngIf="!hzItem.rectNew && !hzItem.rectItem && !hzItem.rectNum">
                {{'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>
                <div *ngFor="let temp of item.hotZoneItemArr2; let j = index" (click)="saveRectNum(hzItem, j+1)" >
                  <li *ngIf="temp.gIdx == '10' " nz-menu-item>rect-num-{{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 *ngIf="hasCombineGroup">
      <div style="margin-top: 30px;"></div>
      <h2>标记组合并识别设置(选填)：</h2>
      <div style="padding: 10px; border: 2px solid #ccc; border-radius: 10px; width: 350px;">
        <div *ngIf="hasCombineGroup" style="position: relative;">
          <button nz-button nzType="default" nzShape="circle" (click)="addItemCombineGroup()" style="position: absolute; top: -40px; right: 0;">
            <span nz-icon nzType="plus"></span>
          </button>
          <div style="margin-top: 40px;">
            <div *ngFor="let cgItem of item.itemCombineGroup; let i = index" style="width: 100%; padding-right: 50px; position: relative; margin-top: 10px;">
              <nz-select [(ngModel)]="item.itemCombineGroup[i]" nzMode="multiple" (ngModelChange)="onItemCombineGroupChange()" nzPlaceHolder="Please select" style="width: 100%;">
                <nz-option *ngFor="let option of item.hotZoneItemArr2; let j = index" [nzLabel]="'sign-item-' + (j+1)" [nzValue]="j"></nz-option>
              </nz-select>
              <button nz-button nzType="danger" nzShape="circle" (click)="deleteItemCombineGroup(i)" style="position: absolute; right: 0;">
                <span nz-icon nzType="delete"></span>
              </button>
            </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 == '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.drawItem ? 'draw-item-' + hzItem.drawItem : 'select drawItem'}}
              <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)="saveDrawItem(hzItem, j+1)" >
                  <li *ngIf="temp.gIdx == '9' " nz-menu-item>draw-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: 300px; border: 1px solid #ccc ; border-radius: 5px;">
      <div style="display: flex; justify-content: center; align-items: center; height: 50px">
        <span style="width: 120px; margin-right: 10px;" align="right">帮助提示间隔(秒): </span>
        <input type="text" nz-input [(ngModel)]="item.helpTime" (blur)="save()" style="margin-right: 15px; width: 100px ">
      </div>
    </div>


    <div style="margin-top: 30px; width: 300px; height: 50px; border: 1px solid #ccc ; border-radius: 5px; display: flex; align-items: center; ">
      <div style="display: flex; align-items: center; margin: 30px;">
        <label>连线类型：</label>
        <nz-radio-group [ngModel]="item.lineType" (ngModelChange)="onRadioChangeLine($event)"  style="display: flex; align-items: center; justify-content: center; flex-wrap: wrap;">
          <label nz-radio nzValue="1">直线</label>
          <label nz-radio nzValue="0">曲线</label>
        </nz-radio-group>
      </div>
    </div>

    <div style="margin-top: 30px; width: 300px; height: 50px; border: 1px solid #ccc ; border-radius: 5px; display: flex; align-items: center; ">
     
      <div style="display: flex; align-items: center; margin: 30px;">
        <label>画圈类型：</label>
        <nz-radio-group [ngModel]="item.circleSize" (ngModelChange)="onRadioChangeCircle($event)"  style="display: flex; align-items: center; justify-content: center; flex-wrap: wrap;">
          <label nz-radio nzValue="1">大圈</label>
          <label nz-radio nzValue="0">小圈</label>
        </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.isDebug" (ngModelChange)="save()">调试模式</label>
    </div> -->



  </div>

</div>