/*
 * SegmentView
 * EZOpenSDK
 *
 * Created by junecheng on 2024/3/6.
 * Copyright (c) 2024年 Ezviz. All rights reserved.
 */
@Component
export default struct EZSegmentView {
  mWidth: Length = 0
  mHeight: Length = 0
  // title选项
  titles: Array<string | Resource> = []
  // 选中项
  @Link selectedIndex?: number
  // 点击事件
  clickAction?: (index: number) => void
  // 选中项背景颜色
  selectedItemBackgroundColor?: Color | Resource = Color.White
  // 选中项文字颜色
  selectedItemTextColor?: Color | Resource = Color.Black
  // 未选中项背景颜色
  normalItemBackgroundColor?: Color | Resource = Color.Transparent
  // 组件背景颜色
  kBackgroundColor?: Color | Resource = Color.Gray

  build() {
    Row() {
      ForEach(this.titles, (title: string | Resource, index) => {
        Text(title)
          .textAlign(TextAlign.Center)
          .borderRadius(8)
          .borderRadius(8)
          .textAlign(TextAlign.Center)
          .width(`${100 / this.titles.length}%`)
          .height('100%')
          .backgroundColor(this.selectedIndex == index ? this.selectedItemBackgroundColor : this.normalItemBackgroundColor)
          .fontColor(this.selectedItemTextColor)
          .fontSize(12)
          .fontWeight(this.selectedIndex == index ? FontWeight.Medium : FontWeight.Normal)
          .onClick(() => {
            this.selectedIndex = index
            if (this.clickAction) {
              this.clickAction(index)
            }
          })
      })
    }
    .backgroundColor(this.kBackgroundColor)
    .padding(2)
    .borderRadius(8)
    .width(this.mWidth)
    .height(this.mHeight)
  }
}