YT_BabyFoodDiary/commons/basic/src/main/ets/components/ChatList.ets

import { BasicType, MessageType, Role } from '../models'
import { BreakPointType, yTBreakPoint } from '../utils/YTBreakPoint'

@Component
export struct ChatList {
  @Prop chatList: MessageType[] = [
    {
      header: $r('app.media.ibest_icon_star'),
      text: '喜欢不是一件浪漫的事',
      role: Role.USER,
    },
    {
      header: $r('app.media.ibest_icon_star_o'),
      text: '那是什么？',
      role: Role.OTHER,
    },
    {
      header: $r('app.media.ibest_icon_star'),
      text: '喜欢你才是',
      role: Role.USER,
    },

  ]
  @Prop haveMoreHistory: boolean = true
  @Prop promptArr: BasicType<undefined>[] = [
    {
      text: '每日读书打卡'
    },
    {
      text: '励志正能量'
    },
    {
      text: '公司团建'
    }
  ]
  @StorageProp(yTBreakPoint.KEY) bp: string = 'sm'
  @State isLoading: boolean = false

  build() {
    List({ space: 24 }) {
      ForEach(this.chatList, (item: MessageType, index) => {
        ListItem() {
          if (item.role == Role.USER) {
            Row({ space: 16 }) {
              Text(item.text)
                .padding(12)
                .backgroundColor('#FFF0FBFF')
                .constraintSize({ maxWidth: '70%' })
                .borderRadius(8)
              Image(item.header)
                .width(40)
                .aspectRatio(1)
            }
            .width('100%')
            .margin({ top: index == 0 ? 20 : 0, bottom: index == this.chatList.length - 1 ? 20 : 0 })
            .alignItems(VerticalAlign.Bottom)
            .justifyContent(FlexAlign.End)

          } else if (item.role == Role.OTHER) {
            Row({ space: 16 }) {
              Image(item.header)
                .width(40)
                .aspectRatio(1)

              Text(item.text)
                .padding(12)
                .constraintSize({ maxWidth: '70%' })
                .borderRadius(8)
                .backgroundColor('#FFF0FBFF')
            }
            .width('100%')
            .margin({ top: index == 0 ? 20 : 0, bottom: index == this.chatList.length - 1 ? 20 : 0 })
            .alignItems(VerticalAlign.Bottom)
            .justifyContent(FlexAlign.Start)
          } else {

          }

        }
      })
    }
    .width('100%')
    .height('100%')
    .scrollBar(BarState.Off)

  }

  @Builder
  card() {
    ListItem() {
      Column() {
        if (this.haveMoreHistory) {
          Row() {
            Text('下拉查看历史消息')
              .fontWeight(500)
              .fontSize(10)
              .fontColor('#80595959')
          }
          .height(38)
          .width('100%')
          .justifyContent(FlexAlign.Center)
        }

        Column() {
          Text('输入你想生成的文案主题，一键生成所需文案，轻松高效不费脑，例如：')
            .fontColor('#E6595959')
            .fontWeight(500)
            .fontSize(14)
            .margin({ bottom: 10 })
          ForEach(this.promptArr, (item: BasicType<undefined>, index) => {
            Text(item.text)
              .fontColor('#E6595959')
              .fontSize(10)
              .fontWeight(600)
              .backgroundColor('#FFF7F9FA')
              .height(30)
              .borderRadius(4)
              .width('100%')
              .padding({ left: 8 })
              .textAlign(new BreakPointType<TextAlign>({
                sm: TextAlign.Start,
                md: TextAlign.Center,

              }
              ).getValue(this.bp))
              .margin({ bottom: this.promptArr.length - 1 == index ? 0 : 8 })
              .onClick(() => {

              })
          })
        }
        .width('100%')
        .backgroundColor(Color.White)
        .borderRadius(8)
        .padding(12)
        .alignItems(HorizontalAlign.Start)
        .margin({ bottom: 10 })
      }
    }
  }
}