/*
 * 设备列表导航
 * EZOpenSDK
 *
 * Created by junecheng on 2024/3/6.
 * Copyright (c) 2024年 Ezviz. All rights reserved.
 */
import EZSegmentView from '../../../global/view/EZSegmentView'

@Component
export default struct EZDeviceListNav {
  // 选中项
  @Link selectedIndex: number
  // Segment点击事件
  segmentClickAction?: (index: number) => void
  // 退出事件
  exitAction?: () => void
  // 功能测试事件
  testAction?: () => void
  // 多通道事件
  multiChannelAction?: () => void
  // 配网事件
  addDeviceAction?: () => void
  // 按钮宽度
  mBtuttonWidth?: Length = 24

  build() {
    Column() {
      Row() {
        Image($r('app.media.ic_exit'))
          .width(this.mBtuttonWidth).height(this.mBtuttonWidth)
          .margin({ left: 16 })
          .onClick(() => {
            if (this.exitAction) {
              this.exitAction()
            }
          })
        Image($r('app.media.ic_more'))
          .width(this.mBtuttonWidth).height(this.mBtuttonWidth)
          .onClick(() => {
            if (this.testAction) {
              this.testAction()
            }
          })
        EZSegmentView({
          titles: [$r('app.string.device_mine'), $r('app.string.device_shared')],
          selectedIndex: this.selectedIndex,
          kBackgroundColor: $r('app.color.message_cell_header_color'),
          mWidth: 120,
          mHeight: 32,
          clickAction: (index => {
            if (this.segmentClickAction) {
              this.segmentClickAction(index)
            }
          })
        })
        Image($r('app.media.ic_multi_screen_preview'))
          .width(this.mBtuttonWidth).height(this.mBtuttonWidth)
          .onClick(() => {
            if (this.multiChannelAction) {
              this.multiChannelAction()
            }
          })
        Image($r('app.media.ic_add'))
          .width(this.mBtuttonWidth).height(this.mBtuttonWidth)
          .margin({ right: 16 })
          .onClick(() => {
            if (this.addDeviceAction) {
              this.addDeviceAction()
            }
          })
      }.width('100%').height($r('app.float.navbar_height'))
      .backgroundColor(Color.White)
      .justifyContent(FlexAlign.SpaceBetween)

      Divider()
    }
  }
}