TTMusic/entry/src/main/ets/widget/pages/PlayerWidgetMedium.ets

/**
 * 中等尺寸播放器卡片 (4x2)
 * 显示完整信息、播放控制和进度条
 */
@Entry
@Component
struct PlayerWidgetMedium {
  @LocalStorageProp('isPlaying') isPlaying: boolean = false;
  @LocalStorageProp('songTitle') songTitle: string = '暂无播放';
  @LocalStorageProp('songArtist') songArtist: string = '未知艺术家';
  @LocalStorageProp('currentTime') currentTime: string = '00:00';
  @LocalStorageProp('totalTime') totalTime: string = '00:00';
  @LocalStorageProp('progressPercentage') progressPercentage: number = 0;
  @LocalStorageProp('hasNext') hasNext: boolean = false;
  @LocalStorageProp('hasPrevious') hasPrevious: boolean = false;
  @LocalStorageProp('showProgress') showProgress: boolean = true;

  build() {
    Column() {
      // 歌曲信息区域
      Row() {
        Column() {
          Text(this.songTitle)
            .fontSize(16)
            .fontColor('#E6000000')
            .fontWeight(FontWeight.Medium)
            .maxLines(1)
            .textOverflow({ overflow: TextOverflow.Ellipsis })
            .width('100%')
            .textAlign(TextAlign.Start)

          Text(this.songArtist)
            .fontSize(12)
            .fontColor('#99000000')
            .fontWeight(FontWeight.Normal)
            .maxLines(1)
            .textOverflow({ overflow: TextOverflow.Ellipsis })
            .width('100%')
            .textAlign(TextAlign.Start)
            .margin({ top: 2 })
        }
        .layoutWeight(1)
        .alignItems(HorizontalAlign.Start)
        .onClick(() => {
          this.handleControlAction('open_player');
        })
      }
      .width('100%')
      .margin({ bottom: 12 })

      // 播放控制区域
      Row() {
        // 上一首按钮
        Button() {
          Image($r('app.media.ic_previous2'))
            .width(18)
            .height(18)
            .fillColor(this.hasPrevious ? '#FF007DFF' : '#66000000')
        }
        .width(36)
        .height(36)
        .backgroundColor(Color.Transparent)
        .enabled(this.hasPrevious)
        .onClick(() => {
          this.handleControlAction('prev_song');
        })

        // 播放/暂停按钮
        Button() {
          Image(this.isPlaying ? $r('app.media.hm_pause') : $r('app.media.hm_play'))
            .width(24)
            .height(24)
            .fillColor('#FFFFFF')
        }
        .width(44)
        .height(44)
        .backgroundColor('#FF007DFF')
        .borderRadius(22)
        .margin({ left: 12, right: 12 })
        .onClick(() => {
          this.handleControlAction('play_pause');
        })

        // 下一首按钮
        Button() {
          Image($r('app.media.ic_next2'))
            .width(18)
            .height(18)
            .fillColor(this.hasNext ? '#FF007DFF' : '#66000000')
        }
        .width(36)
        .height(36)
        .backgroundColor(Color.Transparent)
        .enabled(this.hasNext)
        .onClick(() => {
          this.handleControlAction('next_song');
        })
      }
      .justifyContent(FlexAlign.Center)
      .width('100%')
      .margin({ bottom: this.showProgress ? 8 : 0 })

      // 播放进度区域
      if (this.showProgress) {
        Column() {
          // 进度条
          Row() {
            Progress({
              value: this.progressPercentage,
              total: 100,
              type: ProgressType.Linear
            })
              .width('100%')
              .height(4)
              .color('#FF007DFF')
              .backgroundColor('#1A007DFF')
              .onClick((event) => {
                this.handleProgressClick(event);
              })
          }
          .width('100%')
          .margin({ bottom: 4 })

          // 时间显示
          Row() {
            Text(this.currentTime)
              .fontSize(10)
              .fontColor('#99000000')

            Blank()

            Text(this.totalTime)
              .fontSize(10)
              .fontColor('#99000000')
          }
          .width('100%')
        }
        .width('100%')
      }
    }
    .width('100%')
    .height('100%')
    .padding(16)
    .backgroundColor('#FFFFFF')
    .borderRadius(12)
    .alignItems(HorizontalAlign.Start)
    .justifyContent(FlexAlign.SpaceBetween)
  }

  /**
   * 处理控制操作
   */
  private handleControlAction(action: string): void {
    postCardAction(this, {
      action: action,
      params: {}
    });
  }

  /**
   * 处理进度条点击
   */
  private handleProgressClick(event: ClickEvent): void {
    // 计算点击位置对应的播放进度
    const clickX = event.x;
    const progressWidth = event.target.area.width as number;
    const percentage = (clickX / progressWidth) * 100;
    
    postCardAction(this, {
      action: 'seek_to',
      params: {
        percentage: percentage
      }
    });
  }
}