import { HdNav,PromptActionClass } from '@itcast/basic'
import { ComponentContent } from '@kit.ArkUI';
@Entry
@Preview
@Component
export struct LoginSetInfo{
  scroller: Scroller = new Scroller();
  @Prop
  realName:string=''
  @Prop
  officePhone:string=''
  @Prop
  certificate:string='111111111'
  @State titleName: string = ""
  private ctx: UIContext = this.getUIContext();
  private contentNode: ComponentContent<Object> =
    new ComponentContent(this.ctx, wrapBuilder(buildText),this.titleName);
  aboutToAppear(): void {
    PromptActionClass.setContext(this.ctx);
    PromptActionClass.setContentNode(this.contentNode);
    PromptActionClass.setOptions({ alignment: DialogAlignment.Bottom, offset: { dx: 0, dy: 0 } });
  }
  build() {
    Column() {
      HdNav({ title: '完善个人资料', showRightIcon: false, showLeftIcon: true,showRightText:true,rightText:'保存' })
      Scroll(this.scroller) {
        Column(){
          Row()
          {
            Text('头像').customStyle()
            Blank()
            Image($r('app.media.icon_touxiang_persion_ws'))
              .width(45)
              .height(45)
              .borderRadius(6)
              .margin({right:10})
            Image($r('app.media.arrow_right')).customStyleI()
          }.customStyleR()
          Row()
          {
            Text('姓名').customStyle()
            Blank()
            Text(){
              if(this.realName=='')
              {
                Span('请输入姓名').fontColor($r('app.color.common_gray_02'))
              }
              Span(this.realName).fontColor($r('app.color.common_gray_01'))
            }
            .customStyleT()
            .onClick(() => {
              PromptActionClass.openDialog()
              this.titleName='请输入姓名'
              this.contentNode.update({ title: this.titleName, field: this.currentField, currentValue: this.realName })
            })
            Image($r('app.media.arrow_right')).customStyleI()
          }.customStyleR().margin({top:8})
          Row()
          {
            Text('科室电话').customStyle()
            Blank()
            Text(){
              if(this.officePhone=='')
              {
                Span('请输入所在科室的电话').fontColor($r('app.color.common_gray_02'))

              }
              Span(this.officePhone).fontColor($r('app.color.common_gray_01'))
            }
            .customStyleT()
            .onClick(() => {
              PromptActionClass.openDialog()
              this.titleName='请输入科室电话'
              this.contentNode.update(this.titleName)
            })
            Image($r('app.media.arrow_right')).customStyleI()
          }.customStyleR().margin({top:8})
          Row()
          {
            Text('执业医师证编号').customStyle()
            Blank()
            Text(){
              if(this.certificate=='')
              {
                Span('请输入执业医师证编号').fontColor($r('app.color.common_gray_02'))

              }
              Span(this.certificate).fontColor($r('app.color.common_gray_01'))
            }
            .customStyleT()
            .onClick(() => {
              PromptActionClass.openDialog()
              this.titleName='请输入执业医师资格证号码'
              this.contentNode.update(this.titleName)
            })
            Image($r('app.media.arrow_right')).customStyleI()
          }.customStyleR().margin({top:8})
        }
        .width('100%')
        .height('100%')
        .backgroundImage($r('app.media.bg_reg'))
        .backgroundImageSize(ImageSize.FILL)
      }
      .scrollable(ScrollDirection.Vertical) // 滚动方向为垂直方向
      .scrollBar(BarState.Off) // 滚动条常驻显示


    }
  }
  @State currentField: string = ''; // 记录当前编辑的字段

}
@Extend(Text)
function customStyle() {
  .fontColor($r('app.color.common_gray_01'))
  .height(48)
  .fontSize(16)
  .padding({left:15,top:10,bottom:10})
}
@Extend(Text)
function customStyleT() {
  .fontSize(13)
  .margin({right:10})

}
@Extend(Image)
function customStyleI() {
  .width(8)
  .height(13)
  .margin({right:15})

}
@Extend(Row)
function customStyleR() {
  .width('100%')
  .backgroundColor($r('app.color.white'))

}

@Builder
function buildText( title: string ) {
  Column() {
    Row(){
      Text('取消')
        .fontSize(14)
        .fontColor($r('app.color.top_title'))
        .margin({left:10})
        .onClick(() => {
          // this.currentField=''
          PromptActionClass.closeDialog()
        })
      Blank()
      Text(title)
        .fontSize(16)
        .fontColor($r('app.color.common_gray_01'))
      Blank()
      Text('确定')
        .fontSize(14)
        .fontColor($r('app.color.top_title'))
        .margin({right:10})
        .onClick(() => {
          PromptActionClass.closeDialog()
          switch (title)
          {
            case '':
              break
          }
        })
    } .width('100%')
    .padding(10)
    .backgroundColor($r('app.color.top_bg'))
    TextInput({ placeholder: '请输入', text: '' })
      .padding(10)
      .backgroundColor($r('app.color.white'))
      .borderRadius(0)
      .onChange((value:string)=>{
      })
  }.backgroundColor('#FFF0F0F0')
}