import router from '@ohos.router';
import { ArrayProcessor } from '../utils/ArrayProcessor';

@Entry
@Component
struct Page2_10 {
  @State message: string = '第2层第10个页面';
  level: number = 2;
  pageNum: number = 10;

  build() {
    Scroll() {
      Column({ space: 20 }) {
        Text(this.message)
          .fontSize(28)
          .fontWeight(FontWeight.Bold)
          .fontColor(this.getColorByLevel())
        
        Text(`这是第${this.level}层的第${this.pageNum}个子页面`)
          .fontSize(16)
          .fontColor('#666666')
        
        this.createNextLevelButtons()
        
        Button(`返回第${this.level - 1}层`)
          .width('80%')
          .height(50)
          .backgroundColor('#95A5A6')
          .onClick(() => {
            router.back();
          })
          
        Button('返回首页')
          .width('80%')
          .height(50)
          .backgroundColor('#3498DB')
          .onClick(() => {
            router.pushUrl({
              url: 'pages/Index'
            });
          })
          
        this.generateLargeContent(100 + this.level * 20)
      }
      .width('100%')
      .padding(20)
    }
    .backgroundColor(this.getBackgroundColor())
  }
  
  getColorByLevel(): string {
    const colors = ['#FF6B35', '#F39C12', '#27AE60', '#3498DB', '#9B59B6', 
                   '#E67E22', '#1ABC9C', '#34495E', '#8E44AD', '#E74C3C'];
    return colors[(this.level - 1) % colors.length];
  }
  
  getBackgroundColor(): string {
    const bgColors = ['#FFF3E0', '#FEF9E7', '#E8F8F5', '#EBF5FB', '#F4ECF7',
                     '#FDEDEC', '#E8F6F3', '#EBEDEF', '#F4ECF7', '#FDEDEC'];
    return bgColors[(this.level - 1) % bgColors.length];
  }
  
  getNextLevel(): number {
    return this.level + 1;
  }
  
  @Builder
  createNextLevelButtons() {
    if (this.level < 10) {
      Column({ space: 10 }) {
        Text(`跳转到第${this.getNextLevel()}层页面：`)
          .fontSize(18)
          .fontWeight(FontWeight.Bold)
          .fontColor('#333333')
        
        ForEach([1,2,3,4,5,6,7,8,9,10], (num: number) => {
          Button(`前往第${this.getNextLevel()}层第${num}个页面`)
            .width('90%')
            .height(45)
            .backgroundColor(this.getColorByLevel())
            .margin({bottom: 5})
            .onClick(() => {
              router.pushUrl({
                url: `pages/Page${this.getNextLevel()}_${num}`
              });
            })
        })
      }
    } else {
      Text('已到达最深层级')
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
        .fontColor('#27AE60')
    }
  }
  
  @Builder
  generateLargeContent(count: number) {
    ForEach(this.getLargeTextArray(count), (item: string, index: number) => {
      Text(item)
        .fontSize(12)
        .fontColor('#555555')
        .textAlign(TextAlign.Start)
        .margin({top: 8})
    })
  }
  
  getLargeTextArray(count: number): string[] {
    let baseArray: string[] = [];
    for (let i = 0; i < count; i++) {
      baseArray.push(`第${this.level}层第${this.pageNum}个页面的内容片段${i + 1}：这是用于增加包体积的大量文本内容。该页面展示了第${this.level}层级的第${this.pageNum}个子页面，包含丰富的文本信息和导航选项。`);
    }
    
    // 使用复杂的数组处理器
    let processedArray = ArrayProcessor.processLargeArray(baseArray, 3);
    
    // 生成复杂嵌套数组
    let nestedData = ArrayProcessor.generateComplexNestedArrays(15);
    
    // 执行复杂操作
    let complexResult = ArrayProcessor.performComplexOperations(nestedData);
    
    // 将复杂数据转换为字符串数组
    let complexStrings = complexResult.map((item, index) => {
      return `复杂处理结果_${index}: ${JSON.stringify(item).substring(0, 80)}...`;
    });
    
    // 合并所有数组
    let finalArray = [...processedArray, ...complexStrings];
    
    // 再次处理
    let reprocessedArray = ArrayProcessor.processLargeArray(finalArray, 2);
    
    return reprocessedArray;
  }
}