1/*
2 * Copyright (c) 2022-2023 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 {
17  AlbumDefine,
18  AlbumInfo,
19  BroadCast,
20  BroadCastConstants,
21  BroadCastManager,
22  Constants,
23  Log,
24  ScreenManager,
25  UiUtil
26} from '@ohos/common';
27import { SelectParams } from '../utils/ThirdSelectConstants';
28import { EmptyAlbumComponent } from '@ohos/browser/BrowserComponents';
29import { Router } from '@ohos.arkui.UIContext';
30import router from '@ohos.router';
31
32const TAG: string = 'thiSel_ThirdAlbumGridItem';
33
34// The item of album grid, and it's new style.
35@Component
36export struct ThirdAlbumGridItem {
37  @State item: AlbumInfo = new AlbumInfo(undefined);
38  @Provide gridHeight: number = 0;
39  @Provide gridWidth: number = 0;
40  gridAspectRatio = Constants.CARD_ASPECT_RATIO;
41  albumCountMarginRight = Constants.ALBUM_SET_NEW_ICON_SIZE + Constants.ALBUM_SET_NEW_ICON_MARGIN * 2;
42  iconMarkAnchorX = Constants.ALBUM_SET_NEW_ICON_SIZE + Constants.ALBUM_SET_NEW_ICON_MARGIN;
43  iconMarkAnchorY = Constants.ALBUM_SET_NEW_ICON_SIZE + Constants.ALBUM_SET_NEW_ICON_MARGIN;
44  MASK_LAYER_HEIGHT = '50%';
45  @State transformV: number = 0;
46  @State isEmptyAlbum: boolean = false;
47  isFirstEnter: boolean = false;
48  @Consume selectParams: SelectParams;
49  private staticIconList = new Map([
50    [AlbumDefine.ALBUM_ID_VIDEO, $r('app.media.ic_video')],
51    [AlbumDefine.ALBUM_ID_FAVOR, $r('app.media.ic_favorite_overlay')]
52  ]);
53  private appBroadCast: BroadCast = BroadCastManager.getInstance().getBroadCast();
54  private fp2vpUnit: number = px2vp(fp2px(Constants.NUMBER_1));
55  private onWindowSizeChangeCallBack: Function = (): void => this.updateCardSize();
56
57  aboutToAppear(): void {
58    Log.info(TAG, `aboutToAppear + ${this.item.coverUri}, select param ${JSON.stringify(this.selectParams)}`)
59    // 后续phone缩略图支持横竖屏后再放开
60    if (AppStorage.Get('deviceType') as string !== Constants.DEFAULT_DEVICE_TYPE) {
61      ScreenManager.getInstance().on(ScreenManager.ON_WIN_SIZE_CHANGED, this.onWindowSizeChangeCallBack);
62    }
63    this.updateCardSize();
64  }
65
66  aboutToDisappear(): void {
67    Log.info(TAG, 'aboutToDisappear');
68    ScreenManager.getInstance().off(ScreenManager.ON_WIN_SIZE_CHANGED, this.onWindowSizeChangeCallBack);
69  }
70
71  updateCardSize() {
72    let contentWidth = ScreenManager.getInstance().getWinWidth();
73    let count: number = UiUtil.getAlbumGridCount(false);
74    this.gridWidth = ((contentWidth - Constants.ALBUM_SET_MARGIN * 2 -
75      (Constants.ALBUM_SET_GUTTER * (count - 1))) / count);
76    let numberHeight = Constants.TEXT_SIZE_BODY2 * this.fp2vpUnit;
77    let nameHeight = Constants.TEXT_SIZE_SUB_TITLE1 * this.fp2vpUnit;
78
79    UiUtil.getResourceNumber($r('sys.float.ohos_id_elements_margin_vertical_m')).then((value: number) => {
80      let bottomHeight = px2vp(value) + nameHeight + Constants.NUMBER_2 + numberHeight;
81      this.iconMarkAnchorY = Constants.ALBUM_SET_NEW_ICON_SIZE + Constants.ALBUM_SET_NEW_ICON_MARGIN + bottomHeight;
82      this.gridHeight = this.gridWidth + bottomHeight;
83      Log.info(TAG, `updateCardSize gridWidth : ${this.gridWidth}, count : ${count}`);
84      this.transformV = 0;
85    });
86  }
87
88  @Builder
89  buildNormalCard() {
90    Flex({
91      direction: FlexDirection.Row,
92      justifyContent: FlexAlign.Center,
93      alignItems: ItemAlign.Start
94    }) {
95      Image(this.item.coverUri)
96        .width(this.gridWidth)
97        .aspectRatio(this.gridAspectRatio)
98        .translate({ x: this.transformV })
99        .border({ radius: $r('sys.float.ohos_id_corner_radius_default_m') })
100        .rotate({
101          centerX: this.gridWidth / Constants.NUMBER_2,
102          centerY: this.gridWidth / Constants.NUMBER_2,
103          z: 1,
104          angle: 0
105        })
106        .onError(() => {
107          Log.debug(TAG, 'album is empty or its cover is error');
108          this.isEmptyAlbum = true;
109        })
110    }
111    .height(this.gridHeight)
112  }
113
114  @Builder
115  buildOthers() {
116    Column() {
117      Text(this.item.albumName)
118        .margin({ right: $r('app.float.album_set_name_margin_right') })
119        .textOverflow({ overflow: TextOverflow.Ellipsis })
120        .maxLines(1)
121        .fontWeight(FontWeight.Medium)
122        .fontSize($r('sys.float.ohos_id_text_size_body2'))
123        .fontColor($r('sys.color.ohos_id_color_text_primary'))
124
125      Text(String(this.item.count))
126        .margin({ right: this.albumCountMarginRight })
127        .textOverflow({ overflow: TextOverflow.Ellipsis })
128        .margin({ top: $r('app.float.photo_grid_gap') })
129        .maxLines(1)
130        .fontColor($r('sys.color.ohos_id_color_text_secondary'))
131        .fontWeight(FontWeight.Regular)
132        .fontSize($r('sys.float.ohos_id_text_size_body3'))
133    }
134    .width('100%')
135    .alignItems(HorizontalAlign.Start)
136    .padding({ left: $r('sys.float.ohos_id_elements_margin_horizontal_m')
137    })
138
139
140    if (this.staticIconList.has(this.item.albumName)) {
141      Image(this.staticIconList.get(this.item.albumName))
142        .fillColor($r('sys.color.ohos_id_color_primary_dark'))
143        .height($r('app.float.album_set_new_style_icon'))
144        .aspectRatio(1)
145        .position({ x: '0%', y: '100%' })
146        .markAnchor({ x: 0 - Constants.ALBUM_SET_NEW_ICON_MARGIN, y: this.iconMarkAnchorY })
147    }
148
149    Column()
150      .height('100%')
151      .width('100%')
152      .border({ radius: $r('sys.float.ohos_id_corner_radius_default_m') })
153      .backgroundColor($r('app.color.transparent'))
154  }
155
156
157  build() {
158    Stack({ alignContent: Alignment.Bottom }) {
159      if (this.isEmptyAlbum) {
160        EmptyAlbumComponent()
161          .margin({ bottom: this.gridHeight - this.gridWidth })
162      }
163
164      this.buildNormalCard()
165
166      this.buildOthers()
167    }
168    .clip(true)
169    .width(this.gridWidth)
170    .height(this.gridHeight)
171    .border({
172      radius: $r('sys.float.ohos_id_corner_radius_default_m')
173    })
174    .onClick((): void => this.handleClick())
175
176  }
177
178  private handleClick(): void {
179    if (this.selectParams.isFromFa && (!this.selectParams.isFromFaPhoto)) {
180      this.appBroadCast.emit(BroadCastConstants.SAVE_FORM_EDITOR_DATA,
181        [this.item.albumName, this.item.uri, this.item.albumName, '', true]);
182    } else {
183      let params: SelectParams = this.selectParams;
184      params.isFirstEnter = false;
185      params.itemDisplayName = this.item.albumName;
186      params.itemCount = this.item.count;
187      params.uri = this.item.uri;
188      params.itemCoverUri = this.item.coverUri;
189      router.pushUrl({
190        url: 'pages/ThirdSelectPhotoGridPage',
191        params: params
192      });
193    }
194  }
195}