// loading旋转组件封装 

/*
 * 无限旋转加载动画
 * */
@Component
export struct RotateAnim {
  @State value: number = 0;
  @State widthValue: number = 40; // 正常外层宽度多少就传递多少
  timer: number = -1; // 存储定时器的 ID，用于清除
  @State colorBg: ResourceColor = '#A8A8A8'
  @State colorLight: ResourceColor = '#F0F0F0'
  @State strokeWidth: number = 6
  @State scaleCount: number = 10
  @State scaleWidth: number = 2

  aboutToAppear(): void {
    // 开始加载动画
    this.startLoading();
  }

  startLoading() {
    // 如果已经有定时器在运行，先清除它
    if (this.timer) {
      clearInterval(this.timer);
    }

    // 设置新的定时器用于加载动画
    this.timer = setInterval(() => {
      this.updateValue();
    }, 10);
  }

  updateValue() {
    // 每次更新值，如果到达100则重置为0，形成循环
    this.value = this.value === 100 ? 0 : this.value + 1;
  }

  // 组件消失时清除定时器
  aboutToDisappear(): void {
    if (this.timer) {
      clearInterval(this.timer);
    }
  }

  build() {
    Row() {
      Progress({ value: this.value, total: 100, type: ProgressType.ScaleRing })
        .width(this.widthValue / 2)
        .aspectRatio(1)
        .backgroundColor(this.colorBg)
        .color(this.colorLight)
        .style({ strokeWidth: this.strokeWidth, scaleCount: this.scaleCount, scaleWidth: this.scaleWidth });
    }
    .width(this.widthValue)
    .aspectRatio(1)
    .justifyContent(FlexAlign.Center);
  }
}

// 外部组件使用

//加载dialog
@Builder
function loadingbuild(params: Params) {
  Column() {
    RotateAnim({
      widthValue: 100,
      colorLight: Utils.getColor('notice_color'),
      strokeWidth: 11,
      scaleWidth: 3
    })
  } .borderRadius(25)
  .width(345)
}