/*
 * 底部弹框
 * EZOpenSDK
 *
 * Created by junecheng on 2024/3/6.
 * Copyright (c) 2024年 Ezviz. All rights reserved.
 */

/*
 * 列表弹窗
 */
@CustomDialog
@Preview
export default struct SheetDialog {
  // 选择项目
  titles: ResourceStr[] = []
  // 头部标题
  headerTitle ?: ResourceStr = ''
  // 选择项目文本颜色
  titleColor?: ResourceColor = $r('app.color.ez_text_blue')
  // 取消按钮文本
  cancelTitle?: ResourceStr = $r('app.string.dialog_cancel')
  // 选项文本高度
  titleHeight?: number = 50
  // 选项选择事件
  confirmClick?: (index: number) => void
  // 取消事件
  cancelClick?: () => void
  controller: CustomDialogController
  // 选中的条目
  @State selectIndex?:number=-1
  //选中条目颜色
  selectItemBgColor?: ResourceColor = $r('app.color.157bb8')

  build() {
    Column() {
      Text(this.headerTitle)
        .width('100%')
        .height(40)
        .backgroundColor(Color.White)
        .visibility(this.headerTitle ? Visibility.Visible : Visibility.Hidden)
        .textAlign(TextAlign.Center)
        .borderRadius({ topLeft: 10, topRight: 10 })
        .fontColor(Color.Gray)
        .fontSize(12)
      Divider()
      List() {
        ForEach(this.titles, (item: string, index) => {
          ListItem() {
            Column() {
              Text(item)
                .fontColor(this.titleColor)
                .textAlign(TextAlign.Center)
                .onClick(() => {
                  this.selectIndex=index
                  this.controller.close()
                  if (this.confirmClick) {
                    this.confirmClick(index)
                  }
                })
                .width('100%')
                .height(this.titleHeight)
              Divider()
            }.backgroundColor(index===this.selectIndex?this.selectItemBgColor:Color.White)
          }
        }, (item: string) => {
          return JSON.stringify(item)
        })
      }.backgroundColor(Color.White).borderRadius(this.headerTitle ? { bottomLeft: 10, bottomRight: 10 } : 10)

      Text(this.cancelTitle)
        .onClick(() => {
          this.controller.close()
          if (this.cancelClick) {
            this.cancelClick()
          }
        })
        .backgroundColor(Color.White)
        .fontColor($r('app.color.ez_text_blue'))
        .width('100%')
        .height(this.titleHeight)
        .margin({ top: 8 })
        .textAlign(TextAlign.Center)
        .borderRadius(10)
    }.width('95%')
  }
}