/*
 * 回放进度条
 * EZOpenSDK
 *
 * Created by junecheng on 2024/5/31.
 * Copyright (c) 2024年 Ezviz. All rights reserved.
 */
import EZTimeUtil from '../../../utils/EZTimeUtil'
import GlobalKit from '../../../global/GlobalKit'

@Component
export default struct PlaybackSlider {
  // 播放时间
  @Prop playTime: string
  // 录像回放总时长
  @Prop duringSeconds: number
  // 录像回放总时长
  @Prop duringTime: string
  // 进度条进度
  @Prop sliderValue: number
  // 回放进度条区域是否可见
  @Prop isSliderAreaShow: boolean = false
  // 进度条拖动监听（滑动结束后回调）
  onSliderChange?: (value: number) => void

  build() {
    Row() {
      Row() {
        if (GlobalKit.isJCTest) {
          Text(this.playTime).fontColor(Color.White).fontSize(12).margin({ left: 5 })
        }
        Slider({ value: this.sliderValue })
          .trackColor(Color.Gray)
          .flexShrink(1)
          .onChange(async (value: number, mode: SliderChangeMode) => {
            // 刷新播放时长
            let secondsAfterStartTime = this.duringSeconds * (value / 100)
            this.playTime = EZTimeUtil.formatSeconds(secondsAfterStartTime)
            // 拖动结束后回调
            if (mode == SliderChangeMode.End) {
              this.sliderValue = value
              if (this.onSliderChange) {
                await this.onSliderChange(value)
              }
            }
          })
        Text(this.duringTime).fontColor(Color.White).fontSize(12).margin({ right: 5 })
      }.width('100%').height(25)
      .visibility(this.isSliderAreaShow ? Visibility.Visible : Visibility.Hidden)
    }
    .width('100%')
    .height(25)
    .backgroundColor(Color.Black)
    .id("playback_slider")
    .alignRules({
      top: { 'anchor': 'playback_view', align: VerticalAlign.Bottom }
    })

  }
}