import { _YtHeader } from '../components/YtComp/_YtHeader';
import { IncreaseStudentPageViewModel } from '../viewModel/IncreaseStudentPage';
import { cert } from '@kit.DeviceCertificateKit';
import { IncreaseStudentPageModel } from '../model/RouterModel';

// 添加学生信息页面
@ComponentV2
struct IncreaseStudentPage {
  @Local vm: IncreaseStudentPageViewModel = new IncreaseStudentPageViewModel();

  @Param name: string = ''
  @Param gender: string = ''

  aboutToAppear(): void {
    this.vm.name = this.name
    this.vm.gender = this.gender
  }

  build() {
    NavDestination() {
      Column({space: 25}) {
        _YtHeader({
          title: this.vm.title,
          _onBackPress: () => { this.vm._onBackPressed() },
          _padding: 0
        })

        Column(){
          Column(){
            Row(){
              Text('姓名')

              TextInput({text: $$this.vm.name, placeholder: '请输入姓名'})
                .width(100)
                .border(null)
                .fontSize(14)
                .padding({ left: 10 })
                .textAlign(TextAlign.End)
                .placeholderColor('#BFBFBF')
                .placeholderFont({ size: 14 })
                .backgroundColor(Color.Transparent)
            }
            .width("100%")
            .padding({top: 20, bottom: 20})
            .justifyContent(FlexAlign.SpaceBetween)

            Divider()
              .height(1)
              .width("100%")
              .backgroundColor('#F6F6F6')

            Row(){
              Text('性别')

              Row({space:5}){
                Text(){
                  if(this.vm.gender) {
                    Span(this.vm.gender)
                  } else {
                    Span('请选择')
                      .fontColor('#BFBFBF')
                  }
                }
                .fontSize(14)

                Image($r('[basic].media.ic_back'))
                  .width(20)
                  .rotate({angle: 270})
                  .aspectRatio(1)
              }
              .bindMenu(this.genderEnum)
            }
            .width("100%")
            .padding({top: 20, bottom: 20})
            .justifyContent(FlexAlign.SpaceBetween)
          }
          .width('98%')
          .borderRadius(15)
          .backgroundColor(Color.White)
          .padding({left: 18, right: 18})
          .shadow({ radius: 6, color: '#1a000000' })

          Row({space: 31}){
            Text('取消')
              .borderRadius(10)
              .backgroundColor('#BFBFBF')
              .padding({ left: 50, right: 50, top: 15, bottom: 15})
              .onClick(() => { this.vm._onBackPressed() })

            Text('保存')
              .borderRadius(10)
              .backgroundColor('#7186F9')
              .padding({ left: 50, right: 50, top: 15, bottom: 15})
              .onClick(() => { this.vm._onSave() })
          }
          .width('100%')
          .justifyContent(FlexAlign.Center)
        }
        .width("100%")
        .layoutWeight(1)
        .justifyContent(FlexAlign.SpaceBetween)
        .padding({ bottom: this.vm.safeBottom + 50 })
      }
      .width('100%')
      .height('100%')
      .backgroundColor('#F6F6F6')
      .padding({ left:16, right:16, top: this.vm.safeTop})
      .justifyContent(FlexAlign.Start)
      .alignItems(HorizontalAlign.Center)
    }
    .hideTitleBar(true)
    .onBackPressed(() => { return this.vm._onBackPressed() })
  }

  @Builder
  genderEnum(){
    Column() {
      Row({space:34}){
        Text('男')
        Radio({group: 'sex', value: '男'})
          .checked(this.vm.gender == '男')
          .onChange(() => { this.vm._onGenderChange('男') })
      }
      .padding({ top: 10, bottom: 10})
      .onClick(() => { this.vm._onGenderChange('男') })

      Divider()
        .height(1.5)
        .width("100%")
        .backgroundColor('#F6F6F6')

      Row({space:34}){
        Text('女')
        Radio({group: 'sex', value: '女'})
          .checked(this.vm.gender == '女')
          .onChange(() => { this.vm._onGenderChange('女') })
      }
      .padding({ top: 10, bottom: 10})
      .onClick(() => { this.vm._onGenderChange('女') })
    }
    .width(105)
    .padding({left: 11, right: 11, top: 6, bottom: 6})
  }
}

@Builder
function IncreaseStudentPageBuilder(_1: string, param: IncreaseStudentPageModel) {
  IncreaseStudentPage({ name: param?.name, gender: param?.gender })
}