@Observed
class StudentItem {
  name: string = ''
  age: number = 1
  sid: string = ''
  die: boolean = false
  total: number = 0

  constructor(name: string, age: number) {
    this.sid = 'STU' + parseInt(`${Math.random() * 10000}`).toString().padStart(6, '0')
    this.name = name
    this.age = age
  }
}

@Component
struct TotalCard {
  @ObjectLink student: StudentItem;

  build() {
    Text(this.student.total.toString())
  }
}

@Component
struct SmallStudent {
  @ObjectLink @Watch('studentChange') student: StudentItem;

  studentChange(){
    this.computedTotalSum()
  }
  private computedTotalSum = () => {
    return 0
  }

  build() {
    Row() {
      Stack({ alignContent: Alignment.BottomEnd }) {
        Column() {
          Text(`学号：${this.student.sid}`)
          Text(`姓名：${this.student.name}`)
          Text(`年龄：${this.student.age}`)
        }
        .justifyContent(FlexAlign.Center)
        .alignItems(HorizontalAlign.Start)
        .padding(10)
        .width('50%')
        .height('100%')

        Image(this.student.die ? $r('app.media.icon_die') : $r('app.media.icon_kx'))
          .width(32)
          .offset({
            bottom: 5,
            right: 5
          })
      }


      Column({ space: 5 }) {
        Button('加分')// .disabled(true)
          .height(30)
          .onClick(() => {
            this.student.total += 1
          })
        Button('减分').height(30)
          .onClick(() => {
            this.student.total -= 1
          })
      }
      // .backgroundColor(Color.Yellow)
      .height('100%')
      .justifyContent(FlexAlign.Center).width('20%')

      Text(this.student.total.toString())
        .textAlign(TextAlign.Center)
        .fontSize(60)// .backgroundColor(Color.Pink)
        .width('30%')
        .height('100%')
    }
    // .overflow('hidden')
    .borderRadius(10)
    .backgroundColor(this.student.die ? Color.Gray : Color.White)
    .width('100%')

  }
}

@Component
struct itemEndChild {
  @ObjectLink student: StudentItem
  @State index: number = 0
  private taiZou = (index: number) => {
  }

  build() {
    Column() {

      Button(this.student.die ? '删除' : '开除').height(24)
        .onClick(() => {
          if (this.student.die) {
            this.taiZou(this.index)
          } else {
            this.student.die = true
          }
        })
        .backgroundColor(Color.Red)
    }
    .height('100%')
    .margin({ left: 10 })
    .borderRadius(10)
    .justifyContent(FlexAlign.Center)
    .backgroundColor(Color.White)
  }
}

@Entry
@Component
struct TextLinkObjPage {
  @State studentArray: Array<StudentItem> = [];
  @State totalSum: number = 0
  private computedTotalSum = () => {
    this.totalSum = this.studentArray.reduce((sum: number, item: StudentItem) => {
      if (!item.die) {
        sum += item.total
      }
      return sum
    }, 0)
  }
  private taiZou = (index: number) => {
    this.studentArray.splice(index, 1)
  }

  @Builder
  itemEnd(student: StudentItem, index: number) {
    itemEndChild({
      student: student,
      index: index,
      taiZou: this.taiZou
    })
  }

  aboutToAppear(): void {
    for (let index = 0; index < 5; index++) {
      this.studentArray.push(new StudentItem(`学生${index + 1}`, 6))
    }
    console.log(JSON.stringify(this.studentArray))
  }

  build() {
    Flex({ direction: FlexDirection.Column }) {

      List({ space: 10 }) {
        ForEach(this.studentArray, (student: StudentItem, index: number) => {
          ListItem() {
            SmallStudent({ student: student,computedTotalSum:this.computedTotalSum })
          }.swipeAction({
            end: {
              // index为该ListItem在List中的索引值。
              builder: () => {
                this.itemEnd(student, index)
              },
            }
          }) // 设置侧滑属性.
          .height(80)

        }, (item: StudentItem) => item.sid)
      }.flexGrow(1)
      .padding(10)

      Row({ space: 20 }) {
        Text(`总分:${this.totalSum}`).fontColor(Color.White)
        Button('开除不合格学生').onClick(() => {
          this.studentArray.forEach((item => {
            if (item.total < 0) {
              item.die = true
            }
          }))

        })
      }.backgroundColor(Color.Green)
      .width('100%')
      .height(40)
    }
    .backgroundColor('#bfbfbf')
    .height('100%')
    .width('100%')
  }
}