
<div class="model-content">

  <div style="position: fixed; top: 20px; left: 20px; right: 20px; z-index: 1000; background-color: #fff; padding: 20px; border-radius: 10px;">
    <div style="display: flex; align-items: center;">
      <h4> 音频添加: </h4>
      <app-audio-recorder
        style="margin-left: 20px"
        [audioUrl]="item.bg_audio_url"
        (audioUploaded)="onAudioUploadSuccess($event, 'bg_audio_url', item)">
      </app-audio-recorder>
      <div class="current-time-display">当前播放时间: [<span class="time-text">{{ currentTime }}</span>]毫秒</div>
    </div>
    <div id="waveform"></div>
    <div *ngIf="item.bg_audio_url">
      <button (click)="togglePlayPause()" class="play-pause-button">
        {{ isPlaying ? '暂停' : '播放' }}
      </button>
      <button (click)="addHotZone()" class="play-pause-button">
        <i nz-icon nzType="plus-circle" nzTheme="outline"></i>
        添加页面
      </button>
    </div>
  </div>
  
  <div style="height: 300px;">&nbsp;</div>

  <div *ngFor="let hotZone of hotZones; let i = index" class="hot-zone-container">
    <button (click)="toggleCollapse(i)" class="toggle-button">
      第【{{i+1}}】页 &nbsp;&nbsp;&nbsp; <span style="color: #04f1dd;">{{ isCollapsed[i] ? '点击展开' : '点击折叠' }}</span>
    </button>
    <button (click)="deleteHotZone(i)" class="delete-button">
      X
    </button>
    <div *ngIf="!isCollapsed[i]" class="hot-zone-content">
      <app-custom-hot-zone
      [bgItem]="hotZone.bgItem"
      [hotZoneItemArr]="hotZone.hotZoneItemArr"
      (save)="saveHotZone($event, i)"
      >
      </app-custom-hot-zone>
    </div>
  </div>
</div>
