1/*
2 * Copyright (c) 2023 Hunan OpenValley Digital Industry Development 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 */
15import router from '@ohos.router';
16import User from '../appsampled/data/User';
17import { getMockUser } from '../mock/MockData'
18import Logger from '../utils/Logger';
19
20const TAG: string = '[MessagePage]';
21
22@Component
23export default struct MessagePage {
24  @State selectDownIndex: number = 2; // 底部选择索引
25  private scrollerHor: Scroller = new Scroller();
26  private scrollerVer: Scroller = new Scroller();
27  private userArr: Array<User> = getMockUser(); // 用户信息模拟数据
28
29  private currentUser: User | null = null; // 当前用户信息
30  private oppositeUser: User | null = null; // 对端用户信息
31
32  aboutToAppear(){
33    // globalThis.oppositeUser = new User('13222222222',$r('app.media.ic_headphoto_2'));
34
35    if (AppStorage.get("currentUser")) {
36      this.currentUser = AppStorage.get("currentUser")!;
37    }
38    if (AppStorage.get("oppositeUser")) {
39      this.oppositeUser = AppStorage.get("oppositeUser")!;
40      // 将模拟数据中的第一条替换成真实对端数据
41      this.userArr[0].setUsername(this.oppositeUser?.getUsername());
42      this.userArr[0].setUserIcon(this.oppositeUser?.getUserIcon());
43    }
44  }
45
46  build() {
47    Column() {
48      Row() {
49        Image($r('app.media.app_icon'))
50          .width(30)
51          .height(30)
52          .objectFit(ImageFit.Contain)
53          .margin({ left: 15 })
54        Image($r('app.media.app_icon'))
55          .width(40)
56          .height(40)
57          .objectFit(ImageFit.Contain)
58        Image($r('app.media.app_icon'))
59          .width(30)
60          .height(30)
61          .objectFit(ImageFit.Contain)
62          .margin({ right: 15 })
63      }
64      .width('100%')
65      .height('7%')
66      .justifyContent(FlexAlign.SpaceBetween)
67
68      Column() {
69        Scroll(this.scrollerVer) {
70          Column() {
71            // 横向列表
72            Scroll(this.scrollerHor) {
73              Row() {
74                ForEach(this.userArr, (user: User) => {
75                  Column(){
76                    Image($r('app.media.app_icon'))
77                      .width(70)
78                      .height(70)
79                      .objectFit(ImageFit.Contain)
80                      .borderRadius(35)
81                      .margin({bottom: 8})
82                    Text(user.getUsername())
83                      .height(20)
84                      .fontColor($r('app.color.COLOR_E6FFFFFF'))
85                      .fontSize(16)
86                      .fontFamily($r('app.string.Font_family_regular'))
87                      .textAlign(TextAlign.Center)
88                      .textOverflow({ overflow: TextOverflow.Ellipsis })
89                  }
90                  .width(90)
91                  .height(90)
92                })
93              }
94              .height('100%')
95            }
96            .scrollable(ScrollDirection.Horizontal)
97            .scrollBar(BarState.Off)
98            .width('100%')
99            .height(120)
100
101            // 新朋友
102            Row(){
103              Column(){
104                Image($r('app.media.app_icon'))
105                  .width(30)
106                  .height(30)
107                  .objectFit(ImageFit.Contain)
108              }
109              .width(60)
110              .height(60)
111              .backgroundColor($r('app.color.COLOR_57A9FE'))
112              .borderRadius(30)
113              .justifyContent(FlexAlign.Center)
114              .margin({left: 15, right: 15})
115              Column({space: 8}){
116                Text($r('app.string.NewFriend'))
117                  .height(20)
118                  .fontColor($r('app.color.COLOR_FFFFFF'))
119                  .fontSize(18)
120                  .fontFamily($r('app.string.Font_family_regular'))
121                Text($r('app.string.No_new_notice'))
122                  .height(20)
123                  .fontColor($r('app.color.COLOR_CCFFFFFF'))
124                  .fontSize(16)
125                  .fontFamily($r('app.string.Font_family_regular'))
126              }
127              .height(70)
128              .justifyContent(FlexAlign.Center)
129              .alignItems(HorizontalAlign.Start)
130
131              Blank()
132
133              Image($r('app.media.app_icon'))
134                .width(20)
135                .height(20)
136                .objectFit(ImageFit.Contain)
137                .margin({right: 20})
138            }
139            .width('100%')
140            .height(80)
141            .alignItems(VerticalAlign.Center)
142
143            // 互动消息
144            Row(){
145              Column(){
146                Image($r('app.media.app_icon'))
147                  .width(50)
148                  .height(50)
149                  .objectFit(ImageFit.Contain)
150                  .rotate({angle: -90})
151              }
152              .width(60)
153              .height(60)
154              .backgroundColor($r('app.color.COLOR_FF689F'))
155              .borderRadius(30)
156              .justifyContent(FlexAlign.Center)
157              .margin({left: 15, right: 15})
158              Column({space: 8}){
159                Text($r('app.string.Interactive_message'))
160                  .height(20)
161                  .fontColor($r('app.color.COLOR_FFFFFF'))
162                  .fontSize(18)
163                  .fontFamily($r('app.string.Font_family_regular'))
164                Text($r('app.string.Interactive_message_content'))
165                  .height(20)
166                  .fontColor($r('app.color.COLOR_CCFFFFFF'))
167                  .fontSize(16)
168                  .fontFamily($r('app.string.Font_family_regular'))
169              }
170              .height(70)
171              .justifyContent(FlexAlign.Center)
172              .alignItems(HorizontalAlign.Start)
173
174              Blank()
175
176              Image($r('app.media.app_icon'))
177                .width(20)
178                .height(20)
179                .objectFit(ImageFit.Contain)
180                .margin({right: 20})
181            }
182            .width('100%')
183            .height(80)
184            .alignItems(VerticalAlign.Center)
185
186            // 竖向列表
187            ForEach(this.userArr, (user: User, index: number) => {
188              Row(){
189                Column(){
190                  Image($r('app.media.app_icon'))
191                    .width(60)
192                    .height(60)
193                    .objectFit(ImageFit.Contain)
194                    .borderRadius(30)
195                }
196                .width(60)
197                .height(60)
198                .borderRadius(30)
199                .justifyContent(FlexAlign.Center)
200                .margin({left: 15, right: 15})
201                Column({space: 8}){
202                  Text(user.getUsername())
203                    .height(20)
204                    .fontColor($r('app.color.COLOR_FFFFFF'))
205                    .fontSize(18)
206                    .fontFamily($r('app.string.Font_family_regular'))
207                  Text($r('app.string.Greet'))
208                    .height(20)
209                    .fontColor($r('app.color.COLOR_CCFFFFFF'))
210                    .fontSize(16)
211                    .fontFamily($r('app.string.Font_family_regular'))
212                }
213                .height(70)
214                .justifyContent(FlexAlign.Center)
215                .alignItems(HorizontalAlign.Start)
216              }
217              .id(`userID_${index+1}`)
218              .width('100%')
219              .height(80)
220              .alignItems(VerticalAlign.Center)
221              .onClick(e=>{
222                if (index !== 0) {
223                  return;
224                }
225                router.pushUrl({url: 'appsampled/pages/ChatPage'})
226              })
227            })
228          }
229          .width('100%')
230        }
231        .scrollable(ScrollDirection.Vertical)
232        .scrollBar(BarState.Off)
233        .width('100%')
234        .height('100%')
235      }
236      .width('100%')
237      .height('93%')
238
239    }
240    .width('100%')
241    .height('100%')
242    .backgroundColor($r('app.color.COLOR_000000'))
243  }
244}