/*
 * 云台角度尺组件
 * EZOpenSDK
 *
 * Created by junecheng on 2024/10/16.
 * Copyright (c) 2024年 Ezviz. All rights reserved.
 */
import { EZDevicePtzAngleInfo, EZPTZCommand } from '@ohos/EZOpenSDK'

@Component
export default struct PTZAngleView {
  // 云台角度尺对象
  @Prop ptzAngele?: EZDevicePtzAngleInfo | null
  // 云台转动方向，Left | Right 时显示水平角度尺，Up | Down 时显示垂直角度尺，-1时隐藏
  @Prop touchDownPtzCommand: EZPTZCommand | -1

  build() {
    RelativeContainer() {
      // 水平角度尺
      Slider({
        value: this.ptzAngele?.horizontalCurrentAngle,
        min: this.ptzAngele?.horizontalStartAngle,
        max: this.ptzAngele?.horizontalEndAngle,
        style: SliderStyle.OutSet,
      })
        .blockStyle({ type: SliderBlockType.DEFAULT })
        .blockSize({ width: 10, height: 10 })
        .width(100)
        .height(10)
        .blockColor($r('app.color.ez_text_blue'))
        .trackColor(Color.White)
        .selectedColor(Color.White)
        .showTips(false)
        .enabled(false)
        .alignRules({
          middle: { 'anchor': '__container__', align: HorizontalAlign.Center },
          bottom: { 'anchor': '__container__', align: VerticalAlign.Bottom }
        })
        .margin({ bottom: 10 })
        .visibility((this.touchDownPtzCommand == EZPTZCommand.EZPTZCommandLeft ||
          this.touchDownPtzCommand == EZPTZCommand.EZPTZCommandRight) ? Visibility.Visible : Visibility.Hidden)
      // 垂直角度尺
      Slider({
        value: this.ptzAngele?.verticalCurrentAngle,
        min: this.ptzAngele?.verticalStartAngle,
        max: this.ptzAngele?.verticalEndAngle,
        style: SliderStyle.OutSet,
        direction: Axis.Vertical,
        reverse: true
      })
        .blockSize({ width: 10, height: 10 })
        .width(10)
        .height(100)
        .blockColor($r('app.color.ez_text_blue'))
        .trackColor(Color.White)
        .selectedColor(Color.White)
        .showTips(false)
        .enabled(false)
        .alignRules({
          center: { 'anchor': '__container__', align: VerticalAlign.Center },
          left: { 'anchor': '__container__', align: HorizontalAlign.Start }
        })
        .margin({ left: 10 })
        .visibility((this.touchDownPtzCommand == EZPTZCommand.EZPTZCommandUp ||
          this.touchDownPtzCommand == EZPTZCommand.EZPTZCommandDown) ? Visibility.Visible : Visibility.Hidden)
    }
    .alignRules({
      top: { 'anchor': 'realplay_view', align: VerticalAlign.Top },
      bottom: { 'anchor': 'realplay_view', align: VerticalAlign.Bottom },
      left: { 'anchor': 'realplay_view', align: HorizontalAlign.Start },
      right: { 'anchor': 'realplay_view', align: HorizontalAlign.End }
    })
    .backgroundColor(Color.Transparent)
    .visibility(this.touchDownPtzCommand != -1 ? Visibility.Visible : Visibility.Hidden)
  }
}