/*
 * 清晰度切换视图
 * EZOpenSDK
 *
 * Created by junecheng on 2024/5/20.
 * Copyright (c) 2024年 Ezviz. All rights reserved.
 */
import { EZVideoLevelType } from '@ohos/EZOpenSDK'

@Preview
@Component
export default struct QualityView {
  @Link isQualityViewShow: boolean
  onQualityClick?: (videoLevelType: EZVideoLevelType) => void

  build() {
    Stack() {
      Image($r('app.media.picture_bg')).width(70).height(105)
      Column() {
        Text('流畅')
          .fontSize(14)
          .fontColor($r('app.color.C6C6C8'))
          .height(25)
          .width('100%')
          .textAlign(TextAlign.Center)
          .onClick(() => {
            if (this.onQualityClick) {
              this.onQualityClick(EZVideoLevelType.EZVideoLevelLow)
            }
          })
          .margin({ bottom: 5 })
        Text('均衡')
          .fontSize(14)
          .fontColor($r('app.color.C6C6C8'))
          .height(25)
          .width('100%')
          .textAlign(TextAlign.Center)
          .onClick(() => {
            if (this.onQualityClick) {
              this.onQualityClick(EZVideoLevelType.EZVideoLevelMiddle)
            }
          })
          .margin({ bottom: 5 })
        Text('高清')
          .fontSize(14)
          .fontColor($r('app.color.C6C6C8'))
          .height(25)
          .width('100%')
          .textAlign(TextAlign.Center)
          .onClick(() => {
            if (this.onQualityClick) {
              this.onQualityClick(EZVideoLevelType.EZVideoLevelHigh)
            }
          })
          .margin({ bottom: 5 })
      }
    }
    .width(70)
    .margin({ left: 140 })
    .id('quality_view')
    .alignRules({
      left: { 'anchor': '__container__', align: HorizontalAlign.Start },
      bottom: { 'anchor': 'bottomview_toolbar', align: VerticalAlign.Top }
    })
    .visibility(this.isQualityViewShow ? Visibility.Visible : Visibility.Hidden)
  }
}