import { promptAction } from '@kit.ArkUI'

@Entry
@Component
struct LoginCase {
  @State
  userInfo: UserInfo03 = {
    name: '老潘',
    age: 40,
    gender: '男',
    address: {
      province: '陕西',
      city: '西安',
      area: '高新区'
    }
  }

  build() {
    Column() {
      Column({ space: 20 }) {
        Row() {
          Text('姓名：')
          TextInput({ text: this.userInfo.name })
            .layoutWeight(1)
        }

        Row() {
          Text('年龄：')
          TextInput({ text: this.userInfo.age.toString() })
            .layoutWeight(1)
        }

        Row() {
          Text('性别：')
          Select([{ value: '男' }, { value: '女' }])
            .layoutWeight(1)
            .value('女')
        }

        Row() {
          Text('地址：')
          Row() {
            TextInput({ text: this.userInfo.address.province })
              .layoutWeight(1)
            TextInput({ text: this.userInfo.address.city })
              .layoutWeight(1)
            TextInput({ text: this.userInfo.address.area })
              .layoutWeight(1)
          }
          .layoutWeight(1)
        }

        Row({ space: 10 }) {
          Button('修改姓名')
            .layoutWeight(1).onClick(() => {
            this.userInfo.name = '潘神'
          })
          Button('修改年龄')
            .layoutWeight(1)
            .onClick(() => {
              this.userInfo.age = 90
            })
        }

        Row({ space: 10 }) {
          Button('修改性别')
            .layoutWeight(1)
          Button('修改地址')
            .layoutWeight(1)
            .onClick(() => {
              //多层嵌套时，数据更新方法
              this.userInfo.address.area = '未央区'
              this.userInfo = new UserInfo03Model(this.userInfo)
            })
        }
      }
      .padding(18)
      .width('100%')
      .height(380)
      .backgroundColor('#ffffffff')
      .borderRadius(20)
    }
    .backgroundColor('#3333')
    .padding(10)
    .justifyContent(FlexAlign.Center)
    .height('100%')
    .width('100%')
  }
}

interface UserInfo03 {
  name: string,
  age: number,
  gender: '男' | '女',
  address: Address03
}

interface Address03 {
  province: string,
  city: string,
  area: string
}

export class UserInfo03Model implements UserInfo03 {
  name: string = ''
  age: number = 0
  gender: '男' | '女' = '男'
  address: Address03 = new Address03Model({} as Address03)

  constructor(model: UserInfo03) {
    this.name = model.name
    this.age = model.age
    this.gender = model.gender
    this.address = model.address
  }
}

export class Address03Model implements Address03 {
  province: string = ''
  city: string = ''
  area: string = ''

  constructor(model: Address03) {
    this.province = model.province
    this.city = model.city
    this.area = model.area
  }
}