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 */
15import ReceiveController from './receiveController'
16import ConversationController from '../../pages/conversation/conversationController'
17import HiLog from '../../utils/HiLog';
18
19const TAG = 'Receive';
20
21@Component
22export struct Receive {
23    @State mReceiveController: ReceiveController = ReceiveController.getInstance();
24    @Link mConversationController: ConversationController;
25
26    aboutToAppear() {
27        this.mReceiveController.onInit((receiverData) => {
28            this.mConversationController.setReceiveContactValue(receiverData);
29        })
30    }
31
32    aboutToDisappear() {
33        HiLog.i(TAG,'aboutToDisappear');
34        this.mReceiveController.onBackPress();
35    }
36
37    build() {
38        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Start }) {
39            Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
40                Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
41                    Text($r('app.string.putAddresser'))
42                        .maxLines(1)
43                        .lineHeight($r('app.float.addressee_line_height'))
44                        .fontSize($r('app.float.addressee_font_size'))
45                        .fontColor($r('sys.color.ohos_id_color_text_secondary'))
46                        .fontWeight(FontWeight.Regular)
47                        .fontFamily('HarmonyHeiTi')
48                        .flexShrink(0)
49                    Flex({ wrap: FlexWrap.NoWrap, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Start }) {
50                        // If a contact is selected
51                        if (this.mReceiveController.isInputStatus) {
52                            if (this.mReceiveController.selectContacts.length > 0) {
53                                ForEach(this.mReceiveController.selectContacts, (item, index) => {
54                                    Row() {
55                                        if (item.contactName == '' || item.contactName == null) {
56                                            Text(item.telephoneFormat)
57                                                .textAlign(TextAlign.Center)
58                                                .maxLines(1)
59                                                .textOverflow({ overflow: TextOverflow.Ellipsis })
60                                                .fontSize(12)
61                                                .flexShrink(1)
62                                        }
63                                        if (item.contactName != '' && item.contactName != null) {
64                                            Text(item.contactName)
65                                                .textAlign(TextAlign.Center)
66                                                .maxLines(1)
67                                                .textOverflow({ overflow: TextOverflow.Ellipsis })
68                                                .fontSize(12)
69                                                .flexShrink(1)
70                                        }
71                                        if (item.select) {
72                                            Image($rawfile('icon/ic_public_cancel.svg'))
73                                                .width(16)
74                                                .height(16)
75                                                .flexShrink(1)
76                                        }
77                                    }
78                                    .padding({ left: 8, right: 8 })
79                                    .margin(8)
80                                    .backgroundColor($r('sys.color.ohos_id_color_component_normal'))
81                                    .borderRadius(24)
82                                    .height(28)
83                                    .alignItems(VerticalAlign.Center)
84                                    .constraintSize({ maxWidth: item.select ? 244 : 228 ,minWidth: 68})
85                                    .onClick(() => {
86                                        this.mReceiveController.nameClick(index, (receiverData) => {
87                                            this.mConversationController.setReceiveContactValue(receiverData);
88                                        })
89                                    })
90                                }, item => JSON.stringify(item))
91                            }
92                            Flex() {
93                                TextArea({ text: this.mReceiveController.myText })
94                                    .caretColor($r('sys.color.ohos_id_color_focused_outline'))
95                                    .placeholderColor($r('sys.color.ohos_id_color_text_hint'))
96                                    .backgroundColor($r('sys.color.ohos_id_color_background_transparent'))
97                                    .focusable(true)
98                                    .flexShrink(1)
99                                    .onChange((value) => {
100                                        this.mReceiveController.searchChange(value, (receiverData) => {
101                                            this.mConversationController.setReceiveContactValue(receiverData);
102                                        });
103                                    })
104                                    .onBlur(() => {
105                                        this.mReceiveController.checkReceive((receiverData) => {
106                                            this.mConversationController.setReceiveContactValue(receiverData);
107                                        });
108                                    })
109                                    .onFocus(() => {
110                                        this.mReceiveController.myContactFocus();
111                                    })
112                            }
113                            .flexShrink(1)
114                            .constraintSize({ maxHeight: 120 })
115                        }
116                        else {
117                            Text(this.mReceiveController.strSelectContact)
118                                .fontColor($r('sys.color.ohos_id_color_text_primary_activated'))
119                                .textAlign(TextAlign.Center)
120                                .fontSize(16)
121                                .lineHeight(22)
122                                .maxLines(1)
123                                .textAlign(TextAlign.Start)
124                                .textOverflow({ overflow: TextOverflow.Ellipsis })
125                                .width('100%')
126                                .padding({ top: 12, bottom: 12 })
127                                .onClick(() => {
128                                    this.mReceiveController.myContactClick();
129                                })
130                        }
131                    }
132                    .flexShrink(1)
133                }
134                .flexBasis('auto')
135                .flexShrink(1)
136
137                // Contact icon on the right
138                Image($rawfile('icon/ic_about.svg'))
139                    .width(24)
140                    .height(24)
141                    .onClick(() => {
142                        // The page for selecting a contact is displayed.
143                        this.mReceiveController.clickToContacts(receiverData => {
144                            this.mConversationController.setReceiveContactValue(receiverData);
145                        })
146                    })
147
148            }
149            .constraintSize({ minHeight: 56, maxHeight:200 })
150            .backgroundColor($r('sys.color.ohos_id_color_background'))
151            .borderRadius($r('app.float.settings_items_radius'))
152            .padding({ left: 12, right: 12 })
153
154            Column() {
155                // Indicates whether to display the recent contact list.
156                if (this.mReceiveController.isShowSearch && this.mReceiveController.contacts.length > 0 && false) {
157                    // List area
158                    List({ space: 0, initialIndex: 0 }) {
159                        ForEach(this.mReceiveController.contacts, (item, index) => {
160                            ListItem() {
161                                Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
162                                    Image($rawfile('icon/ic_user_portrait.svg'))
163                                        .objectFit(ImageFit.Fill)
164                                        .width('40vp')
165                                        .height('40vp')
166                                        .clip(new Circle({ width: '40vp', height: '40vp' }))
167                                        .backgroundColor($r('app.color.ic_user_head_color'))
168                                        .onClick(() => {
169                                            this.mReceiveController.titleBarAvatar(index)
170                                        })
171
172                                    Flex({
173                                        direction: FlexDirection.Column,
174                                        justifyContent: FlexAlign.Center,
175                                        alignItems: ItemAlign.Start
176                                    }) {
177                                        if (item.contactName != '' || item.contactName != null) {
178                                            Text(item.contactName)
179                                                .fontSize(16)
180                                                .fontColor($r('sys.color.ohos_id_color_text_primary'))
181                                                .maxLines(1)
182                                                .fontWeight(FontWeight.Medium)
183                                                .textOverflow({ overflow: TextOverflow.Ellipsis })
184                                        }
185                                        Text(item.telephoneFormat)
186                                            .fontColor($r('sys.color.ohos_id_color_text_tertiary'))
187                                            .fontSize(14)
188                                            .maxLines(1)
189                                            .margin({ top: 4 })
190                                            .textOverflow({ overflow: TextOverflow.Ellipsis })
191                                    }
192                                    .layoutWeight(1)
193                                    .margin({ left: 12 })
194                                    .onClick(() => {
195                                        this.mReceiveController.addContact(index, (receiverData) => {
196                                            this.mConversationController.setReceiveContactValue(receiverData);
197                                        })
198                                    })
199                                }
200                                .width('100%')
201                                .height(64)
202                            }
203                        }, item => JSON.stringify(item))
204                    }
205                    .listDirection(Axis.Vertical) // Arrange Direction
206                    .edgeEffect(EdgeEffect.Spring) // Sliding to the edge has no effect
207                    .divider({
208                        strokeWidth: 1,
209                        color: $r('sys.color.ohos_id_color_list_separator'),
210                        startMargin: 52,
211                        endMargin: 0
212                    }) // Demarcation line between each row
213                }
214            }.padding({ left: 12, right: 12, bottom: 56 })
215        }
216        .width('100%')
217        .padding({ left: 12, right: 12 })
218    }
219}