import { _YtHeader } from '../components/_YtHeader';
import { IncreaseBabyInfoViewModel } from '../viewModel/IncreaseBabyInfoViewModel';
import { BasicType } from 'basic';

@ComponentV2
struct BabyInfoPage {
  @Local vm: IncreaseBabyInfoViewModel = new IncreaseBabyInfoViewModel(false);

  build() {
    NavDestination() {
      Column() {
        Column(){
          _YtHeader({
              _onBackPress: () => { this.vm._onBackPressed() },
              rightComp: () => { this.rightComp() },
              title: "宝宝信息",
            })

          Row(){
            Row({space: 16}){
              Image(this.vm.babyInfo.avatarUrl ?? $r('app.media.default_img'))
                .width(60)
                .aspectRatio(1)
                .borderRadius(14)
                .onClick(() => { this.vm.updateAvatar() })

              Text(this.vm.babyInfo.days)
            }
            .alignItems(VerticalAlign.Center)
          }
          .width("100%")
          .justifyContent(FlexAlign.Start)
          .padding({top: 25, bottom: 25})
        }
        .width("100%")
        .height(189)
        .padding({ top: this.vm.safeTop, left: 24, right: 24 })

        Column(){
          ForEach(this.vm.forEachData, (item: BasicType, index: number) => {
            Column({space: 16}){
              if (item.date === 'birthDate') {
                InputItem({item: item, value: this.vm.babyInfo.birthday})
              } else if (item.date === 'name') {
                InputItem({item: item, value: this.vm.babyInfo.name})
              } else if (item.date === 'gender') {
                InputItem({item: item, value: this.vm.babyInfo.gender === undefined ? undefined : (this.vm.babyInfo.gender == 1 ? '男' : '女') })
              }
            }
            .id(item.id)
            .width('100%')
            .padding({bottom: 32})
            .justifyContent(FlexAlign.Center)
            .alignItems(HorizontalAlign.Start)
            .alignRules({
              top: { anchor: index == 0 ? 'title' : this.vm.forEachData[index - 1].id, align: VerticalAlign.Bottom },
              left: { anchor: index == 0 ? 'title' : this.vm.forEachData[index - 1].id, align: HorizontalAlign.Start }
            })
          })
        }
        .width('100%')
        .layoutWeight(1)
        .backgroundColor(Color.White)
        .justifyContent(FlexAlign.Start)
        .alignItems(HorizontalAlign.Center)
        .padding({left: 32, right: 32, top: 24})
        .borderRadius({topLeft: 10, topRight: 10})
      }
      .width('100%')
      .height('100%')
      .backgroundColor('#CCEBA8')
      .alignItems(HorizontalAlign.Center)
      .justifyContent(FlexAlign.Start)
    }
    .hideTitleBar(true)
  }

  @Builder
  rightComp(){
    Image($r('app.media.icon_ashBin'))
      .width(20)
      .aspectRatio(1)
      .onClick(() => { this.vm.deleteBaby() })
  }

}

@Builder
function BabyInfoPageBuilder() {
  BabyInfoPage()
}

// 单个输入框
@ComponentV2
struct InputItem{
  @Require @Param item: BasicType
  @Require @Param value: string | undefined

  build(){
    Row(){
      Text(this.item.text)
        .fontSize(14)
        .fontColor('#4F4F4F')

      Row({space: 10}){
        if(this.value) {
          Text(this.value)
            .fontSize(16)
            .fontColor(Color.Black)
        } else {
          Text(this.item.message)
            .fontSize(16)
            .fontColor('rgba(0, 0, 0, 0.6)')
        }
        Image($r('[basic].media.ic_back'))
          .width(10)
          .height(20)
          .rotate({angle: 180})
      }
    }
    .height(48)
    .padding(16)
    .width("100%")
    .borderRadius(8)
    .backgroundColor('#F6F6F6')
    .alignItems(VerticalAlign.Center)
    .justifyContent(FlexAlign.SpaceBetween)
    .border({ width: 0 })
    .onClick(this.item.click)
  }
}