import { HomeItem } from "../viewmodel/LocalBean";
import HomeViewModel from "../viewmodel/HomeViewModel";
import { CuteParams } from "@ohos/common/src/main/ets/viewmodel/ParamBean";
import { ToastUtils } from "@ohos/common/src/main/ets/dialog/ToastUtils";
import { UniIconEntity, UniVersionEntity, UserProfile } from "@ohos/common/src/main/ets/viewmodel/DataBean";
import { USER_PROFILE } from "@ohos/common/src/main/ets/constants/AppConstants";
import { downStartUp, downStartUpForPath } from "@ohos/common/src/main/ets/utils/UniMpManager";
import { Logger } from "@ohos/common";
import { setUniMpNeedDownload } from "@ohos/common/src/main/ets/utils/KVManager";
import { GlobalDownloadingDialog } from '@ohos/common/src/main/ets/dialog/GlobalDownloadingDialog';
import { UpdateTipsDialog } from "@ohos/common/src/main/ets/dialog/UpdateTipsDialog";
import { openAppStore, getAppVersion } from '@ohos/common/src/main/ets/utils/AppUtils';
import { common } from "@kit.AbilityKit";
import { StringUtils } from "@ohos/common/src/main/ets/utils/StringUtils";
import emitter from "@ohos.events.emitter";
import { EVT_USER_CONFIG_PROFILE } from "@ohos/common/src/main/ets/constants/EventConstants";

@Component
export struct HomeComponent {
  @Consume('pageInfos') pageStack: NavPathStack;
  @State resizeItems: HomeItem[] = HomeViewModel.getResizeData();
  @State certificateItems: HomeItem[] = HomeViewModel.getCertificateData();
  @State otherItems: HomeItem[] = HomeViewModel.getOtherData();


  @State profile: UserProfile | undefined = undefined;

  // UniMp 相关状态
  @State uniMpVersions: UniVersionEntity[] = []
  @State downloadWxProgress: number = 0
  @State downloadAlipayProgress: number = 0
  @State downloadWxStatus: number = 0
  @State downloadAlipayStatus: number = 0
  @State private uniMpDatas: UniIconEntity[] = []
  @State downloadProgress: number = 0;

  // 版本信息 相关状态
  @State targetVersion: string = '';
  @State isForceUpdate: boolean = false;

  @State uniMpEnable: boolean = false
  itemPadding: number = 6;

  context = getContext(this) as common.UIAbilityContext;

  // 版本更新提示
  appUpdateTipsController: CustomDialogController = new CustomDialogController({
    builder: UpdateTipsDialog({
      title: '新版本提示',
      version: 'v' + this.targetVersion,
      desc: this.profile?.config?.versionEntity?.description?? '',
      confirmText: '立即更新',
      cancelText: '暂不',
      isForce: this.isForceUpdate,
      cancel: () => { console.info('用户点击取消') },
      confirm: () => {
        openAppStore(this.context)
      }
    }),
    alignment: DialogAlignment.Center, // 居中显示
    customStyle: true, // 使用自定义样式，去掉系统默认背景
    autoCancel: !this.isForceUpdate, // 点击遮罩层可关闭
    onWillDismiss: (dismissDialogAction: DismissDialogAction) => {
      // DismissReason.PRESS_BACK 表示物理返回键或手势滑动返回
      if (dismissDialogAction.reason === DismissReason.PRESS_BACK) {
        if (this.isForceUpdate) { // 如果是强制更新，不执行 dismiss()，从而拦截返回行为
          console.info('强制更新状态，禁用手势返回');
        } else { // 非强制更新则允许关闭
          dismissDialogAction.dismiss();
        }
      }
    }
  })
  // UniMp下载进度提示
  downloadingController: CustomDialogController = new CustomDialogController({
    builder: GlobalDownloadingDialog({
      progress: this.downloadProgress,
    }),
    alignment: DialogAlignment.Center, // 居中显示
    customStyle: true, // 使用自定义样式，去掉系统默认背景
    autoCancel: true // 点击遮罩层可关闭
  })

  uniMpMpDeal(){
    getAppVersion().then(version => {
      // 版本更新，目标版本
      this.targetVersion = this.profile?.config?.versionEntity?.version?? ''
      this.isForceUpdate = this.profile?.config?.versionEntity?.force?? false

      // 更新：1.有更新弹出更新提示确认框 2.没更新则提示无更新
      if(StringUtils.checkVersionLegal(version, this.targetVersion) && StringUtils.isNewVersionAvailable(version, this.targetVersion)){
        this.appUpdateTipsController.open()
      }
    });
    this.profile = AppStorage.get<UserProfile>(USER_PROFILE);
    // 模拟器
    this.uniMpVersions = this.profile?.config?.uniVersionList || [];
    this.uniMpDatas = this.profile?.config?.homeIconEntity || [];

    this.uniMpEnable = this.profile?.config?.isUniMpOpen?? false
  }

  aboutToAppear() {
    this.uniMpMpDeal()

    // 事件监听
    emitter.on({ eventId: EVT_USER_CONFIG_PROFILE }, (eventData: emitter.EventData) => {
      const payload = eventData.data;
      if (payload) {
        const result = payload["result"] as boolean;
        if (result === true) {
          //记得一定要延迟更新，否则接口未请求完成
          setTimeout(() => {
            this.uniMpMpDeal()
          }, 1000);
        }
      }
    });
  }

  build() {
    // 父容器 Column 默认从顶部开始排列
    Column() {
      List() {
        // 顶部图片
        ListItem() {
          Image($r('app.media.ic_home_top_image')).width('100%')
        }
        if(this.uniMpEnable){
          //模拟器（2位）
          ListItem() {
            Column(){
              //模拟器标题
              Image($r('app.media.ic_home_unimp_title_icon')).width('67vp').height('26vp')

              //模拟器支付宝、微信
              Row({ space: 7 }){
                Stack(){
                  Image($r('app.media.ic_unimp_wx_pld'))
                    .width('100%')
                    .onClick(()=> {
                      uniMpMpDeal(this.getUIContext(), this.uniMpVersions, 0, (status, progress, path) => {
                        this.downloadWxStatus = status
                        if(status===1){
                          this.downloadWxProgress = progress
                        }
                        if(status === 2){
                          // 下载完成,记录版本信息和下载路径
                          let uniMpVersion = this.uniMpVersions[0]
                          setUniMpNeedDownload(uniMpVersion.unimp_id??'', uniMpVersion.unimp_type??'', uniMpVersion.version??'', path??'')
                        }else if (status === 3){
                          // 已启动（运行）
                        }

                        Logger.info('uniMp', 'downloadWxProgress: ' + this.downloadWxProgress + ', path: ' + path)
                      })
                    })
                  if(this.downloadWxStatus === 1){
                    Stack(){
                      Column(){
                        Progress({
                          value: this.downloadWxProgress,
                          total: 100,
                          type: ProgressType.Linear
                        })
                          .width('100%')
                          .height(10)
                          .color('#ff4f8af6')
                          .backgroundColor('#ebebeb')
                          .style({ strokeWidth: 10, enableSmoothEffect: true })

                        Text('下载中，请稍后：' + this.downloadWxProgress + '%').fontColor(Color.White).fontSize(12).margin({ top: 4})
                      }
                      .margin({ left:8, right:8 })
                    }
                    .width('100%')
                    .height('100%')
                    .backgroundColor('#99000000')
                    .borderRadius(12)
                  }
                }
                .width('100%')
                .aspectRatio(168/96)
                .layoutWeight(1)


                Stack(){
                  Image($r('app.media.ic_unimp_alipay_pld'))
                    .width('100%')
                    .aspectRatio(168/96)
                    .layoutWeight(1)
                    .onClick(()=> {
                      uniMpMpDeal(this.getUIContext(), this.uniMpVersions, 1, (status, progress, path) => {
                        this.downloadAlipayStatus = status
                        if(status===1){
                          this.downloadAlipayProgress = progress
                        }
                        if(status === 2){
                          // 下载完成,记录版本信息和下载路径
                          let uniMpVersion = this.uniMpVersions[1]
                          setUniMpNeedDownload(uniMpVersion.unimp_id??'', uniMpVersion.unimp_type??'', uniMpVersion.version??'', path??'')
                        }else if (status === 3){
                          // 已启动（运行）
                        }

                        Logger.info('uniMp', 'downloadAlipayProgress: ' + this.downloadAlipayProgress + ', path: ' + path)
                      })
                    })
                  if(this.downloadAlipayStatus === 1){
                    Stack(){
                      Column(){
                        Progress({
                          value: this.downloadAlipayProgress,
                          total: 100,
                          type: ProgressType.Linear
                        })
                          .width('100%')
                          .height(10)
                          .color('#ff4f8af6')
                          .backgroundColor('#ebebeb')
                          .style({ strokeWidth: 10, enableSmoothEffect: true })

                        Text('下载中，请稍后：' + this.downloadAlipayProgress + '%').fontColor(Color.White).fontSize(12).margin({ top: 4})
                      }
                      .margin({ left:8, right:8 })
                    }
                    .width('100%')
                    .height('100%')
                    .backgroundColor('#99000000')
                    .borderRadius(12)
                  }
                }
                .width('100%')
                .aspectRatio(168/96)
                .layoutWeight(1)
              }
              .width('100%')
              .padding({ top: 12})
            }
            .padding({ top: 12, left: 16, right: 16})
            .backgroundColor($r('app.color.normal_background'))
            .borderRadius(18)
            .width('100%') // 必须设置宽度，否则无法感知“左侧”在哪里
            .alignItems(HorizontalAlign.Start) // 设置子组件水平靠左对齐
            .justifyContent(FlexAlign.Start)   // 设置子组件垂直靠顶对齐（默认即是）
          }
          .offset({ y: -(this.itemPadding * 3) })
          // 如果希望整体列表都往上提，可以去掉 index 判断直接设为 -20
          .zIndex(1) // 确保列表项层级高于图片，实现“覆盖”效果

          // 模拟器（3~4位）
          ListItem() {
            Grid() {
              ForEach(this.uniMpDatas, (item: UniIconEntity) => {
                GridItem() {
                  Column(){
                    Image(item.icon).width(48).height(48)

                    Text(item.text)
                      .width('100%')
                      .fontSize(12)
                      .fontColor('#000000')
                      .margin({ top: 8})
                      .backgroundColor('#FFFFFF')
                      .textAlign(TextAlign.Center)
                      .borderRadius(12)
                  }
                  .onClick(()=> {
                    this.downloadingController.open()
                    downStartUpForPath(this.getUIContext(), this.uniMpVersions, item, (status, progress, path) => {
                      Logger.info('uniMp', 'downStartUpForPath: ' + status + ', progress: ' + progress + ', path: ' + path)
                      if(status===1){
                        this.downloadProgress = progress
                      }else{
                        this.downloadingController.close()
                      }
                    })
                  })
                }
              }, (item: UniIconEntity) => item.url)
            }
            // 动态列数：数据 > 8 显示 3 列，否则 4 列
            .columnsTemplate(this.uniMpDatas.length > 8 ? '1fr 1fr 1fr' : '1fr 1fr 1fr 1fr')
            .columnsGap(10)
            .rowsGap(10)
            .width('100%')
            // 由内容撑开高度，禁用 Grid 内部滚动，交给外层 List 处理
            .scrollBar(BarState.Off)
            .nestedScroll({
              scrollForward: NestedScrollMode.SELF_FIRST,
              scrollBackward: NestedScrollMode.SELF_FIRST
            })
            // 如果 Grid 不设置高度，它会尝试占满。在 List 中建议根据行数计算高度
            // 或者直接不设高度，依赖内部子组件高度和 Gap
            .height(this.calculateUniMpGridHeight())
          }
          .offset({ y: -this.itemPadding })
        }

        if(this.uniMpEnable){
          // 选尺寸制作（Resize）
          ListItem() {
            Column() {
              //选尺寸制作标题
              Image($r('app.media.ic_home_cute_title_icon')).width('101vp').height('26vp')
              //选尺寸制作内容
              Grid() {
                ForEach(this.resizeItems, (item: HomeItem) => {
                  GridItem() {
                    Stack(){
                      Image(item.icon).width('100%').layoutWeight(1)

                      Column() {
                        Text(item.name)
                          .width('100%')
                          .fontSize(12)
                          .textAlign(TextAlign.Start)
                          .fontColor('#000000')
                          .margin({ top: 8})
                          .borderRadius(12)

                        Text(item.resize)
                          .width('100%')
                          .fontSize(12)
                          .textAlign(TextAlign.Start)
                          .fontColor('#000000')
                          .margin({ top: 8})
                          .borderRadius(12)
                      }
                      .padding({ left: '40%' })
                      .align(Alignment.Start)
                    }
                    .onClick(() => {
                      const params: CuteParams = {
                        id: item.id,
                        name: "抠图尺寸",
                        width: item.width,
                        height: item.height,
                      };
                      this.pageStack.pushPathByName("CuteLayout", params);
                    })
                  }
                }, (item: HomeItem) => item.id.toString())
              }
              .columnsTemplate('1fr 1fr')
              .columnsGap(10)
              .rowsGap(10)
              .width('100%')
              .scrollBar(BarState.Off)
              .nestedScroll({
                scrollForward: NestedScrollMode.SELF_FIRST,
                scrollBackward: NestedScrollMode.SELF_FIRST
              })
              .height(this.calculateResizeGridHeight())
              .padding({ top: 12})
            }
            .padding({ top: 12, left: 16, right: 16})
            .backgroundColor($r('app.color.normal_background'))
            .width('100%') // 必须设置宽度，否则无法感知“左侧”在哪里
            .alignItems(HorizontalAlign.Start) // 设置子组件水平靠左对齐
            .justifyContent(FlexAlign.Start)   // 设置子组件垂直靠顶对齐（默认即是）
          }
          .offset({ y: -this.itemPadding })
        }else{
          // 选尺寸制作（Resize）
          ListItem() {
            Column() {
              //选尺寸制作标题
              Image($r('app.media.ic_home_cute_title_icon')).width('101vp').height('26vp')
              //选尺寸制作内容
              Grid() {
                ForEach(this.resizeItems, (item: HomeItem) => {
                  GridItem() {
                    Stack(){
                      Image(item.icon).width('100%').layoutWeight(1)

                      Column() {
                        Text(item.name)
                          .width('100%')
                          .fontSize(12)
                          .fontColor('#000000')
                          .textAlign(TextAlign.Start)
                          .margin({ top: 8})
                          .borderRadius(12)

                        Text(item.resize)
                          .width('100%')
                          .fontSize(12)
                          .fontColor('#000000')
                          .textAlign(TextAlign.Start)
                          .margin({ top: 8})
                          .borderRadius(12)
                      }
                      .padding({ left: '40%' })
                      .align(Alignment.Start)
                    }
                    .onClick(() => {
                      const params: CuteParams = {
                        id: item.id,
                        name: "抠图尺寸",
                        width: item.width,
                        height: item.height,
                      };
                      this.pageStack.pushPathByName("CuteLayout", params);
                    })
                  }
                }, (item: HomeItem) => item.id.toString())
              }
              .columnsTemplate('1fr 1fr')
              .columnsGap(10)
              .rowsGap(10)
              .width('100%')
              .scrollBar(BarState.Off)
              .nestedScroll({
                scrollForward: NestedScrollMode.SELF_FIRST,
                scrollBackward: NestedScrollMode.SELF_FIRST
              })
              .height(this.calculateResizeGridHeight())
              .padding({ top: 12})
            }
            .padding({ top: 12, left: 16, right: 16})
            .backgroundColor($r('app.color.normal_background'))
            .borderRadius(18)
            .width('100%') // 必须设置宽度，否则无法感知“左侧”在哪里
            .alignItems(HorizontalAlign.Start) // 设置子组件水平靠左对齐
            .justifyContent(FlexAlign.Start)   // 设置子组件垂直靠顶对齐（默认即是）
          }
          .offset({ y: -(this.itemPadding * 3) })
          // 如果希望整体列表都往上提，可以去掉 index 判断直接设为 -20
          .zIndex(1) // 确保列表项层级高于图片，实现“覆盖”效果
        }

        // 选证件制作
        ListItem() {
          Column() {
            //选尺寸制作标题
            Image($r('app.media.ic_home_certificate_title_icon')).width('102vp').height('26vp')
            //选尺寸制作内容
            Grid() {
              ForEach(this.certificateItems, (item: HomeItem) => {
                GridItem() {
                  Column() {
                    Column(){
                      Text(item.name)
                        .width('100%')
                        .fontSize(12)
                        .fontColor('#000000')
                        .textAlign(TextAlign.Center)
                        .borderRadius(12)

                      Text(item.resize)
                        .width('100%')
                        .fontSize(12)
                        .fontColor('#000000')
                        .textAlign(TextAlign.Center)
                        .margin({ top: 4})
                        .borderRadius(12)
                    }
                  }
                  .height('50vp')
                  .align(Alignment.Center)
                  .layoutWeight(1)
                  .borderRadius(10)
                  .linearGradient({
                    angle: 180, // 渐变角度，180度表示从上到下
                    colors: [
                      ['#FFEEFFCC', 0.0], // [颜色, 偏移量0.0-1.0]
                      ['#FFFFFFFF', 1.0]
                    ]
                  })
                  .shadow({
                    radius: 3,              // 阴影模糊半径
                    color: '#1A000000',     // 阴影颜色（建议带透明度）
                    offsetX: 0,             // X轴偏移
                    offsetY: 3              // Y轴偏移
                  })
                  .alignItems(HorizontalAlign.Center) // 设置子组件水平靠左对齐
                  .justifyContent(FlexAlign.Center)   // 设置子组件垂直靠顶对齐（默认即是）
                  .onClick(() => {
                    const params: CuteParams = {
                      id: item.id,
                      name: item.name,
                      width: item.width,
                      height: item.height,
                    };
                    this.pageStack.pushPathByName("CuteLayout", params);
                  })
                }
              }, (item: HomeItem) => item.id.toString())
            }
            .columnsTemplate('1fr 1fr 1fr 1fr')
            .columnsGap(10)
            .rowsGap(10)
            .width('100%')
            .scrollBar(BarState.Off)
            .nestedScroll({
              scrollForward: NestedScrollMode.SELF_FIRST,
              scrollBackward: NestedScrollMode.SELF_FIRST
            })
            .height(this.calculateCertificateGridHeight())
            .padding({ top: 12})
          }
          .padding({ top: 12, left: 16, right: 16})
          .backgroundColor($r('app.color.normal_background'))
          .width('100%')                                  // 必须设置宽度，否则无法感知“左侧”在哪里
          .alignItems(HorizontalAlign.Start)              // 设置子组件水平靠左对齐
          .justifyContent(FlexAlign.Start)                // 设置子组件垂直靠顶对齐（默认即是）
        }
        .offset({ y: this.uniMpEnable?-this.itemPadding : -this.itemPadding * 4 })

        // 其他
        ListItem() {
          Column() {
            //其他标题
            Image($r('app.media.ic_home_other_title')).width('51vp').height('26vp')
            //其他内容
            Grid() {
              ForEach(this.otherItems, (item: HomeItem) => {
                GridItem() {
                  Column(){
                    Image(item.icon).width(34).height(34)

                    Text(item.name)
                      .width('100%')
                      .fontSize(12)
                      .fontColor('#000000')
                      .margin({ top: 8})
                      .backgroundColor($r('app.color.normal_background'))
                      .textAlign(TextAlign.Center)
                      .borderRadius(12)
                  }
                  .onClick(()=>{
                    if("拼长图" === item.name){
                      this.pageStack.pushPathByName("LongImageLayout", null);
                    }else if("格式转换" === item.name){
                      this.pageStack.pushPathByName("FormatLayout", null);
                    }else if("改尺寸" === item.name){
                      this.pageStack.pushPathByName("ResizeLayout", null);
                    }else if("拍照指南" === item.name){
                      this.pageStack.pushPathByName("GuideLayout", null);
                    }

                  })
                }
              }, (item: HomeItem) => item.id.toString())
            }
            .columnsTemplate('1fr 1fr 1fr 1fr')
            .columnsGap(10)
            .rowsGap(10)
            .width('100%')
            .scrollBar(BarState.Off)
            .nestedScroll({
              scrollForward: NestedScrollMode.SELF_FIRST,
              scrollBackward: NestedScrollMode.SELF_FIRST
            })
            .height(this.calculateOtherGridHeight())
            .padding({ top: 12})
          }
          .padding({ left: 16, right: 16})
          .backgroundColor($r('app.color.normal_background'))
          .width('100%')                                   // 必须设置宽度，否则无法感知“左侧”在哪里
          .alignItems(HorizontalAlign.Start)               // 设置子组件水平靠左对齐
          .justifyContent(FlexAlign.Start)                 // 设置子组件垂直靠顶对齐（默认即是）
        }
        .offset({ y: this.uniMpEnable?-this.itemPadding * 6 : -this.itemPadding * 8 })
      }
      .width('100%')
      .layoutWeight(1)
      .scrollBar(BarState.Off)
      .edgeEffect(EdgeEffect.None)                        // 禁用回弹效果，使其更像普通布局
    }
    .backgroundColor($r('app.color.normal_background'))
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Start)                      // 确保在父容器中靠顶
  }

  // 计算 Grid 需要的高度：(行数 * 每行高度) + (行数-1 * 间距)
  private calculateUniMpGridHeight(): number {
    const columns = this.uniMpDatas.length > 8 ? 3 : 4;
    const rows = Math.ceil(this.uniMpDatas.length / columns);
    return (rows * 80) + ((rows - 1) * 10);
  }
  private calculateResizeGridHeight(): number {
    const columns = 2;
    const rows = Math.ceil(this.resizeItems.length / columns);
    return (rows * 80) + ((rows - 1) * 10);
  }
  private calculateCertificateGridHeight(): number {
    const columns = 4;
    const rows = Math.ceil(this.certificateItems.length / columns);
    return (rows * 80) + ((rows - 1) * 10);
  }
  private calculateOtherGridHeight(): number {
    const columns = 4;
    const rows = Math.ceil(this.otherItems.length / columns);
    return (rows * 80) + ((rows - 1) * 10);
  }
}


function uniMpMpDeal(context: UIContext, uniMpVersions: UniVersionEntity[], index: number, callback: (status: number, progress: number, path?: string) => void) {
  if (uniMpVersions && uniMpVersions.length > index) {
    let uniMpVersion = uniMpVersions[index]
    downStartUp(context, uniMpVersion, callback)
  }else{
    ToastUtils.showToast(context, '出错了~');
  }
}

/*
@Component
export struct HomeComponent {
  @State resizeItems: HomeItem[] = HomeViewModel.getResizeData();
  @State certificateItems: HomeItem[] = HomeViewModel.getCertificateData();
  @State otherItems: HomeItem[] = HomeViewModel.getOtherData();

  @State private unimpDatas: UniMpItem[] = [
    { id: '1', name: '机票', icon: $r('app.media.ic_unimp_fly_icon') },
    { id: '2', name: '火车票', icon: $r('app.media.ic_unimp_train_icon') },
    { id: '3', name: '工资单', icon: $r('app.media.ic_unimp_payroll_icon') },
    { id: '4', name: '视频群聊', icon: $r('app.media.ic_unimp_group_icon') }
  ];

  build() {
    // 父容器 Column 默认从顶部开始排列
    Column() {
      List() {
        // 顶部图片
        ListItem() {
          Image($r('app.media.ic_home_top_image')).width('100%')
        }
        //模拟器（2位）
        ListItem() {
          Column(){
            //模拟器标题
            Image($r('app.media.ic_home_unimp_title_icon')).width('67vp').height('26vp')
            //模拟器支付宝、微信
            Row({ space: 7 }){
              Image($r('app.media.ic_unimp_wx_pld')).width('100%').layoutWeight(1)
              Image($r('app.media.ic_unimp_alipay_pld')).width('100%').layoutWeight(1)
            }
            .width('100%')
            .padding({ top: 12})
          }
          .padding({ top: 12, left: 16, right: 16})
          .backgroundColor('#F1F3F5')
          .borderRadius(18)
          .width('100%') // 必须设置宽度，否则无法感知“左侧”在哪里
          .alignItems(HorizontalAlign.Start) // 【关键修复】设置子组件水平靠左对齐
          .justifyContent(FlexAlign.Start)   // 【可选】设置子组件垂直靠顶对齐（默认即是）
        }
        .offset({ y: -18 })
        // 如果希望整体列表都往上提，可以去掉 index 判断直接设为 -20
        .zIndex(1) // 确保列表项层级高于图片，实现“覆盖”效果

        // 模拟器（3~4位）
        ListItem() {
          Grid() {
            ForEach(this.unimpDatas, (item: UniMpItem) => {
              GridItem() {
                Column(){
                  Image(item.icon).width(48).height(48)

                  Text(item.name)
                    .width('100%')
                    .fontSize(12)
                    .margin({ top: 8})
                    .backgroundColor('#F1F3F5')
                    .textAlign(TextAlign.Center)
                    .borderRadius(12)
                }
              }
            }, (item: UniMpItem) => item.id.toString())
          }
          // 【关键逻辑】动态列数：数据 > 8 显示 3 列，否则 4 列
          .columnsTemplate(this.unimpDatas.length > 8 ? '1fr 1fr 1fr' : '1fr 1fr 1fr 1fr')
          .columnsGap(10)
          .rowsGap(10)
          .width('100%')
          // 【关键】由内容撑开高度，禁用 Grid 内部滚动，交给外层 List 处理
          .scrollBar(BarState.Off)
          .nestedScroll({
            scrollForward: NestedScrollMode.SELF_FIRST,
            scrollBackward: NestedScrollMode.SELF_FIRST
          })
          // 如果 Grid 不设置高度，它会尝试占满。在 List 中建议根据行数计算高度
          // 或者直接不设高度，依赖内部子组件高度和 Gap
          .height(this.calculateUniMpGridHeight())
        }
        .offset({ y: -6 })

        // 选尺寸制作（Resize）
        ListItem() {
          Column() {
            //选尺寸制作标题
            Image($r('app.media.ic_home_cute_title_icon')).width('101vp').height('26vp')
            //选尺寸制作内容
            Grid() {
              ForEach(this.resizeItems, (item: HomeItem) => {
                GridItem() {
                  Stack(){
                    Image(item.icon).width('100%').layoutWeight(1)

                    Column() {
                      Text(item.name)
                        .width('100%')
                        .fontSize(12)
                        .textAlign(TextAlign.Start)
                        .margin({ top: 8})
                        .borderRadius(12)

                      Text(item.resize)
                        .width('100%')
                        .fontSize(12)
                        .textAlign(TextAlign.Start)
                        .margin({ top: 8})
                        .borderRadius(12)
                    }
                    .padding({ left: '40%' })
                    .align(Alignment.Start)

                  }
                }
              }, (item: HomeItem) => item.id.toString())
            }
            .columnsTemplate('1fr 1fr')
            .columnsGap(10)
            .rowsGap(10)
            .width('100%')
            .scrollBar(BarState.Off)
            .nestedScroll({
              scrollForward: NestedScrollMode.SELF_FIRST,
              scrollBackward: NestedScrollMode.SELF_FIRST
            })
            .height(this.calculateResizeGridHeight())
            .padding({ top: 12})
          }
          .padding({ top: 12, left: 16, right: 16})
          .backgroundColor('#F1F3F5')
          .width('100%') // 必须设置宽度，否则无法感知“左侧”在哪里
          .alignItems(HorizontalAlign.Start) // 【关键修复】设置子组件水平靠左对齐
          .justifyContent(FlexAlign.Start)   // 【可选】设置子组件垂直靠顶对齐（默认即是）
        }
        .offset({ y: -6 })

        // 选证件制作
        ListItem() {
          Column() {
            //选尺寸制作标题
            Image($r('app.media.ic_home_certificate_title_icon')).width('102vp').height('26vp')
            //选尺寸制作内容
            Grid() {
              ForEach(this.certificateItems, (item: HomeItem) => {
                GridItem() {
                  Column() {
                    Column(){
                      Text(item.name)
                        .width('100%')
                        .fontSize(12)
                        .textAlign(TextAlign.Center)
                        .borderRadius(12)

                      Text(item.resize)
                        .width('100%')
                        .fontSize(12)
                        .textAlign(TextAlign.Center)
                        .margin({ top: 4})
                        .borderRadius(12)
                    }
                  }
                  .height('50vp')
                  .align(Alignment.Center)
                  .layoutWeight(1)
                  .borderRadius(10)
                  .linearGradient({
                    angle: 180, // 渐变角度，180度表示从上到下
                    colors: [
                      ['#FFEEFFCC', 0.0], // [颜色, 偏移量0.0-1.0]
                      ['#FFFFFFFF', 1.0]
                    ]
                  })
                  .alignItems(HorizontalAlign.Center) // 【关键修复】设置子组件水平靠左对齐
                  .justifyContent(FlexAlign.Center)   // 【可选】设置子组件垂直靠顶对齐（默认即是）
                }
              }, (item: HomeItem) => item.id.toString())
            }
            .columnsTemplate('1fr 1fr 1fr 1fr')
            .columnsGap(10)
            .rowsGap(10)
            .width('100%')
            .scrollBar(BarState.Off)
            .nestedScroll({
              scrollForward: NestedScrollMode.SELF_FIRST,
              scrollBackward: NestedScrollMode.SELF_FIRST
            })
            .height(this.calculateCertificateGridHeight())
            .padding({ top: 12})
          }
          .padding({ top: 12, left: 16, right: 16})
          .backgroundColor('#F1F3F5')
          .width('100%') // 必须设置宽度，否则无法感知“左侧”在哪里
          .alignItems(HorizontalAlign.Start) // 【关键修复】设置子组件水平靠左对齐
          .justifyContent(FlexAlign.Start)   // 【可选】设置子组件垂直靠顶对齐（默认即是）
        }
        .offset({ y: -6 })

        // 其他
        ListItem() {
          Column() {
            //其他标题
            Image($r('app.media.ic_home_other_title')).width('51vp').height('26vp')
            //其他内容
            Grid() {
              ForEach(this.otherItems, (item: HomeItem) => {
                GridItem() {
                  Column(){
                    Image(item.icon).width(34).height(34)

                    Text(item.name)
                      .width('100%')
                      .fontSize(12)
                      .margin({ top: 8})
                      .backgroundColor('#F1F3F5')
                      .textAlign(TextAlign.Center)
                      .borderRadius(12)
                  }
                }
              }, (item: HomeItem) => item.id.toString())
            }
            .columnsTemplate('1fr 1fr 1fr 1fr')
            .columnsGap(10)
            .rowsGap(10)
            .width('100%')
            .scrollBar(BarState.Off)
            .nestedScroll({
              scrollForward: NestedScrollMode.SELF_FIRST,
              scrollBackward: NestedScrollMode.SELF_FIRST
            })
            .height(this.calculateOtherGridHeight())
            .padding({ top: 12})
          }
          .padding({ left: 16, right: 16})
          .backgroundColor('#F1F3F5')
          .width('100%') // 必须设置宽度，否则无法感知“左侧”在哪里
          .alignItems(HorizontalAlign.Start) // 【关键修复】设置子组件水平靠左对齐
          .justifyContent(FlexAlign.Start)   // 【可选】设置子组件垂直靠顶对齐（默认即是）
        }
        .offset({ y: -36 })
      }
      .width('100%')
      .layoutWeight(1)
      .scrollBar(BarState.Off)
      .edgeEffect(EdgeEffect.None) // 禁用回弹效果，使其更像普通布局
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Start) // 确保在父容器中靠顶
  }

  // 计算 Grid 需要的高度：(行数 * 每行高度) + (行数-1 * 间距)
  private calculateUniMpGridHeight(): number {
    const columns = this.unimpDatas.length > 8 ? 3 : 4;
    const rows = Math.ceil(this.unimpDatas.length / columns);
    return (rows * 80) + ((rows - 1) * 10);
  }
  private calculateResizeGridHeight(): number {
    const columns = 2;
    const rows = Math.ceil(this.resizeItems.length / columns);
    return (rows * 80) + ((rows - 1) * 10);
  }
  private calculateCertificateGridHeight(): number {
    const columns = 4;
    const rows = Math.ceil(this.certificateItems.length / columns);
    return (rows * 80) + ((rows - 1) * 10);
  }
  private calculateOtherGridHeight(): number {
    const columns = 4;
    const rows = Math.ceil(this.otherItems.length / columns);
    return (rows * 80) + ((rows - 1) * 10);
  }
}
*/