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

  <div style="margin: 30px; display: flex; align-items: center; ">
    <h3>标题：</h3>
    <input type="text" nz-input [(ngModel)]="item.title" (blur)="save()" style=" width: 350px;">
  </div>

  <div style=" margin-left: 30px; display: flex; align-items: center; ">
    <h3>音频：</h3>
    <div style="margin-top: 0px; display: flex; align-items: center;">
      <app-audio-recorder [audioUrl]="item.audio_url"
        (audioUploaded)="onItemAudioUploadSuccess($event, item, 'audio_url')">
      </app-audio-recorder>
    </div>
  </div>


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

    <div style="margin: 10px; display: flex;">
      <h4 style="width: 70px;">背景图：</h4>

      <div style="width: 300px;">
        <app-upload-image-with-preview [picUrl]="item.pic_url"
          (imageUploaded)="onItemImgUploadSuccess($event, item, 'pic_url')">
        </app-upload-image-with-preview>
      </div>

    </div>


    <div *ngFor="let img of item.picArr; let i = index" style="margin: 10px; display: flex;">
      <span style="width: 70px;">涂层-{{i+1}}：</span>

      <div style="width: 300px;">
        <app-upload-image-with-preview [picUrl]="img.pic_url"
          (imageUploaded)="onItemImgUploadSuccess($event, img, 'pic_url')">
        </app-upload-image-with-preview>
      </div>


      <button style="margin-left: 0px;" nz-button nzType="danger" (click)="deleteOptionBtnClick(item.picArr, i)">
        x
      </button>

      <div style=" margin-left: 50px; margin-top: 90px;">
        <span>颜色：</span>
        <a nz-dropdown [nzDropdownMenu]="menu">
         {{img?.colorData?.value || '选择颜色'}}
          <i nz-icon nzType="down"></i>
        </a>
        <nz-dropdown-menu #menu="nzDropdownMenu">
          <ul nz-menu nzSelectable>

            <div  nz-menu-item *ngFor="let color of colorArr;" align="center" (click)="clickColor(img,color)">
              {{color.value}}
            </div>
      
      

            <!-- <li nz-menu-item>1st menu item</li>
            
            <li nz-menu-item>1st menu item</li>
            <li nz-menu-item>2nd menu item</li>
            <li nz-menu-item>3rd menu item</li> -->
          </ul>
        </nz-dropdown-menu>
      </div>
      

    </div>

     <div style="margin-top: 30px">
      <button nz-button nzType="dashed" (click)="addColorImg()" style="width: 150px; height: 50px;">
        <i nz-icon nzType="plus-circle" nzTheme="outline"></i>
        添加涂色层
      </button>
    </div>
  </div>


  <div>
    <h4> 序号标注： </h4>
    <app-custom-hot-zone
    [bgItem]="item.bgItem"
    [hotZoneItemArr]="item.hotZoneItemArr"
    [customTypeGroupArr]="customTypeGroupArr"
    (save)="saveHotZone(item, $event)"
    >
    </app-custom-hot-zone>

  </div>  


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

 

</div>