// Index.ets —— 项目自动生成的默认页面

@Entry               // ← @Entry: 表示这是一个"页面入口"，可被router跳转
@Component           // ← @Component: 表示这是一个"UI组件"
struct Index {       // ← struct: 结构体（不是class！ArkTS组件必须用struct）

  @State message: string = 'Hello World'
  // @State: 状态变量。当message的值改变时，界面会自动刷新

  build() {          // ← build(): 每个组件必须有的方法，描述界面长什么样
    RelativeContainer() {
      // RelativeContainer: 相对布局容器
      Text(this.message)
      // Text: 文本组件，显示文字
      // this.message: 读取 @State 变量 message 的值
        .fontSize(50)
        // .fontSize(50): 设置字号为50
        .fontWeight(FontWeight.Bold)
        // .fontWeight(): 字体粗细 → Bold 加粗
        .id('HelloWorld')
        // .id(): 给组件一个ID（相对布局中用）
    }
    .height('100%')
    // .height('100%'): 高度占满父容器
    .width('100%')
    // .width('100%'): 宽度占满父容器
  }
}

@Entry
@Component
struct Index {
  @State message: string = '你好，鸿蒙!'    // 把Hello World改成中文

  build() {
    Column() {                              // 改用Column(Column比RelativeContainer更常用)
      Text(this.message)
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .fontColor('#007AFF')              // ← 新增：字体颜色(蓝色)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)      // ← 新增：垂直居中
    .alignItems(HorizontalAlign.Center)    // ← 新增：水平居中
  }
}

@Entry
@Component
struct Index {
  @State message: string = '你好，鸿蒙!'

  build() {
    Column({ space: 30 }) {        // space: 子元素之间的间距=30
      Text(this.message)
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .fontColor('#007AFF')

      // 自定义按钮（不用原生Button，用Text + onClick）
      Text('点击我')
        .fontSize(20)
        .fontColor(Color.White)
        .backgroundColor('#007AFF')
        .borderRadius(12)
        .padding({ top: 14, bottom: 14, left: 32, right: 32 })
        .onClick(() => {
          // onClick: 点击事件回调
          this.message = '你点击了按钮!'
          // 修改@State → build()自动重新执行 → UI自动更新
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }
}

@Entry
@Component
struct Index {
  @State count: number = 0       // count 计数，初始=0

  build() {
    Column({ space: 30 }) {
      // 标题
      Text('计数器')
        .fontSize(32)
        .fontWeight(FontWeight.Bold)

      // 当前数字
      Text(`${this.count}`)      // 模板字符串：把count的值嵌入文字
        .fontSize(80)
        .fontWeight(FontWeight.Bold)
        .fontColor(this.count >= 0 ? '#007AFF' : '#FF3B30')
        // 三元表达式: 条件 ? 真时的值 : 假时的值
        // count>=0时蓝色，负数时红色

      // 按钮行
      Row({ space: 16 }) {       // Row: 行布局，子元素横着排
        // -1 按钮
        Text('-1')
          .fontSize(22)
          .fontColor(Color.White)
          .backgroundColor('#FF3B30')
          .width(60).height(60)
          .borderRadius(30)      // 30=宽度一半 → 正圆
          .textAlign(TextAlign.Center)
          .onClick(() => { this.count-- })  // count减1

        // 重置按钮
        Text('重置')
          .fontSize(18)
          .fontColor(Color.White)
          .backgroundColor('#8E8E93')
          .borderRadius(12)
          .padding({ top: 12, bottom: 12, left: 20, right: 20 })
          .onClick(() => { this.count = 0 })  // count归零

        // +1 按钮
        Text('+1')
          .fontSize(22)
          .fontColor(Color.White)
          .backgroundColor('#34C759')
          .width(60).height(60)
          .borderRadius(30)
          .textAlign(TextAlign.Center)
          .onClick(() => { this.count++ })  // count加1
      }
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }
}

@Entry
@Component
struct GuessNumberGame {
  @State secret: number = Math.floor(Math.random() * 100) + 1  // 秘密数字1~100
  @State guess: string = ''           // 用户输入
  @State hint: string = '猜一个1~100的数字'  // 提示文字
  @State attempts: number = 0         // 猜测次数
  @State gameOver: boolean = false    // 是否猜对

  build() {
    Column({ space: 24 }) {
      Text('猜数字')
        .fontSize(32)
        .fontWeight(FontWeight.Bold)

      Text(this.hint)
        .fontSize(20)
        .fontColor(this.gameOver ? '#34C759' : '#FF9500')

      TextInput({ text: this.guess, placeholder: '输入你的猜测' })
        .type(InputType.Number)
        .width(200)
        .onChange((value: string) => { this.guess = value })

      Row({ space: 16 }) {
        Text('猜!')
          .fontSize(20)
          .fontColor(Color.White)
          .backgroundColor('#007AFF')
          .width(80).height(44)
          .borderRadius(22)
          .textAlign(TextAlign.Center)
          .onClick(() => {
            if (this.gameOver) return
            let num = parseInt(this.guess)
            this.attempts++
            if (num === this.secret) {
              this.hint = `🎉 恭喜！${this.attempts}次就猜对了！`
              this.gameOver = true
            } else if (num < this.secret) {
              this.hint = '📈 太小了，再大一点！'
            } else {
              this.hint = '📉 太大了，再小一点！'
            }
          })

        Text('重来')
          .fontSize(20)
          .fontColor(Color.White)
          .backgroundColor('#8E8E93')
          .width(80).height(44)
          .borderRadius(22)
          .textAlign(TextAlign.Center)
          .onClick(() => {
            this.secret = Math.floor(Math.random() * 100) + 1
            this.guess = ''
            this.hint = '猜一个1~100的数字'
            this.attempts = 0
            this.gameOver = false
          })
      }

      Text(`已猜 ${this.attempts} 次`)
        .fontSize(14)
        .fontColor('#999')
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }
}

// EntryAbility.ets    应用入口Ability，每个应用至少有一个
// 这是整个App的启动入口，相当于main()函数

// import 导入：从SDK工具包导入需要的能力
import { UIAbility, Want, AbilityConstant } from '@kit.AbilityKit'
//       ↑ UIAbility 界面能力基类    ↑ Want 跳转意图
//                                    ↑ AbilityConstant 常量
import { hilog } from '@kit.PerformanceAnalysisKit'
//       ↑ hilog 日志工具
import { window } from '@kit.ArkUI'
//       ↑ window 窗口管理

// export default 默认导出：这个类可以被外部引用
export default class EntryAbility extends UIAbility {
  //                                   extends 继承自UIAbility

  // onCreate 创建时回调：Ability被创建时调用一次
  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    //      ↑ want 启动意图(谁启动了我，带了什么参数)
    //                           ↑ launchParam 启动参数(冷启动/热启动)
    hilog.info(0x0000, 'EntryAbility', 'Ability被创建了')
    // hilog.info() 打印info级别日志
    // 0x0000 是domain(域)，可以自定义
  }

  // onDestroy 销毁时回调：Ability被销毁时调用一次（清理资源）
  onDestroy(): void {
    hilog.info(0x0000, 'EntryAbility', 'Ability被销毁了')
  }

  // onWindowStageCreate 窗口创建回调：准备显示界面
  onWindowStageCreate(windowStage: window.WindowStage): void {
    // 核心：loadContent() 加载哪个页面作为首页
    windowStage.loadContent('pages/Index', (err) => {
      //                   ↑ 页面路径      ↑ err 错误回调
      if (err.code) {
        hilog.error(0x0000, 'EntryAbility', '加载页面失败: %{public}d', err.code)
        return
      }
    })
  }
}

@Entry
@Component
struct MyPage {
  // aboutToAppear 即将出现：页面创建后、显示前调用
  aboutToAppear(): void {
    console.log('1. 页面即将出现')      // 在这里加载数据
  }

  // onPageShow 页面显示：页面完全显示后调用
  onPageShow(): void {
    console.log('2. 页面显示了')        // 在这里刷新数据
  }

  // onPageHide 页面隐藏：页面被覆盖或切到后台时调用
  onPageHide(): void {
    console.log('3. 页面隐藏了')        // 在这里保存草稿、停止轮询
  }

  // aboutToDisappear 即将消失：页面被销毁前调用
  aboutToDisappear(): void {
    console.log('4. 页面即将销毁')      // 在这里清理资源
  }

  // onBackPress 返回键拦截：用户按返回键时触发
  onBackPress(): boolean | void {
    // 返回 true = 拦截返回（留在当前页）
    // 返回 false = 不拦截（正常返回）
    if (this.hasUnsavedChanges) {
      AlertDialog.show({ message: '有未保存的数据，确定退出？' })
      return true  // 拦截
    }
    return false   // 放行
  }

  build() { /* ... */ }
}

build() {
  // ❌ 铁律1：build()内不能声明任何变量！
  // let title: string = '标题'   ← 编译失败

  // ❌ 铁律2：不能使用索引签名！
  // let obj: Record<string, number> = {}  ← 编译失败

  // ❌ 铁律3：不能用any类型！
  // let x: any = 123  ← 编译失败

  // ✅ 所有数据要么是@State/@Prop等状态，
  //    要么在build()外部提前定义

  Column() {           // ✅ 根节点：有且仅有一个
    Text('第一行')
    Text('第二行')
    Row() {            // ✅ 嵌套布局
      Text('左')
      Text('右')
    }
  }
}

@Entry
@Component
struct CountdownPage {
  @State totalSeconds: number = 60       // 总秒数
  @State isRunning: boolean = false      // 是否正在倒计时
  @State isFinished: boolean = false     // 是否结束
  private timerId: number = -1

  // 页面显示时自动开始
  onPageShow(): void {
    console.log('页面显示了，倒计时准备就绪')
  }

  // 页面隐藏时暂停
  onPageHide(): void {
    if (this.isRunning) {
      clearInterval(this.timerId)
      this.isRunning = false
      console.log('页面隐藏，倒计时已暂停')
    }
  }

  // 页面销毁时清理
  aboutToDisappear(): void {
    clearInterval(this.timerId)
  }

  get display(): string {
    let min = Math.floor(this.totalSeconds / 60)
    let sec = this.totalSeconds % 60
    return `${min.toString().padStart(2, '0')}:${sec.toString().padStart(2, '0')}`
  }

  build() {
    Column({ space: 30 }) {
      Text(this.isFinished ? '⏰ 时间到！' : this.display)
        .fontSize(72)
        .fontWeight(FontWeight.Bold)
        .fontColor(this.totalSeconds <= 10 && this.isRunning ? '#FF3B30' : '#333')

      Progress({ value: this.totalSeconds, total: 60 })
        .width('80%')
        .color(this.totalSeconds <= 10 ? '#FF3B30' : '#007AFF')

      Row({ space: 16 }) {
        Text(this.isRunning ? '暂停' : (this.isFinished ? '重置' : '开始'))
          .fontSize(20)
          .fontColor(Color.White)
          .backgroundColor(this.isRunning ? '#FF9500' : '#007AFF')
          .width(100).height(50)
          .borderRadius(25)
          .textAlign(TextAlign.Center)
          .onClick(() => {
            if (this.isFinished) {
              this.totalSeconds = 60
              this.isFinished = false
              return
            }
            if (this.isRunning) {
              clearInterval(this.timerId)
              this.isRunning = false
            } else {
              this.isRunning = true
              this.timerId = setInterval(() => {
                if (this.totalSeconds > 0) {
                  this.totalSeconds--
                } else {
                  clearInterval(this.timerId)
                  this.isRunning = false
                  this.isFinished = true
                }
              }, 1000)
            }
          })
      }
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }
}

// let [变量名]: [类型] = [初始值]    ← 变量声明标准格式

let name: string = "鸿蒙"     // string 字符串
let age: number = 25           // number 数字(整数+小数)
let isNew: boolean = true      // boolean 布尔值(真/假)
let nothing: null = null       // null 空值
let notFound: undefined = undefined  // undefined 未定义

// const [常量名]: [类型] = [值]    ← 常量声明，值不可改
const PI: number = 3.14159     // const 常量，不可重新赋值
const APP_NAME: string = "中医题库"

// 数组 array：存放多个同类型数据
let items: string[] = ["A", "B", "C"]      // string[] 字符串数组
let scores: number[] = [85, 92, 78]         // number[] 数字数组

// 泛型写法：Array<类型>          ← 和 类型[] 等效
let list: Array<number> = [1, 2, 3]        // Array<number> 数字数组
let users: Array<string> = ["张三", "李四"]  // Array<string> 字符串数组

// 接口 interface：定义对象的"形状"（有哪些字段，各是什么类型）
interface User {               // interface 接口定义
  name: string                  // name 字段，类型是string
  age: number                   // age 字段，类型是number
  email?: string                // ? 表示可选字段，可以不填
}

// 使用接口创建对象
let user: User = {
  name: "张三",                 // object literal 对象字面量
  age: 30
}

// type 类型别名：给类型起个别名
type ID = string | number       // type 类型别名，| 联合类型(或)
let userId: ID = "user123"      // 合法
let productId: ID = 999         // 也合法

// 函数 function：封装一段可复用的代码

// 普通函数    function [函数名]([参数]: [类型]): [返回类型]
function add(a: number, b: number): number {
  return a + b                   // return 返回值
}
// add(1, 2) → 3

// 箭头函数 arrow function：更简洁的写法，组件中大量使用
const multiply = (a: number, b: number): number => a * b
//       ↑ 函数名  ↑ 参数          ↑ 返回类型  ↑ 函数体

// void 无返回值：函数只执行操作，不返回数据
function logMessage(msg: string): void {
  console.log(msg)              // console.log() 打印日志
}

// 回调函数 callback：把函数当作参数传给另一个函数
type Callback = (data: string) => void   // type 定义一个函数类型
function fetchData(callback: Callback): void {
  callback("数据已加载")          // 执行回调函数
}

// 可选参数 optional parameter
function greet(name: string, title?: string): string {
  // title? 表示这个参数可以不传
  if (title) {
    return `${title}${name}，你好`     // 模板字符串 `${变量}`
  }
  return `${name}，你好`
}

// 类 class：封装数据 + 行为

interface Animal {              // 接口：定义"能做什么"
  name: string                   // 属性 property：有哪些数据
  makeSound(): void              // 方法 method：能执行什么行为
}

// implements 实现：类必须满足接口的要求
class Dog implements Animal {
  name: string                   // 声明属性类型

  // constructor 构造函数：new Dog() 时自动执行
  constructor(name: string) {
    this.name = name             // this 指当前实例
  }

  makeSound(): void {
    console.log(`${this.name}: 汪汪!`)
  }
}

// extends 继承：子类继承父类的所有属性和方法
class BigDog extends Dog {
  // override 重写：覆盖父类的方法
  makeSound(): void {
    console.log(`${this.name}: 汪!!!`)
  }
}

// 使用类
let dog = new Dog("旺财")       // new 创建实例
dog.makeSound()                  // 输出: 旺财: 汪汪!

// Promise 承诺：表示"未来会完成"的操作
// async 异步    await 等待

// 定义一个返回Promise的函数
function delay(ms: number): Promise<void> {
  //              Promise<void> 承诺返回"无值"
  return new Promise((resolve) => {  // new Promise 创建承诺
    setTimeout(resolve, ms)            // setTimeout 定时器，ms毫秒后执行
  })
}

// async/await 写法：让异步代码看起来像同步代码
async function loadData(): Promise<string> {
  // async 声明异步函数    ↓ await 等待异步操作完成
  await delay(1000)                    // 等待1秒
  return "加载完成"                     // 1秒后返回这个字符串
}

// try/catch 异常处理
async function safeLoad(): Promise<void> {
  try {                               // try 尝试执行
    let data = await loadData()       // 等待加载数据
    console.log(data)                 // 成功则打印
  } catch (error) {                   // catch 捕获异常
    console.error("加载失败:", error) // 失败则打印错误
  }
}

// 数组解构：把数组元素取出来赋给变量
let arr = [1, 2, 3]
let [first, ...rest] = arr             // first=1, rest=[2,3]
//    ↑ 第一个  ↑ 剩余全部(展开运算符)

// 对象解构：把对象的某个字段取出来
let config = { url: "/api", method: "GET" }
let { url, method } = config           // url="/api", method="GET"

// 展开：把数组/对象"铺开"
let a = [1, 2]
let b = [...a, 3, 4]                   // b = [1, 2, 3, 4]

let obj1 = { name: "A" }
let obj2 = { ...obj1, age: 20 }        // obj2 = {name:"A", age:20}

// Text 文本：显示文字内容

// 基础用法
Text('普通文本')                  // Text 文本组件

// 富文本(多段不同样式)
Text() {                          // 空Text + 内部Span
  Span('红色文字')                 // Span 文本片段
    .fontColor(Color.Red)        // Color.Red 红色
  Span('蓝色文字')
    .fontColor(Color.Blue)       // Color.Blue 蓝色
  Span('大号粗体')
    .fontSize(24)
    .fontWeight(FontWeight.Bold)
}

// Image 图片：显示图片

// 本地资源图片
Image($r('app.media.icon'))      // $r() 引用资源，app.media.icon 资源路径
  .width(48).height(48)

// 网络图片
Image('https://example.com/photo.jpg')
  .width('100%')
  .height(200)
  .objectFit(ImageFit.Cover)     // objectFit 填充方式：Cover裁剪铺满/Contain全图显示/Fill拉伸
  .borderRadius(8)               // borderRadius 圆角

// 圆形头像
Image($r('app.media.avatar'))
  .width(64).height(64)
  .borderRadius(32)              // 宽度的一半 = 正圆
  .objectFit(ImageFit.Cover)

// ⚠️ 铁律：不要用原生Button组件（某些版本有Bug）
// 用Text/Row + onClick 实现按钮

@Component
struct MyButton {
  @Prop label: string              // label 按钮文字
  @Prop bgColor: string = '#007AFF'  // bgColor 背景色，默认蓝色
  onPress?: () => void             // onPress 点击回调函数

  build() {
    Text(this.label)
      .fontSize(16)
      .fontColor(Color.White)
      .textAlign(TextAlign.Center)
      .backgroundColor(this.bgColor)
      .borderRadius(8)
      .padding({ top: 12, bottom: 12, left: 24, right: 24 })
      .onClick(() => {
        this.onPress?.()          // 可选链调用：onPress存在时才执行
      })
  }
}

// 使用自定义按钮
MyButton({
  label: '开始考试',
  bgColor: '#2196F3',
  onPress: () => {
    router.pushUrl({ url: 'pages/ExamPage' })
  }
})

// TextInput 文本输入：接收用户输入

@State username: string = ''
@State password: string = ''

build() {
  Column({ space: 16 }) {
    // 普通输入框
    TextInput({ text: this.username, placeholder: '请输入用户名' })
    //                        ↑ text 绑定内容 ↑ placeholder 占位提示文字
      .width('100%')
      .height(44)
      .type(InputType.Normal)     // type 输入类型：Normal普通/Password密码/Number数字
      .onChange((value: string) => {
        this.username = value     // 输入变化时更新状态
      })

    // 密码输入框
    TextInput({ text: this.password, placeholder: '请输入密码' })
      .width('100%')
      .height(44)
      .type(InputType.Password)   // Password 密码模式(内容会被遮掩)
      .onChange((value: string) => {
        this.password = value
      })
  }
  .padding(16)
}

@State isLoggedIn: boolean = false    // boolean 布尔值
// isLoggedIn 是否已登录

build() {
  Column() {
    if (this.isLoggedIn) {            // if 如果：条件为真时显示
      // 登录后的界面
      Text('欢迎回来!')
        .fontSize(24)
      Text('点击退出')
        .fontColor(Color.White)
        .backgroundColor('#FF3B30')
        .borderRadius(8)
        .padding(12)
        .onClick(() => {
          this.isLoggedIn = false     // 点击退出 → UI自动切换到else分支
        })
    } else {                          // else 否则：条件为假时显示
      // 未登录的界面
      Text('请先登录')
        .fontSize(24)
      Text('点击登录')
        .fontColor(Color.White)
        .backgroundColor('#007AFF')
        .borderRadius(8)
        .padding(12)
        .onClick(() => {
          this.isLoggedIn = true      // 点击登录 → UI自动切换到if分支
        })
    }
  }
}

@State fruits: string[] = ['苹果', '香蕉', '橘子']
// string[] 字符串数组

build() {
  Column() {
    ForEach(                          // ForEach 循环渲染：遍历数组生成UI
      this.fruits,                    // 参数1: 数据源(数组)
      (item: string, index: number) => {  // 参数2: 每个元素的渲染函数
        //  ↑ 当前元素    ↑ 当前索引(从0开始)
        Text(`${index + 1}. ${item}`)
          .fontSize(18)
          .padding(10)
      },
      (item: string) => item          // 参数3: key生成器(必须提供!)
      //                ↑ 返回唯一标识，用于高效更新
    )
  }
}

Text('样式速查')
  // --- 字体相关 ---
  .fontSize(20)                          // fontSize 字号
  .fontColor('#FF3333')                  // fontColor 字体颜色(支持#RRGGBB)
  .fontWeight(FontWeight.Bold)           // fontWeight 字体粗细：Bold加粗/Normal正常/Lighter细
  .fontStyle(FontStyle.Italic)           // fontStyle 字体风格：Italic斜体/Normal正常
  .textAlign(TextAlign.Center)           // textAlign 文本对齐：Center居中/Start左/End右
  .maxLines(2)                           // maxLines 最大行数(超出省略)
  .textOverflow({ overflow: TextOverflow.Ellipsis })  // textOverflow 溢出处理：Ellipsis省略号

  // --- 背景与边框 ---
  .backgroundColor('#F5F5F5')           // backgroundColor 背景色
  .borderRadius(8)                       // borderRadius 圆角半径
  .border({ width: 1, color: '#E0E0E0' })  // border 边框：width宽度 color颜色

  // --- 尺寸与间距 ---
  .width('90%')                          // width 宽度(百分比或数字)
  .height(44)                            // height 高度(数字=vp单位)
  .padding(12)                           // padding 内边距
  .margin(8)                             // margin 外边距
  .layoutWeight(1)                       // layoutWeight 弹性权重(在Row/Column中占剩余空间)

  // --- 交互 ---
  .opacity(0.8)                          // opacity 透明度(0~1)
  .onClick(() => {                       // onClick 点击事件
    console.log('被点击了')
  })

@Entry
@Component
struct LoginPage {
  @State username: string = ''
  @State password: string = ''
  @State isLoading: boolean = false
  @State errorMessage: string = ''
  @State rememberMe: boolean = false

  build() {
    Column({ space: 20 }) {
      // Logo区域
      Column({ space: 8 }) {
        Text('🏥')
          .fontSize(64)
        Text('中医题库')
          .fontSize(28)
          .fontWeight(FontWeight.Bold)
        Text('登录后开始学习')
          .fontSize(14)
          .fontColor('#999')
      }
      .margin({ top: 60, bottom: 20 })

      // 输入区域
      Column({ space: 12 }) {
        TextInput({ text: this.username, placeholder: '请输入用户名' })
          .width('100%')
          .height(48)
          .borderRadius(8)
          .backgroundColor('#F5F5F5')
          .onChange((v: string) => {
            this.username = v
            this.errorMessage = ''
          })

        TextInput({ text: this.password, placeholder: '请输入密码' })
          .width('100%')
          .height(48)
          .type(InputType.Password)
          .borderRadius(8)
          .backgroundColor('#F5F5F5')
          .onChange((v: string) => {
            this.password = v
            this.errorMessage = ''
          })
      }
      .width('100%')
      .padding({ left: 24, right: 24 })

      // 错误提示
      if (this.errorMessage) {
        Text(this.errorMessage)
          .fontSize(13)
          .fontColor('#FF3B30')
          .width('100%')
          .textAlign(TextAlign.Center)
      }

      // 记住密码 + 忘记密码
      Row() {
        Text(this.rememberMe ? '☑ 记住密码' : '☐ 记住密码')
          .fontSize(13)
          .fontColor('#666')
          .onClick(() => { this.rememberMe = !this.rememberMe })

        Text('忘记密码？')
          .fontSize(13)
          .fontColor('#007AFF')
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceBetween)
      .padding({ left: 24, right: 24 })

      // 登录按钮
      Text(this.isLoading ? '登录中...' : '登录')
        .fontSize(18)
        .fontColor(Color.White)
        .fontWeight(FontWeight.Bold)
        .width('90%')
        .height(48)
        .textAlign(TextAlign.Center)
        .backgroundColor(this.username && this.password ? '#007AFF' : '#B0BEC5')
        .borderRadius(24)
        .onClick(() => {
          if (!this.username || !this.password) {
            this.errorMessage = '请输入用户名和密码'
            return
          }
          this.isLoading = true
          // 模拟登录
          setTimeout(() => {
            this.isLoading = false
            if (this.username === 'admin' && this.password === '123456') {
              this.errorMessage = ''
              console.log('登录成功')
            } else {
              this.errorMessage = '用户名或密码错误'
            }
          }, 1500)
        })

      // 注册链接
      Row({ space: 4 }) {
        Text('还没有账号？')
          .fontSize(13)
          .fontColor('#999')
        Text('立即注册')
          .fontSize(13)
          .fontColor('#007AFF')
      }
    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color.White)
  }
}

// ===== Column 列布局：子元素竖着排列 =====
Column({ space: 12 }) {             // space 子元素间距
  Text('第一行')
  Text('第二行')
  Text('第三行')
}
.width('100%')
.padding(16)
.alignItems(HorizontalAlign.Start)  // alignItems 水平对齐：Start左/Center中/End右
.justifyContent(FlexAlign.Center)   // justifyContent 垂直对齐：Start上/Center中/End下

// ===== Row 行布局：子元素横着排列 =====
Row({ space: 8 }) {
  Image($r('app.media.icon'))
    .width(24).height(24)
  Text('标题')
    .layoutWeight(1)               // layoutWeight 弹性权重：占满剩余空间
  Image($r('app.media.arrow'))
    .width(16).height(16)
}
.width('100%')
.height(56)
.padding({ left: 16, right: 16 })
.alignItems(VerticalAlign.Center)  // alignItems 垂直对齐(横向布局中)

// ===== Flex 弹性布局：自动换行 =====
Flex({ direction: FlexDirection.Row, wrap: FlexWrap.Wrap }) {
  //       ↑ direction 主轴方向：Row行/Column列
  //                                    ↑ wrap 换行：Wrap换行/NoWrap不换行
  ForEach(['标签A', '标签B', '标签C', '标签D'],
    (item: string) => {
      Text(item)
        .padding(8)
        .backgroundColor('#E0E0E0')
        .borderRadius(4)
        .margin(4)
    },
    (item: string) => item
  )
}

// Stack 堆叠：子元素叠在一起，后写的在上面

Stack({ alignContent: Alignment.Bottom }) {
  //       ↑ alignContent 对齐方式：子元素在Stack中的位置
  //         Alignment.Bottom 底部对齐

  // 背景层（先写在下）
  Image('https://example.com/background.jpg')
    .width('100%')
    .height(200)
    .objectFit(ImageFit.Cover)

  // 前景层（后写在上）
  Column() {
    Text('标题文字')
      .fontSize(24)
      .fontColor(Color.White)
      .fontWeight(FontWeight.Bold)
    Text('副标题')
      .fontSize(14)
      .fontColor(Color.White)
      .opacity(0.8)
  }
  .padding(16)
}

// ⚠️ 铁律：不要用List组件（某些版本有Bug），用Scroll + ForEach替代

@State dataList: string[] = ['项目1', '项目2', '项目3', '项目4', '项目5']

build() {
  Scroll() {                         // Scroll 滚动容器
    Column() {                       // Column 包裹内容
      ForEach(this.dataList,
        (item: string, index: number) => {
          Row() {
            Text(`${index + 1}. ${item}`)
              .fontSize(16)
          }
          .width('100%')
          .padding(16)
          .backgroundColor(Color.White)
          .borderRadius(8)
          .margin({ top: 8 })
        },
        (item: string) => item       // key生成器
      )
    }
    .width('100%')
    .padding(16)
  }
  .width('100%')
  .height('100%')
  .scrollable(ScrollDirection.Vertical)   // scrollable滚动方向：Vertical垂直/Horizontal水平
  .scrollBar(BarState.Auto)               // scrollBar滚动条：Auto自动显示/Off隐藏
}

// CustomDialog 自定义弹窗
@CustomDialog                     // @CustomDialog 自定义弹窗装饰器
struct ConfirmDialog {
  controller: CustomDialogController  // controller 弹窗控制器(必须!)
  title: string = '提示'              // title 弹窗标题
  message: string = ''                // message 弹窗内容
  confirmText: string = '确定'        // confirmText 确认按钮文字
  confirm?: () => void                // confirm 确认回调

  build() {
    Column() {
      Text(this.title)
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
      Text(this.message)
        .fontSize(16)
        .margin({ top: 12, bottom: 24 })
      Row({ space: 12 }) {
        Text('取消')
          .padding(12)
          .onClick(() => this.controller.close())  // close 关闭弹窗
        Text(this.confirmText)
          .padding(12)
          .fontColor('#007AFF')
          .onClick(() => {
            this.confirm?.()         // 执行确认回调
            this.controller.close()  // 关闭弹窗
          })
      }
    }
    .padding(24)
  }
}

// 使用弹窗的3步：
// 1. 声明控制器
dialogController: CustomDialogController = new CustomDialogController({
  builder: ConfirmDialog({          // builder 构建器：指定弹窗内容
    title: '删除确认',
    message: '确定要删除这条记录吗？',
    confirm: () => { console.log('执行删除') }
  })
})

// 2. 弹出
this.dialogController.open()        // open 打开弹窗

// 3. 关闭(弹窗内部调用 controller.close())

@Entry
@Component
struct ProfileCard {
  @State name: string = '张三'
  @State bio: string = '这是一段个人简介'

  build() {
    Scroll() {
      Column({ space: 16 }) {
        // 头像 + 名字 (Stack堆叠)
        Stack({ alignContent: Alignment.Bottom }) {
          Image($r('app.media.cover'))
            .width('100%')
            .height(180)
            .objectFit(ImageFit.Cover)
          Column() {
            Image($r('app.media.avatar'))
              .width(80).height(80)
              .borderRadius(40)
              .border({ width: 3, color: Color.White })
            Text(this.name)
              .fontSize(20).fontColor(Color.White)
              .fontWeight(FontWeight.Bold)
          }
          .margin({ bottom: -40 })
        }

        // 简介
        Text(this.bio)
          .fontSize(14).fontColor('#666')
          .margin({ top: 50 })
          .padding(16)

        // 编辑按钮
        Text('编辑资料')
          .fontColor(Color.White)
          .backgroundColor('#007AFF')
          .borderRadius(8)
          .padding({ top: 12, bottom: 12, left: 32, right: 32 })
          .onClick(() => {
            this.name = '李四'
          })
      }
    }
    .width('100%').height('100%')
    .backgroundColor('#F0F0F0')
  }
}

import { router } from '@kit.ArkUI'

// ===== 底部Tab导航主页 =====
@Entry
@Component
struct MainApp {
  @State currentTab: number = 0

  build() {
    Tabs({ index: this.currentTab }) {
      TabContent() { HomeTab() }
        .tabBar({ title: '首页', icon: $r('app.media.home') })
      TabContent() { StudyTab() }
        .tabBar({ title: '学习', icon: $r('app.media.book') })
      TabContent() { ProfileTab() }
        .tabBar({ title: '我的', icon: $r('app.media.user') })
    }
    .barPosition(BarPosition.End)
    .onChange((index: number) => { this.currentTab = index })
  }
}

// ===== 首页Tab =====
@Component
struct HomeTab {
  @State categories: object[] = [
    { name: '中医基础', icon: '📘', count: 320 },
    { name: '中药学', icon: '🌿', count: 280 },
    { name: '方剂学', icon: '📋', count: 256 },
    { name: '针灸学', icon: '📍', count: 198 },
    { name: '诊断学', icon: '🔍', count: 215 },
    { name: '内科学', icon: '🏥', count: 342 },
  ]

  build() {
    Scroll() {
      Column({ space: 16 }) {
        // 顶部搜索栏
        Row() {
          Text('🔍 搜索题目...')
            .fontSize(14).fontColor('#999')
            .layoutWeight(1)
            .padding({ top: 10, bottom: 10, left: 16 })
            .backgroundColor('#F5F5F5')
            .borderRadius(20)
        }
        .padding(16)

        // 学习统计卡片
        Row({ space: 16 }) {
          Column({ space: 4 }) {
            Text('128').fontSize(24).fontWeight(FontWeight.Bold).fontColor('#007AFF')
            Text('已学题目').fontSize(12).fontColor('#999')
          }
          .layoutWeight(1)

          Column({ space: 4 }) {
            Text('78%').fontSize(24).fontWeight(FontWeight.Bold).fontColor('#34C759')
            Text('正确率').fontSize(12).fontColor('#999')
          }
          .layoutWeight(1)

          Column({ space: 4 }) {
            Text('7天').fontSize(24).fontWeight(FontWeight.Bold).fontColor('#FF9500')
            Text('连续学习').fontSize(12).fontColor('#999')
          }
          .layoutWeight(1)
        }
        .width('100%')
        .padding(20)
        .backgroundColor(Color.White)
        .borderRadius(12)
        .margin({ left: 16, right: 16 })

        // 分类网格
        Text('📚 题库分类')
          .fontSize(18).fontWeight(FontWeight.Bold)
          .width('100%').padding({ left: 16 })

        Flex({ wrap: FlexWrap.Wrap }) {
          ForEach(this.categories, (cat: object) => {
            Column({ space: 8 }) {
              Text(cat['icon']).fontSize(32)
              Text(cat['name']).fontSize(14).fontWeight(FontWeight.Medium)
              Text(`${cat['count']}题`).fontSize(11).fontColor('#999')
            }
            .width('30%')
            .padding(16)
            .backgroundColor(Color.White)
            .borderRadius(12)
            .margin(6)
            .onClick(() => {
              router.pushUrl({
                url: 'pages/StudyPage',
                params: { category: cat['name'] }
              })
            })
          }, (cat: object) => cat['name'])
        }
        .padding({ left: 10, right: 10 })
      }
    }
    .width('100%').height('100%')
    .backgroundColor('#F5F5F5')
  }
}

// ===== 学习Tab =====
@Component
struct StudyTab {
  build() {
    Column({ space: 16 }) {
      Text('📖 学习模式').fontSize(28).fontWeight(FontWeight.Bold).margin(20)

      // 学习模式选择
      ForEach([
        { title: '顺序学习', desc: '按章节顺序刷题', icon: '📝', color: '#007AFF' },
        { title: '随机练习', desc: '随机抽取题目', icon: '🎲', color: '#FF9500' },
        { title: '错题回顾', desc: '复习做错的题目', icon: '❌', color: '#FF3B30' },
        { title: '收藏夹', desc: '查看收藏的重点题', icon: '⭐', color: '#FFD700' },
      ], (mode: object) => {
        Row() {
          Text(mode['icon']).fontSize(28).width(50)
          Column({ space: 4 }) {
            Text(mode['title']).fontSize(17).fontWeight(FontWeight.Medium)
            Text(mode['desc']).fontSize(13).fontColor('#999')
          }
          .alignItems(HorizontalAlign.Start)
          .layoutWeight(1)
          Text('›').fontSize(24).fontColor('#CCC')
        }
        .width('100%')
        .padding(20)
        .backgroundColor(Color.White)
        .borderRadius(12)
        .margin({ left: 16, right: 16 })
        .onClick(() => {
          router.pushUrl({ url: 'pages/StudyPage', params: { mode: mode['title'] } })
        })
      }, (mode: object) => mode['title'])
    }
    .width('100%').height('100%')
    .backgroundColor('#F5F5F5')
  }
}

// ===== 我的Tab =====
@Component
struct ProfileTab {
  @State name: string = '学习者'
  @State totalStudied: number = 128
  @State accuracy: number = 78

  build() {
    Scroll() {
      Column({ space: 16 }) {
        // 头像 + 名字
        Column({ space: 12 }) {
          Text(this.name.charAt(0))
            .fontSize(36).fontColor(Color.White)
            .width(80).height(80).borderRadius(40)
            .backgroundColor('#007AFF')
            .textAlign(TextAlign.Center)
          Text(this.name).fontSize(22).fontWeight(FontWeight.Bold)
          Text(`正确率 ${this.accuracy}%`).fontSize(14).fontColor('#999')
        }
        .width('100%').padding(30)
        .backgroundColor(Color.White)

        // 数据统计
        Row() {
          Column({ space: 4 }) {
            Text(`${this.totalStudied}`).fontSize(20).fontWeight(FontWeight.Bold)
            Text('已学').fontSize(12).fontColor('#999')
          }
          .layoutWeight(1)

          Column({ space: 4 }) {
            Text('23').fontSize(20).fontWeight(FontWeight.Bold)
            Text('收藏').fontSize(12).fontColor('#999')
          }
          .layoutWeight(1)

          Column({ space: 4 }) {
            Text('45').fontSize(20).fontWeight(FontWeight.Bold)
            Text('错题').fontSize(12).fontColor('#999')
          }
          .layoutWeight(1)
        }
        .width('100%').padding(16)
        .backgroundColor(Color.White)
        .margin({ left: 16, right: 16 })
        .borderRadius(12)

        // 功能列表
        ForEach([
          { icon: '📊', title: '学习报告' },
          { icon: '⭐', title: '我的收藏' },
          { icon: '❌', title: '错题本' },
          { icon: '📥', title: '导入题库' },
          { icon: '⚙️', title: '设置' },
          { icon: '💬', title: '意见反馈' },
        ], (item: object) => {
          Row() {
            Text(item['icon']).fontSize(20).width(40)
            Text(item['title']).fontSize(16).layoutWeight(1)
            Text('›').fontSize(20).fontColor('#CCC')
          }
          .width('100%')
          .padding(16)
          .backgroundColor(Color.White)
          .borderRadius(8)
          .margin({ left: 16, right: 16 })
        }, (item: object) => item['title'])
      }
    }
    .width('100%').height('100%')
    .backgroundColor('#F5F5F5')
  }
}

@Component
struct Counter {
  @State count: number = 0       // @State: 改了UI就自动刷新

  build() {
    Column({ space: 20 }) {
      Text(`${this.count}`).fontSize(80)
      Text('+1').onClick(() => { this.count++ })   // 改状态 → UI刷新
      Text('-1').onClick(() => { this.count-- })   // 改状态 → UI刷新
    }
  }
}

// ===== 子组件：一个开关行 =====
@Component
struct ToggleItem {
  @Prop label: string           // @Prop 父传子：子组件接收，不能改
  @Link isOn: boolean           // @Link 双向绑定：子改了父也改

  build() {
    Row() {
      Text(this.label)
        .fontSize(16)
        .layoutWeight(1)

      Toggle({ type: ToggleType.Switch, isOn: this.isOn })
        // Toggle 开关组件
        .onChange((value: boolean) => {
          this.isOn = value     // 子改@Link → 父的@State同步更新
        })
    }
    .width('100%')
    .padding(16)
  }
}

// ===== 父组件：设置页 =====
@Entry
@Component
struct SettingsPage {
  @State wifiOn: boolean = false      // @State 自有状态
  @State bluetoothOn: boolean = true
  @State notificationOn: boolean = true

  build() {
    Column() {
      Text('设置').fontSize(28).fontWeight(FontWeight.Bold).margin(20)

      ToggleItem({
        label: 'WiFi',
        isOn: $wifiOn       // $ 语法：表示双向绑定(把@State变成@Link传下去)
      })
      //      ↑ 加了$，子组件改isOn时，wifiOn也会变

      ToggleItem({
        label: '蓝牙',
        isOn: $bluetoothOn
      })

      ToggleItem({
        label: '通知',
        isOn: $notificationOn
      })

      // 显示当前状态
      Text(`WiFi: ${this.wifiOn ? '开' : '关'} | 蓝牙: ${this.bluetoothOn ? '开' : '关'} | 通知: ${this.notificationOn ? '开' : '关'}`)
        .fontSize(14)
        .fontColor('#999')
        .margin(20)
    }
  }
}

// 场景：主题色从App层传到任意深层页面，中间组件不需要逐层传递

// ===== 顶层(祖先) =====
@Entry
@Component
struct App {
  @Provide('themeColor') themeColor: string = '#007AFF'
  // @Provide('键名') 提供数据：所有后代都可以用@Consume读取

  build() {
    Column() {
      HomePage()    // 中间层HomePage不需要知道themeColor
    }
  }
}

// ===== 任意深层后代 =====
@Component
struct DeepChildPage {
  @Consume('themeColor') themeColor: string
  // @Consume('键名') 消费数据：直接读取祖先提供的值

  build() {
    Column() {
      Text('主题色按钮')
        .fontColor(this.themeColor)
    }
  }
}

// AppStorage 应用存储：内存级别的全局状态，适合存登录态、设置

// 写入全局状态
AppStorage.setOrCreate('isLoggedIn', true)   // setOrCreate 设置或创建
AppStorage.setOrCreate('userName', '张三')

// 读取 + 绑定全局状态
@Entry
@Component
struct HomePage {
  @StorageLink('isLoggedIn') isLoggedIn: boolean = false
  // @StorageLink('键名') 绑定全局状态：值变了自动刷新

  @StorageLink('userName') userName: string = ''

  build() {
    Column() {
      if (this.isLoggedIn) {
        Text(`你好，${this.userName}`).fontSize(24)
        Text('退出登录')
          .fontColor(Color.White).backgroundColor('#FF3B30')
          .borderRadius(8).padding(12)
          .onClick(() => {
            AppStorage.setOrCreate('isLoggedIn', false)
            // 改全局状态 → 所有绑定了isLoggedIn的组件自动刷新
          })
      } else {
        Text('请登录').fontSize(24)
        Text('登录')
          .fontColor(Color.White).backgroundColor('#007AFF')
          .borderRadius(8).padding(12)
          .onClick(() => {
            AppStorage.setOrCreate('isLoggedIn', true)
          })
      }
    }
  }
}

// @Observed 被观察类：这个类的实例变化时，绑定的组件会刷新

@Observed
class Question {
  // @Observed 声明这个类可被观察
  id: number = 0
  title: string = ''
  isFavorite: boolean = false    // 收藏状态

  toggleFavorite(): void {
    this.isFavorite = !this.isFavorite
  }
}

@Component
struct QuestionItem {
  @ObjectLink question: Question
  // @ObjectLink 对象绑定：绑定@Observed对象，内部属性变化时刷新

  build() {
    Row() {
      Text(this.question.title).layoutWeight(1)
      Text(this.question.isFavorite ? '❤️' : '🤍')  // 收藏状态自动刷新
        .fontSize(24)
        .onClick(() => {
          this.question.toggleFavorite()  // 修改对象属性 → UI自动刷新
        })
    }
  }
}

// ===== 数据模型 =====
@Observed
class Product {
  id: number = 0
  name: string = ''
  price: number = 0
  icon: string = ''
}

@Observed
class CartItem {
  product: Product
  quantity: number = 1

  constructor(product: Product) {
    this.product = product
  }

  get subtotal(): number {
    return this.product.price * this.quantity
  }
}

// ===== 顶层App：提供全局购物车状态 =====
@Entry
@Component
struct ShopApp {
  @Provide('cartItems') cartItems: CartItem[] = []
  @Provide('cartCount') cartCount: number = 0

  @State currentTab: number = 0

  build() {
    Tabs({ index: this.currentTab }) {
      TabContent() { ProductListPage() }
        .tabBar('商品')
      TabContent() { CartPage() }
        .tabBar(`购物车(${this.cartCount})`)
    }
    .barPosition(BarPosition.End)
    .onChange((index: number) => { this.currentTab = index })
  }
}

// ===== 商品列表页 =====
@Component
struct ProductListPage {
  @Consume('cartItems') cartItems: CartItem[]
  @Consume('cartCount') cartCount: number

  @State products: Product[] = [
    { id: 1, name: '中医基础理论', price: 39.9, icon: '📘' },
    { id: 2, name: '中药学速记', price: 29.9, icon: '🌿' },
    { id: 3, name: '针灸学图谱', price: 49.9, icon: '📍' },
    { id: 4, name: '方剂学精讲', price: 35.0, icon: '📋' },
    { id: 5, name: '伤寒论导读', price: 42.0, icon: '📜' },
  ]

  addToCart(product: Product): void {
    let existing = this.cartItems.find((item: CartItem) => item.product.id === product.id)
    if (existing) {
      existing.quantity++
    } else {
      this.cartItems.push(new CartItem(product))
    }
    this.cartCount = this.cartItems.length
  }

  build() {
    Column() {
      Text('📚 中医书城')
        .fontSize(28).fontWeight(FontWeight.Bold)
        .width('100%').padding(20)

      Scroll() {
        Column({ space: 12 }) {
          ForEach(this.products, (product: Product) => {
            Row() {
              Text(product.icon).fontSize(36).width(50)
              Column({ space: 4 }) {
                Text(product.name).fontSize(16).fontWeight(FontWeight.Medium)
                Text(`¥${product.price}`).fontSize(14).fontColor('#FF3B30')
              }
              .alignItems(HorizontalAlign.Start)
              .layoutWeight(1)

              Text('加入购物车')
                .fontSize(12).fontColor(Color.White)
                .backgroundColor('#007AFF')
                .borderRadius(4)
                .padding({ top: 6, bottom: 6, left: 12, right: 12 })
                .onClick(() => this.addToCart(product))
            }
            .width('100%')
            .padding(16)
            .backgroundColor(Color.White)
            .borderRadius(12)
          }, (product: Product) => `${product.id}`)
        }
        .padding({ left: 16, right: 16 })
      }
      .layoutWeight(1)
    }
    .width('100%').height('100%')
    .backgroundColor('#F5F5F5')
  }
}

// ===== 购物车页面 =====
@Component
struct CartPage {
  @Consume('cartItems') cartItems: CartItem[]
  @Consume('cartCount') cartCount: number

  get totalPrice(): number {
    return this.cartItems.reduce((sum: number, item: CartItem) => sum + item.subtotal, 0)
  }

  build() {
    Column() {
      Text('🛒 购物车')
        .fontSize(28).fontWeight(FontWeight.Bold)
        .width('100%').padding(20)

      if (this.cartItems.length === 0) {
        Column({ space: 12 }) {
          Text('🛒').fontSize(64)
          Text('购物车是空的').fontSize(16).fontColor('#999')
        }
        .layoutWeight(1)
        .justifyContent(FlexAlign.Center)
      } else {
        Scroll() {
          Column({ space: 8 }) {
            ForEach(this.cartItems, (item: CartItem, index: number) => {
              Row() {
                Text(item.product.icon).fontSize(28).width(40)
                Column({ space: 4 }) {
                  Text(item.product.name).fontSize(15)
                  Text(`¥${item.product.price}`).fontSize(13).fontColor('#FF3B30')
                }
                .alignItems(HorizontalAlign.Start)
                .layoutWeight(1)

                Row({ space: 12 }) {
                  Text('-')
                    .fontSize(18).width(28).height(28)
                    .textAlign(TextAlign.Center)
                    .backgroundColor('#F0F0F0').borderRadius(14)
                    .onClick(() => {
                      if (item.quantity > 1) {
                        item.quantity--
                      } else {
                        this.cartItems.splice(index, 1)
                        this.cartCount = this.cartItems.length
                      }
                    })
                  Text(`${item.quantity}`)
                    .fontSize(16).width(30).textAlign(TextAlign.Center)
                  Text('+')
                    .fontSize(18).width(28).height(28)
                    .textAlign(TextAlign.Center)
                    .backgroundColor('#007AFF').fontColor(Color.White)
                    .borderRadius(14)
                    .onClick(() => { item.quantity++ })
                }
              }
              .width('100%')
              .padding(16)
              .backgroundColor(Color.White)
              .borderRadius(12)
            }, (item: CartItem, index: number) => `${item.product.id}-${index}`)
          }
          .padding({ left: 16, right: 16 })
        }
        .layoutWeight(1)

        // 底部结算栏
        Row() {
          Column({ space: 2 }) {
            Text(`合计：¥${this.totalPrice.toFixed(2)}`)
              .fontSize(18).fontWeight(FontWeight.Bold).fontColor('#FF3B30')
            Text(`共${this.cartItems.length}件商品`)
              .fontSize(12).fontColor('#999')
          }
          .alignItems(HorizontalAlign.Start)
          .layoutWeight(1)

          Text('去结算')
            .fontSize(16).fontWeight(FontWeight.Bold)
            .fontColor(Color.White)
            .backgroundColor('#FF3B30')
            .borderRadius(22)
            .padding({ top: 12, bottom: 12, left: 32, right: 32 })
            .onClick(() => {
              AlertDialog.show({ message: `总价: ¥${this.totalPrice.toFixed(2)}` })
            })
        }
        .width('100%')
        .padding(16)
        .backgroundColor(Color.White)
      }
    }
    .width('100%').height('100%')
    .backgroundColor('#F5F5F5')
  }
}