import { CommonConstants } from 'wdConstant';
import { Logger } from 'wdKit';

const TAG = 'LoadingComponent';

/**
 * Loading/网络数据加载中
 */
@Component
export struct LoadingComponent {
  @State emptyWidth: string | number = CommonConstants.FULL_PARENT;
  @State emptyHeight: string | number = CommonConstants.FULL_PARENT;
  /**
   * The empty image width percentage setting.
   */
  readonly EMPTY_IMAGE_WIDTH: string = '50%';
  /**
   * The empty image height percentage setting.
   */
  readonly EMPTY_IMAGE_HEIGHT: string = '30%';
  /**
   * The empty data text component margin top.
   */
  readonly EMPTY_TIP_TEXT_MARGIN_TOP: string = '2%';
  /**
   * The empty data text opacity.
   */
  readonly TEXT_OPACITY: number = 0.4;

  build() {
    this.loadingView();
  }

  /**
   * loading
   */
  @Builder
  loadingView() {
    Column() {
      // Image($r('app.media.ic_no_data'))
      //   .width(this.EMPTY_IMAGE_WIDTH)
      //   .height(this.EMPTY_IMAGE_HEIGHT)
      //   .objectFit(ImageFit.Contain)
      // .border({ width: 1, color: Color.Red, radius: 6 })

      Text(this.buildLoadingTip())
        .fontSize($r('app.float.normal_text_size'))
        .fontColor(Color.Black)
        .fontWeight(FontWeight.Normal)
        .opacity(this.TEXT_OPACITY)
        .margin({ top: this.EMPTY_TIP_TEXT_MARGIN_TOP })
        .onClick((event: ClickEvent) => {
          Logger.info(TAG, `loadingView onClick event.source: ${event.source}`);
        })
    }
    .justifyContent(FlexAlign.Center)
    .width(this.emptyWidth)
    .height(this.emptyHeight)
  }

  buildLoadingTip(): Resource | string {
    Logger.info(TAG, "buildLoadingTip");
    return $r('app.string.load_net_data_loading')
  }
}