/*
 * Copyright (C) 2024 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/libraryimageknife';
import { PageViewModel } from './model/PageViewModel';


@Entry
@Component
struct SignatureTestPage {
  @State imageKnifeOption1: ImageKnifeOption =
    {
      loadSrc: $r('app.media.icon'),
      placeholderSrc:$r('app.media.loading'),
    };
  @State imageKnifeOption2: ImageKnifeOption =
    {
      loadSrc: $r('app.media.icon'),
      placeholderSrc:$r('app.media.loading'),
    };

  build() {
    Scroll() {
      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {

        Text($r('app.string.The_key_fixed_1')).fontSize(15)
        Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
          Button($r('app.string.Load'))
            .onClick(() => {
              this.imageKnifeOption1 = {
                loadSrc: PageViewModel.getMenus()[2],
                placeholderSrc:$r('app.media.loading'),
                signature: '1'
              }
            }).margin({ top: 5, left: 3 })
          ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(300).height(300)
        }.width('100%').backgroundColor(Color.Pink)

        Text($r('app.string.The_key_changes_timestamp')).fontSize(15)
        Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
          Button($r('app.string.Load'))
            .onClick(() => {
              this.imageKnifeOption2 = {
                loadSrc: PageViewModel.getMenus()[2],
                placeholderSrc:$r('app.media.loading'),
                signature: new Date().getTime().toString()
              }
            }).margin({ top: 5, left: 3 })
          ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption2 }).width(300).height(300)
        }.width('100%').backgroundColor(Color.Pink)
      }

    }.width('100%')
    .height('100%')

  }

  aboutToAppear() {
    console.log('唯一标识页面：' + new Date().getTime().toString())

  }
}