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/**
16 * Message/MMS viewing page
17 */
18import router from '@system.router';
19import emitter from '@ohos.events.emitter';
20import ConversationController from './conversationController';
21import { Receive } from '../../views/receive/receive';
22import LooseObject from '../../data/LooseObject';
23import { MoreMenu } from '../../views/MmsMenu';
24import { MultiSimCardMenu } from '../../views/MultiSimCardMenu';
25import WantUtil from '../../utils/WantUtil';
26import { DelConversionDialog } from '../../views/MmsDialogs';
27import MmsPreferences from '../../utils/MmsPreferences';
28import common from '../../data/commonData';
29import simCardService from '../../service/SimCardService'
30
31@Entry
32@Component
33export struct Conversation {
34    @StorageLink('curBp') curBp: string = 'sm'
35    @State mConversationCtrl: ConversationController = ConversationController.getInstance();
36    @State slotId: number = MmsPreferences.getInstance().getSelectedSlotId();
37    @State cardImage: boolean = MmsPreferences.getInstance().haveMultiSimCardReady();
38    private gridColumns: GridRowColumnOption = { sm: 4, md: 8, lg: 12 };
39    private timeGirdSpan: GridColColumnOption = { sm: 4, md: 8, lg: 12 };
40    private messageGirdSpan: GridColColumnOption = { sm: 4, md: 6, lg: 8 };
41    private gridColOffset: GridColColumnOption = { sm: 0, md: 2, lg: 4 };
42    private gridGutter: string = '24vp';
43    private dialogGridCount: number = 4;
44    @Provide menuItems: Array<any> = [
45        {
46            value: $r('app.string.delete'),
47            action: () => {
48                this.mConversationCtrl.longPressMore(0);
49                if (this.mConversationCtrl.mmsList.length == 1) {
50                    this.delConversionController.open();
51                }
52            },
53            enabled: true
54        },
55        {
56            value: $r('app.string.msg_pre_call_editor'),
57            action: () => {
58                this.mConversationCtrl.longPressMore(3);
59            },
60            enabled: true
61        }
62    ];
63    /** Message details dialog box */
64    dialogController: CustomDialogController = new CustomDialogController({
65        builder: DetailsDialog({
66            item: this.mConversationCtrl.mmsList[this.mConversationCtrl.mmsIndex],
67            receiver: this.mConversationCtrl.strContactsName == ''
68                ? this.mConversationCtrl.strContactsNumber :
69            this.mConversationCtrl.strContactsName
70        }),
71        autoCancel: true,
72        alignment: DialogAlignment.Bottom,
73        offset: { dx: 0, dy: $r('app.float.dialog_bottom_margin') },
74        gridCount: this.dialogGridCount
75    })
76    delConversionController: CustomDialogController = new CustomDialogController({
77        builder: DelConversionDialog({
78            cancel: () => {
79                this.mConversationCtrl.deleteDialogCancel()
80            },
81            confirm: () => {
82                this.mConversationCtrl.deleteDialogConfirm()
83            },
84            msg: this.mConversationCtrl.strMsgDeleteDialogTip,
85        }),
86        autoCancel: false,
87        alignment: DialogAlignment.Bottom,
88        offset: { dx: 0, dy: $r('app.float.dialog_bottom_margin') },
89        gridCount: this.dialogGridCount
90    });
91
92    aboutToAppear() {
93        this.mConversationCtrl.onInit();
94        this.mConversationCtrl.onShow();
95        emitter.on(simCardService.SIM_STATE_CHANGE_EVENT, () => {
96            this.cardImage = MmsPreferences.getInstance().haveMultiSimCardReady();
97        });
98        emitter.on(simCardService.SLOTID_CHANGE_EVENT, () => {
99            this.slotId = MmsPreferences.getInstance().getSelectedSlotId();
100            console.log('receive SLOTID_CHANGE_EVENT, this.slotId: ' + this.slotId);
101        });
102    }
103
104    aboutToDisappear() {
105        emitter.off(common.int.EVENT_SIM_STATE_CHANGE);
106        emitter.off(common.int.EVENT_SLOTID_CHANGE);
107
108        this.dialogController = null;
109        this.delConversionController = null;
110    }
111
112    onPageShow() {
113        WantUtil.getWant();
114    }
115
116    onPageHide() {
117        this.mConversationCtrl.onHide()
118    }
119
120    onBackPress() {
121        return this.mConversationCtrl.onBackPress();
122    }
123
124    build() {
125        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) {
126            Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.Start }) {
127                // <!--Top titleBar-->
128                // New page
129                if (this.mConversationCtrl.isNewMsg) {
130                    Row() {
131                        Image($rawfile('icon/ic_message_back.svg'))
132                            .width('24vp')
133                            .height('24vp')
134                            .onClick(() => {
135                                // Click Return to restore the status of unselected SMs.
136                                if (!this.mConversationCtrl.onBackPress()) {
137                                    router.back();
138                                }
139                            })
140                        Row().width($r('app.float.space_16'))
141                        Text($r('app.string.new_message'))
142                            .fontSize(20)
143                            .lineHeight(28)
144                            .fontColor($r('sys.color.ohos_id_color_text_primary'))
145                            .fontWeight(FontWeight.Bold)
146                    }
147                    .width('100%')
148                    .height(56)
149                    .flexShrink(0)
150                    .padding({ left: '24vp', right: '24vp' })
151                    .zIndex(2)
152                    .expandSafeArea([SafeAreaType.KEYBOARD])
153                    .backgroundColor($r('sys.color.ohos_id_color_sub_background'))
154
155                }
156                // Page for viewing SMS details
157                else {
158                    Row() {
159                        // Select Status
160                        if (this.mConversationCtrl.isSelectStatus) {
161                            Row() {
162                                Image($rawfile('icon/ic_public_cancel.svg'))
163                                    .width(24)
164                                    .height(24)
165                                    .onClick(() => {
166                                        // Click Return to restore the status of unselected SMs.
167                                        this.mConversationCtrl.titleBarCancel()
168                                    })
169                                Text(this.mConversationCtrl.selectDeleteMsgCount == 0
170                                    ? $r('app.string.msg_unselected_tip')
171                                    : $r('app.string.msg_selected_tip', this.mConversationCtrl.selectDeleteMsgCount))
172                                    .margin({ left: 16 })
173                                    .fontSize(20)
174                                    .fontColor($r('sys.color.ohos_id_color_text_primary'))
175                                    .fontWeight(FontWeight.Bold)
176                            }
177                            .alignItems(VerticalAlign.Center)
178                            .width('100%')
179                        } else {
180                            // Non-Selected Status
181                            Row() {
182                                Flex({
183                                    alignItems: ItemAlign.Center,
184                                }) {
185                                    Row() {
186                                        Image($rawfile('icon/ic_message_back.svg'))
187                                            .width(24)
188                                            .height(24)
189                                            .margin({ right: 16 })
190                                            .onClick(() => {
191                                                if (!this.mConversationCtrl.onBackPress()) {
192                                                    router.back();
193                                                }
194                                            })
195
196                                        if (this.mConversationCtrl.strContactsName === '' ||
197                                            this.mConversationCtrl.photoFirstName === '-1') {
198                                            Image($rawfile('icon/ic_user_portrait.svg'))
199                                                .objectFit(ImageFit.Fill)
200                                                .width(40)
201                                                .height(40)
202                                                .clip(new Circle({ width: 40, height: 40 }))
203                                                .backgroundColor(this.mConversationCtrl.portraitColor)
204                                                .onClick(() => {
205                                                    this.mConversationCtrl.titleBarAvatar();
206                                                })
207                                        } else {
208                                            Text(this.mConversationCtrl.photoFirstName)
209                                                .fontSize($r('sys.float.ohos_id_text_size_headline8'))
210                                                .fontWeight(FontWeight.Medium)
211                                                .fontColor(Color.White)
212                                                .height('40vp')
213                                                .width('40vp')
214                                                .textAlign(TextAlign.Center)
215                                                .clip(new Circle({ width: '40vp', height: '40vp' }))
216                                                .backgroundColor(this.mConversationCtrl.portraitColor)
217                                                .onClick(() => {
218                                                    this.mConversationCtrl.titleBarAvatar();
219                                                })
220                                        }
221                                    }
222                                    .flexBasis(80)
223
224                                    Column() {
225                                        Flex({
226                                            direction: FlexDirection.Column,
227                                            justifyContent: FlexAlign.Center,
228                                            alignItems: ItemAlign.Start
229                                        }) {
230                                            if (this.mConversationCtrl.contactsNum > 1) {
231                                                Text(this.mConversationCtrl.strContactsName)
232                                                    .maxLines(1)
233                                                    .textOverflow({ overflow: TextOverflow.Ellipsis })
234                                                    .fontSize(20)
235                                                    .fontColor($r('sys.color.ohos_id_color_text_primary'))
236                                                    .fontWeight(FontWeight.Medium)
237                                                Text($r('app.string.members', this.mConversationCtrl.contactsNum))
238                                                    .maxLines(1)
239                                                    .textOverflow({ overflow: TextOverflow.Ellipsis })
240                                                    .fontSize(20)
241                                                    .fontColor($r('sys.color.ohos_id_color_text_tertiary'))
242                                                    .fontWeight(FontWeight.Medium)
243                                            } else if (this.mConversationCtrl.strContactsName == '' ||
244                                                this.mConversationCtrl.strContactsName == null) {
245                                                Text(this.mConversationCtrl.strContactsNumberFormat)
246                                                    .maxLines(1)
247                                                    .textOverflow({ overflow: TextOverflow.Ellipsis })
248                                                    .fontSize(20)
249                                                    .fontColor($r('sys.color.ohos_id_color_text_primary'))
250                                                    .fontWeight(FontWeight.Medium)
251                                            } else {
252                                                Text(this.mConversationCtrl.strContactsName.replace(/\s*/g, ''))
253                                                    .maxLines(1)
254                                                    .textOverflow({ overflow: TextOverflow.Ellipsis })
255                                                    .fontSize(20)
256                                                    .fontColor($r('sys.color.ohos_id_color_text_primary'))
257                                                    .fontWeight(FontWeight.Medium)
258                                                    .lineHeight(28)
259                                                if (this.mConversationCtrl.strContactsName.replace(/\s*/g, '') !==
260                                                this.mConversationCtrl.strContactsNumberFormat) {
261                                                    Text(this.mConversationCtrl.strContactsNumberFormat)
262                                                        .maxLines(1)
263                                                        .textOverflow({ overflow: TextOverflow.Ellipsis })
264                                                        .fontSize(20)
265                                                        .fontColor($r('sys.color.ohos_id_color_text_tertiary'))
266                                                        .lineHeight(19)
267                                                        .fontWeight(FontWeight.Medium)
268                                                }
269                                            }
270                                        }
271                                    }
272                                    .flexGrow(1)
273                                    .flexShrink(1)
274                                    .alignItems(HorizontalAlign.Start)
275                                    .padding({ left: 12, right: 16 })
276                                    .margin({
277                                        left: this.mConversationCtrl.strContactsNumberFormat.length > 17 ? 25 : 0
278                                    })
279
280                                    Row() {
281                                        Image($rawfile('icon/ic_message_phone.svg'))
282                                            .width(24)
283                                            .height(24)
284                                            .onClick(() => {
285                                                this.mConversationCtrl.clickCall();
286                                            })
287                                        Blank().width($r('app.float.space_16'))
288                                        Column() {
289                                            MoreMenu()
290                                        }
291                                    }
292                                    .flexShrink(0)
293                                }.height('100%')
294                            }
295                            .width('100%')
296                        }
297                    }
298                    .height(56)
299                    .constraintSize({ minHeight: 56 })
300                    .padding({ left: 24, right: 24 })
301                    .zIndex(2)
302                    .expandSafeArea([SafeAreaType.KEYBOARD])
303                    .backgroundColor($r('sys.color.ohos_id_color_sub_background'))
304                }
305                // <!--Middle Content Area-->
306                Row() {
307                    // New Message Content
308                    if (this.mConversationCtrl.isNewMsg) {
309                        Row() {
310                            Receive({ mConversationController: $mConversationCtrl })
311                        }
312                        .margin({ top: $r("app.float.new_message_margin_top") })
313                        .expandSafeArea([SafeAreaType.KEYBOARD])
314                        .backgroundColor($r("sys.color.ohos_id_color_sub_background"))
315                    }
316                    // SMS message content
317                    // <!--Information List-->
318                    if (!this.mConversationCtrl.isNewMsg) {
319                        List({
320                            space: 10,
321                            initialIndex: this.mConversationCtrl.mmsList.length - 1,
322                            scroller: this.mConversationCtrl.scroller
323                        }) {
324                            ForEach(this.mConversationCtrl.mmsList, (item, index) => {
325                                ListItem() {
326                                    Row() {
327                                        GridRow({ columns: this.gridColumns, gutter: this.gridGutter }) {
328                                            // <!--Information Sending Item-->
329                                            if (!item.isReceive && !item.isDraft) {
330                                                GridCol({ span: this.timeGirdSpan }) {
331                                                    Flex({
332                                                        direction: FlexDirection.Column,
333                                                        justifyContent: FlexAlign.Center,
334                                                        alignItems: ItemAlign.Center
335                                                    }) {
336                                                        // SMS/MMS
337                                                        if (index == 0) {
338                                                            Text($r('app.string.msg_note_mms'))
339                                                                .fontSize(12)
340                                                                .lineHeight(16)
341                                                                .fontColor($r('sys.color.ohos_id_color_text_secondary'))
342                                                                .margin({ bottom: 2 })
343                                                        }
344                                                        // Time
345                                                        if (item.dateShow) {
346                                                            Text() {
347                                                                Span(item.date)
348                                                                    .fontSize(12)
349                                                                    .fontColor($r('sys.color.ohos_id_color_text_secondary'))
350                                                                Span(item.week)
351                                                                    .fontSize(12)
352                                                                    .fontColor($r('sys.color.ohos_id_color_text_secondary'))
353                                                            }.lineHeight(16).margin({ bottom: 8 })
354                                                        }
355                                                    }.width('100%')
356                                                }
357
358                                                GridCol({ span: this.messageGirdSpan, offset: this.gridColOffset }) {
359                                                    Flex({
360                                                        direction: FlexDirection.Column,
361                                                        justifyContent: FlexAlign.Center,
362                                                        alignItems: ItemAlign.Center
363                                                    }) {
364                                                        Flex({
365                                                            justifyContent: FlexAlign.Center,
366                                                            alignItems: ItemAlign.Start
367                                                        }) {
368                                                            Column() {
369                                                                Flex({
370                                                                    justifyContent: FlexAlign.End,
371                                                                    alignItems: ItemAlign.End
372                                                                }) {
373                                                                    // <!--Text-->
374                                                                    Flex({
375                                                                        justifyContent: FlexAlign.End,
376                                                                        alignItems: ItemAlign.End
377                                                                    }) {
378                                                                        // <!--Sending failed icon-->
379                                                                        if (!item.isMsm &&
380                                                                            ((this.mConversationCtrl.contactsNum == 1 &&
381                                                                                item.sendStatus == 2) ||
382                                                                                (this.mConversationCtrl.contactsNum > 1 &&
383                                                                                    item.failuresNumber > 0 &&
384                                                                                    item.completeNumber ==
385                                                                                    this.mConversationCtrl.contactsNum))) {
386                                                                            Row() {
387                                                                                Image($rawfile('icon/ic_send_fail.svg'))
388                                                                                    .width(20)
389                                                                                    .height(20)
390                                                                                    .objectFit(ImageFit.Fill)
391                                                                            }
392                                                                            .margin({ right: 8 })
393                                                                            .padding({ top: 9 })
394                                                                        }
395                                                                        // Message Bubble
396                                                                        bubbleText({
397                                                                            conversationCtrl: $mConversationCtrl,
398                                                                            bubbleTextBorderRadius: [4, 24],
399                                                                            bubbleTextDirection: 'right',
400                                                                            content: item.content,
401                                                                            bubbleTextBackgroundColor: $r('app.color.sender_bubble'),
402                                                                            isShowMsgLongMenu: item.isShowMsgLongMenu,
403                                                                            itemIndex: index,
404                                                                            delConversionController: this.delConversionController
405                                                                        })
406                                                                            .constraintSize({ maxWidth: 284 })
407                                                                    }
408                                                                }
409
410                                                                // <!--Sending time and sending status-->
411                                                                Flex({
412                                                                    alignItems: ItemAlign.Center,
413                                                                    justifyContent: FlexAlign.End
414                                                                }) {
415                                                                    if (this.mConversationCtrl.contactsNum == 1 &&
416                                                                        item.sendStatus != 1) {
417                                                                        Text(item.time)
418                                                                            .textAlign(TextAlign.Start)
419                                                                            .fontSize(10)
420                                                                            .lineHeight(13)
421                                                                            .fontColor($r('sys.color.ohos_id_color_text_secondary'))
422                                                                            .margin({ top: 8, right: 5 })
423                                                                    }
424                                                                    // Card 1 or Card 2
425                                                                    if (this.cardImage) {
426                                                                        Image(item.subId == 0 ?
427                                                                        $rawfile('icon/icon_mms_sim_1.svg') :
428                                                                        $rawfile('icon/icon_mms_sim_2.svg'))
429                                                                            .width(10)
430                                                                            .height(10)
431                                                                            .margin({ top: 8, right: 5 })
432                                                                    }
433                                                                    // Locked
434                                                                    if (item.isLock) {
435                                                                        Image($rawfile('icon/msg_lock.svg'))
436                                                                            .width(10)
437                                                                            .height(10)
438                                                                            .margin({ top: 8, right: 5 })
439                                                                    }
440                                                                    Text($r('app.string.messageSendFailed'))
441                                                                        .textAlign(TextAlign.Start)
442                                                                        .fontSize(10)
443                                                                        .lineHeight(13)
444                                                                        .margin({ top: 8 })
445                                                                        .fontColor($r('sys.color.ohos_id_color_warning'))
446                                                                        .visibility(item.sendStatus == 2 ?
447                                                                        Visibility.Visible : Visibility.None)
448                                                                    Text($r('app.string.messageSending'))
449                                                                        .textAlign(TextAlign.Start)
450                                                                        .fontSize(10)
451                                                                        .fontColor($r('sys.color.ohos_id_color_text_secondary'))
452                                                                        .lineHeight(13)
453                                                                        .margin({ top: 8 })
454                                                                        .visibility(item.sendStatus == 1 ?
455                                                                        Visibility.Visible : Visibility.None)
456                                                                    Text($r('app.string.messageDeliver'))
457                                                                        .textAlign(TextAlign.Start)
458                                                                        .fontSize(10)
459                                                                        .fontColor($r('sys.color.ohos_id_color_text_secondary'))
460                                                                        .lineHeight(13)
461                                                                        .margin({ top: 8 })
462                                                                        .visibility(item.sendStatus == 0 ?
463                                                                        Visibility.Visible : Visibility.None)
464                                                                }.width('100%').margin({ right: 12 })
465                                                            }
466                                                            .width('100%')
467                                                            .alignItems(HorizontalAlign.End)
468
469                                                            // Sender's avatar, which is available only for group messages.
470                                                            Flex({ direction: FlexDirection.Column,
471                                                                justifyContent: FlexAlign.Start,
472                                                                alignItems: ItemAlign.Center }) {
473                                                                Image($rawfile('icon/user_avatar_full_fill.svg'))
474                                                                    .width(30)
475                                                                    .height(30)
476                                                            }
477                                                            .width(50)
478                                                            .height(30)
479                                                            .visibility(this.mConversationCtrl.contactsNum > 1 ?
480                                                            Visibility.Visible : Visibility.None)
481                                                        }
482                                                    }
483                                                    .width('100%')
484                                                }
485                                            }
486                                            // <!--Information receiving item-->
487                                            else if (item.isReceive) {
488                                                GridCol({ span: this.timeGirdSpan }) {
489                                                    // <!--Information receiving item-->
490                                                    Flex({
491                                                        direction: FlexDirection.Column,
492                                                        justifyContent: FlexAlign.Center,
493                                                        alignItems: ItemAlign.Center
494                                                    }) {
495                                                        // SMS/MMS
496                                                        if (index == 0) {
497                                                            Text($r('app.string.msg_note_mms'))
498                                                                .fontSize(12)
499                                                                .lineHeight(16)
500                                                                .fontColor($r('sys.color.ohos_id_color_text_secondary'))
501                                                                .margin({ bottom: 2 })
502                                                        }
503                                                        // Time
504                                                        if (item.dateShow) {
505                                                            Text() {
506                                                                Span(item.date)
507                                                                    .fontSize(12)
508                                                                    .fontColor($r('sys.color.ohos_id_color_text_secondary'))
509                                                                Span(item.week)
510                                                                    .fontSize(12)
511                                                                    .fontColor($r('sys.color.ohos_id_color_text_secondary'))
512                                                            }.lineHeight(16).margin({ bottom: 8 })
513                                                        }
514                                                    }.width('100%')
515                                                }
516
517                                                GridCol({ span: this.messageGirdSpan }) {
518                                                    Flex({
519                                                        direction: FlexDirection.Column,
520                                                        justifyContent: FlexAlign.Center,
521                                                        alignItems: ItemAlign.Center
522                                                    }) {
523                                                        Flex({
524                                                            justifyContent: FlexAlign.Center,
525                                                            alignItems: ItemAlign.Start
526                                                        }) {
527                                                            Column() {
528                                                                Flex({
529                                                                    alignItems: ItemAlign.Start,
530                                                                    justifyContent: FlexAlign.Start
531                                                                }) {
532                                                                    // Message Bubble
533                                                                    bubbleText({
534                                                                        conversationCtrl: $mConversationCtrl,
535                                                                        bubbleTextBorderRadius: [4, 24],
536                                                                        bubbleTextDirection: 'left',
537                                                                        content: item.content,
538                                                                        bubbleTextBackgroundColor: $r('sys.color.ohos_id_color_card_bg'),
539                                                                        isShowMsgLongMenu: item.isShowMsgLongMenu,
540                                                                        itemIndex: index,
541                                                                        delConversionController: this.delConversionController
542                                                                    })
543                                                                        .constraintSize({ maxWidth: 284 })
544                                                                }
545
546                                                                // <!--Sending time and sending status-->
547                                                                Flex({
548                                                                    alignItems: ItemAlign.Center,
549                                                                    justifyContent: FlexAlign.Start
550                                                                }) {
551                                                                    Text(item.time)
552                                                                        .textAlign(TextAlign.Start)
553                                                                        .fontSize(10)
554                                                                        .lineHeight(13)
555                                                                        .fontColor($r('sys.color.ohos_id_color_text_secondary'))
556                                                                        .margin({ top: 8, right: 5 })
557                                                                    // Card 1 or Card 2
558                                                                    if (this.cardImage) {
559                                                                        Image(item.subId == 0 ?
560                                                                        $rawfile('icon/icon_mms_sim_1.svg') :
561                                                                        $rawfile('icon/icon_mms_sim_2.svg'))
562                                                                            .width(10)
563                                                                            .height(10)
564                                                                            .margin({ top: 8, left: 5 })
565                                                                    }
566                                                                    // Locked
567                                                                    if (item.isLock) {
568                                                                        Image($rawfile('icon/msg_lock.svg'))
569                                                                            .width(10)
570                                                                            .height(10)
571                                                                            .margin({ top: 8, left: 5 })
572                                                                    }
573                                                                }.width('70%').margin({ left: 12 })
574                                                            }
575                                                            .width('100%')
576                                                            .alignItems(HorizontalAlign.Start)
577                                                        }
578                                                    }.width('100%')
579                                                }
580                                            }
581                                        }.layoutWeight(1)
582
583                                        if (this.mConversationCtrl.isSelectStatus) {
584                                            Row() {
585                                                Toggle({
586                                                    type: ToggleType.Checkbox,
587                                                    isOn: item.isCbChecked
588                                                })
589                                                    .selectedColor($r('sys.color.ohos_id_color_activated'))
590                                                    .width(24)
591                                                    .height(24)
592                                                    .onChange(((isOn: boolean) => {
593                                                        this.mConversationCtrl.listCheckBoxChange(index, isOn)
594                                                    }))
595                                            }
596                                            .margin({ left: 4 })
597                                            .width(48)
598                                            .height(48)
599                                        }
600                                    }
601                                    .padding(this.curBp === 'sm' ? { left: 16, right: 16 } : { left: 24, right: 24 })
602                                    .width('100%')
603                                    .alignItems(VerticalAlign.Center)
604                                }.onClick(() => {
605                                    if (this.mConversationCtrl.isSelectStatus) {
606                                        this.mConversationCtrl.listCheckBoxChange(index,!item.isCbChecked)
607                                    }
608                                })
609                                .padding(index == this.mConversationCtrl.mmsList.length - 1 ? { bottom: 20 } : null)
610                            }, item => JSON.stringify(item))
611                        }
612                        .listDirection(Axis.Vertical) // Arrange Direction
613                        .edgeEffect(EdgeEffect.Spring) // Sliding to the edge has no effect
614                        .width('100%')
615                        .margin({ top: 16 })
616                    }
617                }
618                .width('100%')
619                .flexBasis('auto')
620                .flexShrink(1)
621            }
622            .width('100%')
623
624            // Input box at the bottom
625            Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Start }) {
626                // More options at the bottom
627                if (this.mConversationCtrl.isSelectStatus && !this.mConversationCtrl.hasDetailDelete) {
628                    /** The Info button is checked at the bottom. */
629                    Flex({
630                        direction: FlexDirection.Row,
631                        alignItems: ItemAlign.Center,
632                        justifyContent: FlexAlign.SpaceBetween
633                    }) {
634                        /** Delete */
635                        Column() {
636                            Image($rawfile('icon/ic_public_delete.svg'))
637                                .width(24)
638                                .height(24)
639                            Text($r('app.string.delete'))
640                                .fontSize(10)
641                                .margin({ top: 3 })
642                                .lineHeight(14)
643                                .fontWeight(FontWeight.Medium)
644                                .fontColor($r('sys.color.ohos_id_color_text_primary'))
645                        }.width('25%').opacity(this.mConversationCtrl.selectDeleteMsgCount == 0 ? 0.4 : 1)
646                        .onClick(() => {
647                            if (this.mConversationCtrl.selectDeleteMsgCount != 0) {
648                                this.mConversationCtrl.clickGroupDelete();
649                                this.delConversionController.open();
650                            }
651                        })
652
653                        Column() {
654                            Image(this.mConversationCtrl.isMessageCheckAll ? $rawfile('icon/ic_select_all_filled.svg')
655                                : $rawfile('icon/ic_select_all.svg'))
656                                .width(24)
657                                .height(24)
658                            Text(this.mConversationCtrl.isMessageCheckAll ? $r('app.string.msg_deselect_all')
659                                : $r('app.string.msg_select_all')) {
660                            }
661                            .fontSize(10)
662                            .margin({ top: 3 })
663                            .lineHeight(14)
664                            .fontWeight(FontWeight.Medium)
665                            .fontColor(this.mConversationCtrl.isMessageCheckAll ?
666                            $r('sys.color.ohos_id_color_subtab_text_on') : $r('sys.color.ohos_id_color_text_primary'))
667                        }.width('25%')
668                        .onClick(() => {
669                            this.mConversationCtrl.clickGroupCheckAll()
670                        })
671
672                        /** more */
673                        Column() {
674                            Image($rawfile('icon/ic_message_more1.svg'))
675                                .width(24)
676                                .height(24)
677                            Text($r('app.string.more')) {
678                            }
679                            .fontSize(10)
680                            .margin({ top: 3 })
681                            .lineHeight(14)
682                            .fontWeight(FontWeight.Medium)
683                            .fontColor($r('sys.color.ohos_id_color_text_primary'))
684                        }
685                        .width('25%')
686                        .enabled(this.mConversationCtrl.selectDeleteMsgCount == 1 ? true : false)
687                        // @ts-ignore
688                        .bindMenu(this.MenuBuilder)
689                    }
690                    .width('100%')
691                    .height(56)
692                }
693                // <!--Bottom Send Bar-->
694                if (!this.mConversationCtrl.isSelectStatus) {
695                    Flex({ alignItems: ItemAlign.End, justifyContent: FlexAlign.Center }) {
696                        // <!--Left More and Full Screen Display-->
697                        Row() {
698                            Image($rawfile('icon/msg_add.svg'))
699                                .onClick(() => {
700
701                                })
702                                .width(24)
703                                .height(24)
704                                .visibility(Visibility.Visible)
705                                .opacity(0.3)
706                            Blank().width(16)
707                            Row() {
708                                if (this.cardImage) {
709                                    MultiSimCardMenu({
710                                        slotId: this.slotId
711                                    })
712                                }
713                                Row() {
714                                    TextArea({
715                                        placeholder: $r('app.string.msg_note_mms'),
716                                        text: this.mConversationCtrl.textValue
717                                    })
718                                        .placeholderColor($r('sys.color.ohos_id_color_text_hint'))
719                                        .caretColor($r('sys.color.ohos_id_color_focused_outline'))
720                                        .backgroundColor($r('sys.color.ohos_id_color_background_transparent'))
721                                        .onChange(value => {
722                                            this.mConversationCtrl.changeValue(value);
723                                        })
724                                        .padding({ left: 0, right: this.cardImage ? 42 : 0 })
725                                        .borderRadius(0)
726                                        .fontSize(16)
727                                }.constraintSize({ minHeight: 40 })
728                            }
729                            .backgroundColor($r('sys.color.ohos_id_color_text_field_sub_bg'))
730                            .padding({ left: 8, right: 8 })
731                            .borderRadius(20)
732                            .width('100%')
733                            .layoutWeight(1)
734
735                            Image($rawfile('icon/ic_message_emoji.svg'))
736                                .width(24)
737                                .height(24)
738                                .margin({ left: 16 })
739                                .visibility(Visibility.Visible)
740                                .opacity(0.3)
741                            // <!--send-->
742                            Image(this.mConversationCtrl.canSendMessage ? $rawfile('icon/ic_message_send_filled.svg')
743                                : $rawfile('icon/ic_message_send.svg'))
744                                .onClick(() => {
745                                    //  Click Send.
746                                    this.mConversationCtrl.send();
747                                })
748                                .width(24)
749                                .height(24)
750                                .margin({ left: 16 })
751                        }.width('100%')
752                    }
753                    .constraintSize({ minHeight: 56 })
754                    .width('100%').padding({ bottom: 8, top: 8 })
755                }
756            }
757            .width('100%')
758            .padding({
759                left: this.mConversationCtrl.isSelectStatus && !this.mConversationCtrl.hasDetailDelete ? 0 :
760                $r('app.float.space_24'),
761                right: this.mConversationCtrl.isSelectStatus && !this.mConversationCtrl.hasDetailDelete ? 0 :
762                $r('app.float.bottom_send_bar_padding_right')
763            })
764            .clip(new Rect({
765                width: '100%',
766                height: '100%',
767                radius: this.mConversationCtrl.isSelectStatus ? [] : [[20, 20], [20, 20], [0, 0], [0, 0]]
768            }))
769            .backgroundColor(this.mConversationCtrl.isSelectStatus && !this.mConversationCtrl.hasDetailDelete ?
770                null : $r('sys.color.ohos_id_color_toolbar_bg'))
771        }
772        .backgroundColor($r('sys.color.ohos_id_color_sub_background'))
773        .width('100%')
774        .height('100%')
775    }
776
777    @Builder
778    MenuBuilder() {
779        Column() {
780            Row() {
781                Text($r('app.string.query_details'))
782                    .lineHeight(22)
783                    .fontSize(16)
784                    .fontColor($r('sys.color.ohos_id_color_text_primary'))
785                    .margin({ left: 16, top: 13, bottom: 13 })
786            }
787            .width('100%')
788            .height(48)
789            .onClick(() => {
790                this.dialogController.open()
791                this.mConversationCtrl.isSelectStatus = !this.mConversationCtrl.isSelectStatus
792                this.mConversationCtrl.isMessageCheckAll = false
793                this.mConversationCtrl.cancelCheckedAll()
794            })
795
796            if (this.mConversationCtrl.hasReport) {
797                Divider()
798                    .margin({ left: 16, right: 16 })
799                    .strokeWidth(0.5)
800                    .color($r('sys.color.ohos_id_color_list_separator'))
801
802                Row() {
803                    Text($r('app.string.query_report'))
804                        .lineHeight(22)
805                        .fontSize(16)
806                        .fontColor($r('sys.color.ohos_id_color_text_primary'))
807                        .margin({ left: 16, top: 13, bottom: 13 })
808                }.height(48)
809                .onClick(() => {
810                    this.mConversationCtrl.moreSelected(6)
811                })
812            }
813        }.borderRadius(24)
814        .width(145)
815        .alignItems(HorizontalAlign.Start)
816    }
817}
818
819@CustomDialog
820struct DetailsDialog {
821    controller: CustomDialogController
822    item: LooseObject
823    receiver: string
824
825    build() {
826        Column() {
827            Text($r('app.string.msgDetails'))
828                .fontSize(20)
829                .lineHeight(28)
830                .fontColor($r('sys.color.ohos_id_color_text_primary'))
831                .fontWeight(FontWeight.Bold)
832                .fontFamily('HarmonyHeiTi')
833                .margin({ top: 14, bottom: 14 })
834            Text() {
835                Span($r('app.string.type')).fontSize(16)
836                Span($r('app.string.sms')).fontSize(16)
837            }
838            .fontSize(16)
839            .fontColor($r('sys.color.ohos_id_color_text_primary'))
840            .margin({ bottom: 4 })
841            .fontFamily('HarmonyHeiTi')
842
843            Text() {
844                Span(this.item.isReceive ? $r('app.string.sender') : $r('app.string.putAddresser')).fontSize(16)
845                Span(this.receiver).fontSize(16)
846            }
847            .fontSize(16)
848            .fontColor($r('sys.color.ohos_id_color_text_primary'))
849            .margin({ bottom: 4 })
850            .fontFamily('HarmonyHeiTi')
851
852            Text() {
853                Span($r('app.string.sendTime')).fontSize(16)
854                Span(this.item.fullDate).fontSize(16)
855                Span(this.item.timeOfSms).fontSize(16)
856            }
857            .fontSize(16)
858            .fontColor($r('sys.color.ohos_id_color_text_primary'))
859            .margin({ bottom: 8 })
860            .fontFamily('HarmonyHeiTi')
861
862            Flex({ justifyContent: FlexAlign.Center }) {
863                Button() {
864                    Text($r('app.string.msg_know'))
865                        .fontFamily('HarmonyHeiTi')
866                        .fontWeight(FontWeight.Medium)
867                        .fontSize(16)
868                        .fontColor($r('sys.color.ohos_id_color_floating_button_bg_normal'))
869                }
870                .width(200)
871                .backgroundColor(Color.Transparent)
872                .margin({ top: 5 })
873                .onClick(() => {
874                    this.controller.close()
875                })
876            }.height(40)
877        }
878        .borderRadius(24)
879        .padding({ left: 24, right: 24, bottom: 16 })
880        .alignItems(HorizontalAlign.Start)
881    }
882}
883
884// Custom Chat Bubble
885@Component
886struct bubbleText {
887    @Link conversationCtrl: ConversationController;
888    private delConversionController: any;
889    private bubbleTextBorderRadius: Array<number>; // Fillet size, two parameters in total
890    private bubbleTextDirection: string; // left: upper left corner right: upper right corner
891    private content: string; // Bubble Display Content
892    private bubbleTextBackgroundColor: Resource | string; // Bubble background color
893    private isShowMsgLongMenu: boolean;
894    private itemIndex: number;
895    @State showMenu: boolean = false
896
897    aboutToAppear() {
898        this.showMenu = this.isShowMsgLongMenu
899    }
900
901    @Builder
902    MenuBuilder() {
903        Row() {
904            Button($r('app.string.msg_transmit'))
905                .fontSize(14)
906                .fontColor($r('sys.color.ohos_id_color_text_primary'))
907                .backgroundColor($r('sys.color.ohos_id_color_dialog_bg'))
908                .onClick(() => {
909                    this.conversationCtrl.longPressSelected(1)
910                    this.showMenu = false
911                })
912            Button($r('app.string.delete'))
913                .fontSize(14)
914                .fontColor($r('sys.color.ohos_id_color_text_primary'))
915                .backgroundColor($r('sys.color.ohos_id_color_dialog_bg'))
916                .onClick(() => {
917                    this.conversationCtrl.longPressSelected(2)
918                    this.showMenu = false
919                    this.delConversionController.open();
920                })
921            Button($r('app.string.more'))
922                .fontSize(14)
923                .fontColor($r('sys.color.ohos_id_color_text_primary'))
924                .backgroundColor($r('sys.color.ohos_id_color_dialog_bg'))
925                .onClick(() => {
926                    this.conversationCtrl.longPressSelected(4)
927                    this.showMenu = false
928                })
929        }
930        .height(40)
931        .borderRadius(20)
932        .backgroundColor($r('sys.color.ohos_id_color_dialog_bg'))
933    }
934
935    build() {
936        Row() {
937            Text(this.content)
938                .fontSize(16)
939                .lineHeight(21)
940                .padding({ left: 12, right: 12, top: 8, bottom: 8 })
941                .fontColor($r('sys.color.ohos_id_color_text_primary'))
942        }
943        .backgroundColor(this.bubbleTextBackgroundColor)
944        .borderRadius(this.bubbleTextDirection == 'right' ?
945            { topLeft: this.bubbleTextBorderRadius[1], topRight: this.bubbleTextBorderRadius[0],
946                bottomLeft: this.bubbleTextBorderRadius[1], bottomRight: this.bubbleTextBorderRadius[1] } :
947            { topLeft: this.bubbleTextBorderRadius[0], topRight: this.bubbleTextBorderRadius[1],
948                bottomLeft: this.bubbleTextBorderRadius[1], bottomRight: this.bubbleTextBorderRadius[1] })
949        .flexBasis('auto')
950        .gesture(
951            LongPressGesture({
952                repeat: false,
953                duration: 500
954            })//Touch and hold the action will be triggered continuously.
955                .onAction(() => {
956                    if (!this.conversationCtrl.isSelectStatus) {
957                        this.conversationCtrl.mmsListLongPress(this.itemIndex)
958                        this.showMenu = true
959                    }
960                })
961        )
962        .bindPopup(this.showMenu, {
963            builder: this.MenuBuilder,
964            placement: this.bubbleTextDirection == 'left' ? Placement.TopRight : Placement.TopLeft,
965            maskColor: $r('sys.color.ohos_id_color_mask_thin'),
966            popupColor: $r('sys.color.ohos_id_color_background_transparent'),
967            enableArrow: false,
968            onStateChange: (e) => {
969                if (!e.isVisible) {
970                    this.showMenu = false
971                }
972            }
973        })
974    }
975}