1/**
2 * Copyright (c) 2021-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
16import Router from '@system.router';
17import prompt from '@ohos.prompt'
18import ConfigData from '../../../../../../common/utils/src/main/ets/default/baseUtil/ConfigData';
19import SettingListModel from '../../../../../../product/phone/src/main/ets/model/settingListImpl/SettingListModel';
20import ComponentConfig from './ComponentConfig';
21
22@Component
23export struct ServiceItemComponent {
24  @State touched: boolean = false;
25  private targetPage: string = '';
26  private serviceTitle: string | Resource = '';
27  private serviceEndText: string = '';
28  private serviceIcon: string | Resource = '';
29
30  onPageShow() {
31    console.info(`onPageShow: ${this.targetPage}`)
32  }
33
34  aboutToAppear(): void {
35    console.info(`aboutToAppear: ${this.targetPage}`)
36  }
37
38  build() {
39    Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
40      Row() {
41        Image(this.serviceIcon)
42          .width($r('app.float.wh_value_24'))
43          .height($r('app.float.wh_value_24'))
44          .margin({
45            left: $r('app.float.distance_8'),
46            top: $r('app.float.distance_15'),
47            bottom: $r('app.float.distance_17')
48          })
49
50        Text(this.serviceTitle)
51          .fontSize($r('app.float.font_16'))
52          .fontColor($r('sys.color.ohos_id_color_text_primary'))
53          .fontWeight(FontWeight.Medium)
54          .fontFamily('HarmonyHeiTi')
55          .maxLines(ComponentConfig.MAX_LINES_3)
56          .textOverflow({ overflow: TextOverflow.Ellipsis })
57          .width('90%')
58          .margin({
59            left: $r('app.float.distance_16')
60          })
61          .textAlign(TextAlign.Start);
62      }
63      .align(Alignment.Start)
64      .height(ConfigData.WH_100_100)
65      .width('70%')
66
67      Row() {
68        Text(this.serviceEndText)
69          .fontSize($r('app.float.font_14'))
70          .lineHeight($r('app.float.lineHeight_19'))
71          .align(Alignment.End)
72          .fontWeight(FontWeight.Regular)
73          .fontFamily('HarmonyHeiTi')
74          .fontColor($r('sys.color.ohos_id_color_text_secondary'))
75          .margin({ top: $r('app.float.distance_19'), bottom: $r('app.float.distance_18') });
76
77        Image('/res/image/ic_settings_arrow.svg')
78          .width($r('app.float.wh_value_12'))
79          .height($r('app.float.wh_value_24'))
80          .margin({
81            left: $r('app.float.distance_4'),
82            right: $r('app.float.distance_8'),
83            top: $r('app.float.distance_16'),
84            bottom: $r('app.float.distance_16')
85          })
86          .fillColor($r('sys.color.ohos_id_color_fourth'))
87      }
88      .align(Alignment.End)
89      .height(ConfigData.WH_100_100);
90    }
91    .width(ConfigData.WH_100_100)
92    .height($r('app.float.wh_value_56'))
93    .borderRadius($r('app.float.radius_20'))
94    .linearGradient(this.touched ? {
95      angle: 90,
96      direction: GradientDirection.Right,
97      colors: [[$r('app.color.DCEAF9'), 0.0], [$r('app.color.FAFAFA'), 1.0]]
98    } : {
99      angle: 90,
100      direction: GradientDirection.Right,
101      colors: [[$r('sys.color.ohos_id_color_foreground_contrary'), 1], [$r('sys.color.ohos_id_color_foreground_contrary'), 1]]
102    })
103    .onTouch((event?: TouchEvent) => {
104      if (event?.type === TouchType.Down) {
105        this.touched = true;
106      }
107      if (event?.type === TouchType.Up) {
108        this.touched = false;
109      }
110    })
111  }
112}