1/**
2 * Copyright (c) 2021 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 ComponentConfig from './ComponentConfig';
16
17/**
18 * item custom component
19 */
20@Component
21export default struct DoubleLineComponent {
22  @State settingIcon: string = "";
23  @State settingTitle: string = "";
24  @State settingSummary: string = "";
25  @State settingValue: string = "";
26  @State settingArrow: string = '';
27  @State settingArrowStyle: string = "";
28  @State settingUri: string = "";
29  @State titleFontColor: Resource = $r('sys.color.ohos_id_color_text_primary');
30  @State isTouched: boolean = false;
31  @State heights: Resource = $r('app.float.wh_value_72');
32  @State image_wh: Resource = $r('app.float.wh_value_40');
33  @State fontSize: Resource = $r('sys.float.ohos_id_text_size_body1');
34  @State valueFontSize: Resource = $r('sys.float.ohos_id_text_size_body2');
35  private isEnabled: boolean = true;
36  private onArrowClick?: () => void;
37
38  build() {
39    Row() {
40      Row() {
41        Image(this.settingIcon)
42          .width(this.image_wh)
43          .height(this.image_wh)
44          .margin({ right: $r('app.float.wh_value_16') })
45          .objectFit(ImageFit.Contain);
46
47        Column() {
48          Text(this.settingTitle)
49            .fontColor(this.isEnabled ? this.titleFontColor : $r("sys.color.ohos_id_color_primary"))
50            .fontSize(this.fontSize)
51            .fontWeight(FontWeight.Medium)
52            .textAlign(TextAlign.Start)
53            .maxLines(ComponentConfig.MAX_LINES_3)
54            .textOverflow({ overflow: TextOverflow.Ellipsis })
55          Row() {
56            Text($r('app.string.version'))
57              .fontColor($r('sys.color.ohos_id_color_mask_light'))
58              .fontSize(this.valueFontSize)
59              .textAlign(TextAlign.Start)
60              .fontWeight(FontWeight.Regular)
61              .maxLines(ComponentConfig.MAX_LINES_1)
62              .textOverflow({ overflow: TextOverflow.Ellipsis })
63              .visibility('pages/applicationInfo' === this.settingUri ? Visibility.Visible : Visibility.None)
64              .margin({ top: $r('sys.float.ohos_id_text_margin_vertical') })
65            Text(this.settingSummary)
66              .fontColor($r('sys.color.ohos_id_color_mask_light'))
67              .fontSize(this.valueFontSize)
68              .fontWeight(FontWeight.Regular)
69              .textAlign(TextAlign.Start)
70              .maxLines(ComponentConfig.MAX_LINES_1)
71              .textOverflow({ overflow: TextOverflow.Ellipsis })
72              .visibility('pages/applicationInfo' === this.settingUri ? Visibility.Visible : Visibility.None)
73              .margin({ top: $r('sys.float.ohos_id_text_margin_vertical') })
74          }
75        }
76        .alignItems(HorizontalAlign.Start);
77      }
78      .flexShrink(0)
79      .alignItems(VerticalAlign.Center)
80      .align(Alignment.Start)
81
82      Blank()
83
84      Row() {
85        Text(this.settingValue)
86          .fontSize(this.valueFontSize)
87          .fontColor($r('sys.color.ohos_fa_text_secondary'))
88          .fontWeight('sans-serif')
89          .height($r('app.float.wh_value_40'))
90          .margin({ left: $r('sys.float.ohos_id_elements_margin_horizontal_l') })
91          .align(Alignment.End);
92
93        Stack({ alignContent: Alignment.End }) {
94          Image(this.settingArrow)
95            .width(this.settingArrowStyle === '' ? $r('app.float.wh_value_12') : $r('app.float.wh_value_40'))
96            .height($r('app.float.wh_value_24'))
97        }
98        .width($r('app.float.wh_value_48'))
99        .height($r('app.float.wh_value_48'))
100        .margin({ left: $r('app.float.wh_value_4') })
101        .visibility('' === this.settingArrow ? Visibility.None : Visibility.Visible)
102        .onClick(this.onArrowClick as ((event?: ClickEvent) => void));
103      }
104      .align(Alignment.End);
105    }
106    .height(this.heights)
107    .width(ComponentConfig.WH_100_100)
108    .padding({
109      left: $r('sys.float.ohos_id_card_margin_end'),
110      right: $r('sys.float.ohos_id_card_margin_end'),
111      top: $r('sys.float.ohos_id_elements_margin_vertical_m'),
112      bottom: $r('sys.float.ohos_id_elements_margin_vertical_m')
113    })
114    .borderRadius($r("sys.float.ohos_id_corner_radius_default_l"))
115    .linearGradient((this.isEnabled && this.isTouched) ? {
116      angle: 90,
117      direction: GradientDirection.Right,
118      colors: [[$r("app.color.DCEAF9"), 0.0], [$r("app.color.FAFAFA"), 1.0]]
119    } : {
120      angle: 90,
121      direction: GradientDirection.Right,
122      colors: [[$r("sys.color.ohos_id_color_foreground_contrary"), 1], [$r("sys.color.ohos_id_color_foreground_contrary"), 1]]
123    })
124    .alignItems(VerticalAlign.Center)
125    .onTouch((event?: TouchEvent) => {
126      if (event?.type === TouchType.Down) {
127        this.isTouched = true;
128      }
129      if (event?.type === TouchType.Up) {
130        this.isTouched = false;
131      }
132    })
133  }
134}