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 { StringUtil } from '../../../../../../../common/src/main/ets/util/StringUtil';
16
17/**
18 * Select the contact item component, which is responsible for displaying a single contact.
19 */
20@Component
21export default struct BatchSelectContactItemView {
22  @State private single: boolean = false;
23  @State private item: { [key: string]: any } = {};
24  private onContactItemClicked: Function;
25  private onSingleContactItemClick: Function;
26  private index: number;
27  @State private showIndex: boolean = false;
28  @State private showDivifer: boolean = false;
29
30  build() {
31    Column() {
32      Row() {
33        Row() {
34          if (StringUtil.isEmpty(this.item.nameSuffix)) {
35            Image(StringUtil.isEmpty(this.item.portraitPath) ? $r('app.media.ic_user_portrait') : this.item.portraitPath)
36              .width($r('app.float.id_card_image_mid'))
37              .height($r('app.float.id_card_image_mid'))
38              .objectFit(ImageFit.Contain)
39              .borderRadius($r('app.float.id_card_image_mid'))
40              .backgroundColor(this.item.portraitColor)
41          } else {
42            Text(this.item.nameSuffix.toUpperCase())
43              .fontSize(30)
44              .fontWeight(FontWeight.Bold)
45              .fontColor(Color.White)
46              .backgroundColor(this.item.portraitColor)
47              .height($r('app.float.id_card_image_mid'))
48              .width($r('app.float.id_card_image_mid'))
49              .textAlign(TextAlign.Center)
50              .borderRadius($r('app.float.id_card_image_mid'))
51          }
52        }
53        .width($r('app.float.id_card_image_mid'))
54        .height($r('app.float.id_card_image_mid'))
55        .margin({ left: $r('app.float.id_card_margin_max') })
56        .flexShrink(0)
57
58        Column() {
59          Text(StringUtil.isEmpty(this.item.showName) ? this.item.phoneNum : this.item.showName)
60            .fontColor($r('sys.color.ohos_id_color_text_primary'))
61            .fontSize($r('sys.float.ohos_id_text_size_body1'))
62            .fontWeight(FontWeight.Medium)
63            .margin({ left: $r('app.float.id_card_margin_xl'), bottom: $r('app.float.id_card_margin_sm') })
64            .textOverflow({ overflow: TextOverflow.Ellipsis })
65            .maxLines(2)
66
67          Text(this.item.phoneNumbers[0].labelName)
68            .fontColor($r('sys.color.ohos_id_color_text_tertiary'))
69            .fontSize($r('sys.float.ohos_id_text_size_body2'))
70            .fontWeight(FontWeight.Regular)
71            .margin({ left: $r('app.float.id_card_margin_xl') })
72            .textOverflow({ overflow: TextOverflow.Ellipsis })
73            .maxLines(2)
74        }
75        .justifyContent(FlexAlign.Center)
76        .alignItems(HorizontalAlign.Start)
77        .flexGrow(1)
78        .flexShrink(1)
79        .padding({ top: $r('app.float.id_card_margin_mid'), bottom: $r('app.float.id_card_margin_mid') })
80        .constraintSize({ minHeight: $r('app.float.id_item_height_max') })
81
82        Toggle({
83          type: ToggleType.Checkbox,
84          isOn: (this.item.phoneNumbers[0].checked == undefined) ? false : this.item.phoneNumbers[0].checked
85        })
86          .width(20)
87          .height(20)
88          .flexShrink(0)
89          .enabled(false)
90          .margin({ left: $r('app.float.id_card_margin_max'), right: $r('app.float.id_card_margin_max') })
91          .selectedColor($r('sys.color.ohos_id_color_connected'))
92          .visibility(!this.single ? Visibility.Visible : Visibility.None)
93      }
94      .justifyContent(FlexAlign.Start)
95      .alignItems(VerticalAlign.Center)
96      .width('100%')
97      .height($r('app.float.id_item_height_max'))
98      .onClick(() => {
99        if (!this.single) {
100          this.onContactItemClicked(this.index, 0);
101        } else {
102          this.onSingleContactItemClick(this.item.phoneNumbers[0].phoneNumber, this.item.showName);
103        }
104      })
105
106      List({ space: 0, initialIndex: 0 }) {
107        ForEach(this.item.phoneNumbers, (item, index) => {
108          ListItem() {
109            if (index != 0) {
110              Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Start }) {
111                Row() {
112                }
113                .width($r('app.float.id_card_image_mid'))
114                .height($r('app.float.id_card_image_mid'))
115                .margin({ left: $r('app.float.id_card_margin_max') })
116                .visibility(Visibility.Hidden)
117
118                Flex({
119                  direction: FlexDirection.Column,
120                  alignItems: ItemAlign.Start,
121                  justifyContent: FlexAlign.Center
122                }) {
123
124                  Text(item.labelName)
125                    .fontColor($r('sys.color.ohos_id_color_text_tertiary'))
126                    .fontSize($r('sys.float.ohos_id_text_size_body2'))
127                    .fontWeight(FontWeight.Regular)
128                    .margin({ left: $r('app.float.id_card_margin_xl') })
129                }
130                .flexGrow(1)
131                .height($r('app.float.id_item_height_mid'))
132              }
133              .width('100%')
134              .height($r('app.float.id_item_height_mid'))
135              .onClick(() => {
136                if (!this.single) {
137                  this.onContactItemClicked(this.index, index);
138                } else {
139                  this.onSingleContactItemClick(this.item.phoneNumbers[index].phoneNumber, this.item.showName);
140                }
141              })
142            }
143          }
144        }, (item, index) => JSON.stringify(item))
145      }
146      .listDirection(Axis.Vertical)
147      .edgeEffect(EdgeEffect.Spring)
148      .divider({
149        strokeWidth: 0.5,
150        color: $r('sys.color.ohos_id_color_list_separator'),
151        startMargin: 76,
152        endMargin: $r('app.float.id_card_margin_max'),
153      })
154    }
155    .padding({ top: this.showIndex ? 4 : 0,
156      bottom: this.showDivifer ? 4 : 0,
157    })
158    .backgroundColor(Color.White)
159    .clip(new Rect({
160      width: '100%',
161      height: '100%',
162      radius: [[this.showIndex ? 24 : 0, this.showIndex ? 24 : 0],
163      [this.showIndex ? 24 : 0, this.showIndex ? 24 : 0],
164      [this.showDivifer ? 0 : 24, this.showDivifer ? 0 : 24],
165      [this.showDivifer ? 0 : 24, this.showDivifer ? 0 : 24]]
166    }))
167  }
168}
169