/*
 * Copyright (C) 2025 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the 'License');
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an 'AS IS' BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
import { ImageKnifeComponent, ImageKnifeOption } from '@ohos/imageknife';
import { CommonDataSource } from '../model/CommonDataSource';
import { DATA_ARRAY } from '../model/ImageUrlData';
import { systemDateTime } from '@kit.BasicServicesKit';


@Component
export struct HomePage {
  @State hotCommendList:CommonDataSource<string> = new CommonDataSource<string>([])
  aboutToAppear(): void {
    this.hotCommendList.addData(this.hotCommendList.totalCount(),DATA_ARRAY)
  }
  build() {
    Column() {
      WaterFlow() {
        LazyForEach(this.hotCommendList,(item: string,index:number)=>{
          FlowItem() {
            Column(){
              ImageComponent({
                url: item
              }).width("50%").height(160)
            }
          }.height(200)
          .backgroundColor("#95efd2")
        },(item: string) => item)
      }.columnsTemplate("1fr 1fr")
      .columnsGap(10)
      .rowsGap(5)
      .backgroundColor(0xFAEEE0)
      .width("100%").height("100%")
    }
  }
}

@Component
struct ImageComponent {
  @State url: string = ""
  @State description: string = ""
  @State loadStart: number = 0
  build() {
    Column() {
      ImageKnifeComponent({
        imageKnifeOption: {
          loadSrc: this.url,
          placeholderSrc: $r("app.media.loading"),
          errorholderSrc: $r("app.media.failed"),
          onLoadListener: {
            onLoadStart: (imageInfo) => {
              this.loadStart = Math.floor(systemDateTime.getTime(true) / 1000)
            },
            onLoadSuccess:()=>{
              this.description = "加载耗时:" + ((Math.floor(systemDateTime.getTime(true) / 1000) - this.loadStart) / 1000) + 'ms';

            }
          }
        }
      })
      Text(this.description)
    }
  }
}