1/*
2 * Copyright (c) 2022 Huawei Device Co., Ltd.
3 * Licensed under the Apache License, Version 2.0 (the "License");
4 * you may not use this file except in compliance with the License.
5 * You may obtain a copy of the License at
6 *
7 *     http://www.apache.org/licenses/LICENSE-2.0
8 *
9 * Unless required by applicable law or agreed to in writing, software
10 * distributed under the License is distributed on an "AS IS" BASIS,
11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 * See the License for the specific language governing permissions and
13 * limitations under the License.
14 */
15
16import { ScreenManager } from '../model/common/ScreenManager';
17import { Constants } from '../model/common/Constants';
18import { Log } from '../utils/Log';
19
20const TAG: string = 'common_NoPhotoComponent';
21
22@Component
23export struct NoPhotoComponent {
24  title?: Resource;
25
26  // set an initial value temporarily, later change to 0.
27  @State offSetY: number = Constants.EMPTY_PAGE_DEFAULT_OFFSET;
28  @StorageLink('isHorizontal') isHorizontal: boolean = ScreenManager.getInstance().isHorizontal();
29  @StorageLink('isSidebar') isSidebar: boolean = ScreenManager.getInstance().isSidebar();
30  @StorageLink('leftBlank') leftBlank: number[] =
31    [0, ScreenManager.getInstance().getStatusBarHeight(), 0, ScreenManager.getInstance().getNaviBarHeight()];
32  @State bigScreen: boolean = false;
33  private updateImageLayoutFunc: Function = (): void => this.updateImageLayout();
34
35  aboutToAppear(): void {
36    Log.info(TAG, `aboutToAppear`);
37    ScreenManager.getInstance().on(ScreenManager.ON_WIN_SIZE_CHANGED, this.updateImageLayoutFunc);
38    this.updateImageLayout();
39  }
40
41  aboutToDisappear(): void {
42    Log.info(TAG, 'aboutToDisappear');
43    ScreenManager.getInstance().off(ScreenManager.ON_WIN_SIZE_CHANGED, this.updateImageLayoutFunc);
44  }
45
46  build() {
47    Flex({
48      direction: FlexDirection.Column,
49      justifyContent: FlexAlign.Start,
50      alignItems: ItemAlign.Center
51    }) {
52      Column() {
53        Image($r('app.media.no_image_icon'))
54          .height(this.bigScreen ? $r('app.float.empty_page_picture_size_large') : $r('app.float.empty_page_picture_size'))
55          .width(this.bigScreen ? $r('app.float.empty_page_picture_size_large') : $r('app.float.empty_page_picture_size'))
56          .margin({
57            bottom: $r('sys.float.ohos_id_elements_margin_vertical_m'),
58          })
59        Text(this.title)
60          .fontSize($r('sys.float.ohos_id_text_size_body2'))
61          .fontFamily($r('app.string.id_text_font_family_regular'))
62          .fontColor($r('app.color.tertiary_title_text_color'))
63      }
64      .width('100%')
65      .offset({ x: 0, y: this.offSetY })
66      .padding({ left: $r('app.float.max_padding_start'), right: $r('app.float.max_padding_start') })
67    }
68    .width('100%')
69  }
70
71  private updateImageLayout(): void {
72    this.bigScreen = Math.min(ScreenManager.getInstance().getWinHeight(), ScreenManager.getInstance()
73      .getWinWidth()) > Constants.BIG_SCREEN_WIDTH
74    let halfImageHeight = this.bigScreen ? Constants.BIG_EMPTY_ICON_SIZE / 2 : Constants.SMALL_EMPTY_ICON_SIZE / 2
75    let screenHeight = ScreenManager.getInstance().getWinHeight() - this.leftBlank[1] - this.leftBlank[3]
76    if (this.isHorizontal) {
77      if (this.isSidebar) {
78        // Pad landscape
79        this.offSetY = screenHeight / Constants.NUMBER_2 - halfImageHeight - Constants.ActionBarHeight;
80      } else {
81        // Phone landscape
82        this.offSetY = (screenHeight - Constants.ActionBarHeight) / Constants.NUMBER_2 - halfImageHeight;
83      }
84    } else {
85      // Phone vertical screen
86      this.offSetY = screenHeight * Constants.EMPTY_PAGE_OFFSET_RADIO -
87      Constants.ActionBarHeight - halfImageHeight;
88    }
89    Log.info(TAG, `isHorizontal: ${this.isHorizontal}, offSetY: ${this.offSetY}, bigScreen: ${this.bigScreen}`);
90  }
91}