/*
 * 录像录制计时视图
 * EZOpenSDK
 *
 * Created by junecheng on 2024/5/22.
 * Copyright (c) 2024年 Ezviz. All rights reserved.
 */
@Component
export default struct LocalRecordView {
  // 录制计时视图是否显示
  @Prop isLocalRecordViewShow: boolean
  // 录制小圆点是否显示
  @Prop isLocalRecordCircleShow: boolean
  // 计时时间
  @Prop localRecordDuration: string

  build() {
    Stack() {
      Text().width('100%').height('100%').backgroundColor(Color.Black).opacity(0.5)
      Row() {
        Text()
          .width(8)
          .aspectRatio(1)
          .backgroundColor(0xff6000)
          .borderRadius(4)
          .visibility(this.isLocalRecordCircleShow ? Visibility.Visible : Visibility.Hidden)
          .margin({ left: 10 })
        Text(this.localRecordDuration)
          .fontColor(Color.White)
          .fontSize(14)
          .margin({ right: 10 })
          .textAlign(TextAlign.End)
          .layoutWeight(1)
      }
      .width('100%')
      .height('100%')
      .borderRadius(12)
      .borderColor(Color.White)
      .borderWidth(1.5)
    }
    .width(80)
    .height(24)
    .borderRadius(12)
    .margin({ top: 10 })
    .visibility(this.isLocalRecordViewShow ? Visibility.Visible : Visibility.Hidden)
    .id('local_record_view')
    .alignRules({
      top: { 'anchor': 'realplay_view', align: VerticalAlign.Top },
      middle: { 'anchor': 'realplay_view', align: HorizontalAlign.Center }
    })
  }
}