import { Logger } from 'wdKit';

const TAG = 'PictureLoading';

@Component
export struct PictureLoading {
  private imagePath: string = ''
  //alt app.media.picture_loading 设计稿尺寸
  @State imageWidth: string | number = 167
  @State ratio: number = 167 / 60

  async aboutToAppear() {
    Logger.info(TAG, 'pictures preview')
  }

  build() {
    Row() {
      Image(this.imagePath)
        .alt($r('app.media.picture_loading'))
        .width(this.imageWidth)
        .aspectRatio(this.ratio)
        .objectFit(ImageFit.Fill)
        .interpolation(ImageInterpolation.High)
        .onComplete((event) => {
          if (event) {
            this.imageWidth = '100%'
            this.ratio = event.width / event.height
          }

        })
    }
    .height('100%')
    .width('100%')
    .backgroundColor(Color.Black)
    .justifyContent(FlexAlign.Center)
  }
}