
<div class="model-content">

  <div style="position: fixed; top: 0px; left: 0px; right: 0px; z-index: 1000; background-color: #F2F6FC; padding: 20px;">
    <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 *ngIf="item.bg_audio_url">
        <button (click)="togglePlayPause()" class="play-pause-button">
          {{ isPlaying ? '暂停' : '播放' }}
        </button>
      </div>
      <div class="current-time-display">当前播放时间: [<span class="time-text">{{ currentTime }}</span>]毫秒</div>
      <button (click)="addHotZone()" class="add-page-button">
        <i nz-icon nzType="plus-circle" nzTheme="outline"></i>
        添加页面
      </button>
    </div>
    <div class="waveform-container">
      <div id="waveform"></div>
      <nz-spin *ngIf="isLoading">
        <div class="loading-text">
          <i nz-icon nzType="loading"></i>
          <span>音频加载中...</span>
        </div>
      </nz-spin>
    </div>
    <div class="zoom-controls">
      <button (click)="zoomWaveform(true)" class="zoom-button">
        <i nz-icon nzType="zoom-in" nzTheme="outline"></i>
      </button>
      <button (click)="zoomWaveform(false)" class="zoom-button">
        <i nz-icon nzType="zoom-out" 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>
