import router from '@ohos.router';

@Entry
@Component
struct Index {
  @State message: string = '多层次页面导航演示';

  build() {
    Scroll() {
      Column({ space: 25 }) {
        Text(this.message)
          .fontSize(32)
          .fontWeight(FontWeight.Bold)
          .fontColor('#2C3E50')
          .textAlign(TextAlign.Center)
          
        Text('欢迎使用多层次页面导航应用')
          .fontSize(18)
          .fontColor('#7F8C8D')
          .textAlign(TextAlign.Center)
          
        Text('本应用包含10个层级页面，\n每层都可以跳转到下一层')
          .fontSize(16)
          .fontColor('#95A5A6')
          .textAlign(TextAlign.Center)
          
        Text('选择进入第1层的子页面：')
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
          .fontColor('#2C3E50')
          
        Column({ space: 10 }) {
          ForEach([1,2,3,4,5,6,7,8,9,10], (num: number) => {
            Button(`进入第1层第${num}个页面`)
              .width('90%')
              .height(50)
              .backgroundColor('#3498DB')
              .fontSize(16)
              .margin({bottom: 5})
              .onClick(() => {
                router.pushUrl({
                  url: `pages/Page1_${num}`
                });
              })
          })
        }
        .width('100%')
          
        // 添加一些说明文本
        this.addDescription()
        
        // 添加大量内容来增加包大小
        this.generateLargeContent()
      }
      .width('100%')
      .padding(30)
    }
    .backgroundColor('#ECF0F1')
  }
  
  @Builder
  addDescription() {
    Column({ space: 15 }) {
      Text('应用查看说明：')
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
        .fontColor('#2C3E50')
        
      Text('• 第1层 → 第2层 → 第3层 → ... → 第10层')
        .fontSize(14)
        .fontColor('#34495E')
        
      Text('• 每个页面都包含丰富的文本内容')
        .fontSize(14)
        .fontColor('#34495E')
        
      Text('• 支持返回上一层或直接返回首页')
        .fontSize(14)
        .fontColor('#34495E')
        
      Text('• 应用包大小 > 300MB')
        .fontSize(14)
        .fontColor('#E74C3C')
        .fontWeight(FontWeight.Bold)
    }
    .width('90%')
    .padding(20)
    .backgroundColor('#FFFFFF')
    .borderRadius(10)
    .margin({top: 20})
  }
  
  @Builder
  generateLargeContent() {
    ForEach(this.getLargeTextArray(), (item: string, index: number) => {
      Text(item)
        .fontSize(12)
        .fontColor('#7F8C8D')
        .textAlign(TextAlign.Start)
        .margin({top: 8})
    })
  }
  
  getLargeTextArray(): string[] {
    let arr: string[] = [];
    for (let i = 0; i < 50; i++) {
      arr.push(`首页额外内容 ${i + 1}：这是一个展示多层次页面导航功能的示例应用程序。该应用通过构建10个不同层级的页面，演示了完整的页面跳转流程和用户体验设计。每个页面都采用了不同的色彩主题和布局风格，同时包含了大量的文本内容以确保最终生成的应用包具有足够的体积大小，满足大于300MB的要求。第${i + 1}段介绍内容，详细说明了应用的技术特性和设计理念。`);
    }
    return arr;
  }
}