@Entry
@Component
struct MvvmCase {
  // 1.数据变化 ->  操作数据
  // 2.UI更新 -> @State (自身和第一层)
  // 响应式数据 = 1+2
  // 双向数据绑定
  // 1.数据发生变化，UI产生更新   @State
  // 2.UI产生交互，驱动数据变化   onChange()
  @State
  text: string = ''
  @State
  userInfo: userInfoMvvm03 = {
    name: 'zs',
    age: 18
  }
  @State
  myDate: Date = new Date('2024-10-01')

  @State
  myCheck:boolean = false
  @State
  myToggle:boolean = false
  build() {
    Column() {
      // TextInput({ text: this.text })
      //   .onChange((value) => {
      //     // 现象：输入框输入的内容和数据是一样的
      //     // 双向数据绑定 =
      //     // 1.数据发生变化，UI产生更新
      //     // 2.UI产生交互，驱动数据变化
      //     this.text = value
      //   })
      // Button('将Text改变')
      //   .onClick(() => {
      //     this.text = '666'
      //   })
      // Text(this.text)
      // Text(this.text)
      // 给响应式数据前面加$$就可以替代onChange()
      // 总结：就是一个语法糖
      TextInput({ text: $$this.text })
      // 虽然报错，但是能运行（低版本模拟器的bug）
      // TextInput({ text: $$this.userInfo.name })
      Text(this.myDate + '')
      DatePicker({
        selected: $$this.myDate
      })
      Text(this.myCheck+'')
      Checkbox()
        .select($$this.myCheck)
      Text(this.myToggle+'')
      Toggle({
        type:ToggleType.Switch,
        isOn:$$this.myToggle
      })
      // 不支持
      // PatternLock()

    }
    .height('100%')
    .width('100%')
  }
}

interface userInfoMvvm03 {
  name: string
  age: number
}

//总结：
//1.只支持简单数据建构
//2.只支持部分组件(value + onchange)
//3.双向数据绑定是语法糖，省略了写onchange