@Component
export default struct PreviewList {
  // 数据源
  @Prop items: ListItemData[] = []

  build(): void {
    Column() {
      List({ space: 5 }) {
        ForEach(this.items, (item: ListItemData, index: number) => {
          ListItem() {
            Row() {
              // 左边主标题和副标题
              Column() {
                Text((index < 9 ? `0${index + 1}` : `${index + 1}`) + ` - ${item.mainTitle}`)
                  .fontSize(15)//.fontWeight(FontWeight.Bold)
                  .textAlign(TextAlign.Start)
                  .align(Alignment.Center)
                  .width(`100%`)

                Text(item.subTitle)
                  .fontSize(14)
                  .textAlign(TextAlign.Start)
                  .padding({ top: 2 })
                  .fontColor(0x888888)
                  .width(`100%`)
                  .visibility(item.subTitle == `` ? Visibility.None : Visibility.Visible)
              }
              .align(Alignment.Start)
              .padding({ left: 15 })
              .width(`85%`) // 主标题和副标题占据主布局宽度

              Row() {
                if (!item.onSwitchClick) { // 没有开关事件，右侧显示箭头图标
                  Image($r('app.media.ic_arrow_right'))
                    .width(10)
                    .height(10)
                    .margin({ left: 5 })
                } else { // 有开关事件，右侧显示Toggle开关
                  Toggle({ type: ToggleType.Switch, isOn: item.isSwitchOn })
                    .selectedColor($r('app.color.ez_text_blue'))
                    .onClick(() => {
                      item.isSwitchOn = !item.isSwitchOn
                      if (item.onSwitchClick) {
                        item.onSwitchClick(item.isSwitchOn)
                      }
                    })
                }
              }.width(`15%`).padding({ right: 15 }).justifyContent(FlexAlign.End)
            }
            .width('100%')
            .height(50)
            .onClick((): void => {
              if (item.onItemClick) {
                item.onItemClick() // 点击时触发各自的动作
              }
            })
            .backgroundColor(0xFFFFFF)
          }
        })
      }
      .listDirection(Axis.Vertical)
      .divider({
        strokeWidth: 0,
        color: 0xDDDDDD,
        startMargin: 15,
        endMargin: 15
      }) // 分割线
      .scrollBar(BarState.Off) // 关闭滚动条
      .width('100%')
    }
    .width('100%')
    .height('100%')
    .backgroundColor(0xF5F5F5) // 列表背景色
    .padding({ top: 0, bottom: 60 })
  }
}

export interface ListItemData {
  mainTitle: string
  subTitle?: string
  onItemClick?: () => void // 每个条目的点击回调函数
  isSwitchOn?: boolean
  onSwitchClick?: (on: boolean) => void // 每个条目中开关点击回调函数
}