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 prompt from "@ohos.prompt";
17import Router from '@system.router';
18import InputMethod from '@ohos.inputMethod';
19import AboutDeviceModel from '../model/aboutDeviceImpl/AboutDeviceModel';
20import LogUtil from '../../../../../../common/utils/src/main/ets/default/baseUtil/LogUtil';
21import ConfigData from '../../../../../../common/utils/src/main/ets/default/baseUtil/ConfigData';
22import HeadComponent from '../../../../../../common/component/src/main/ets/default/headComponent';
23import ResourceUtil from '../../../../../../common/search/src/main/ets/default/common/ResourceUtil';
24import bluetooth from '@ohos.bluetooth';
25
26class TopMeasure {
27  top?: Resource;
28}
29class BottomMeasure {
30  bottom?: Resource;
31}
32const flexRowTop: TopMeasure = { top: $r("app.float.wh_value_212") }
33const flexRowBottom: BottomMeasure = { bottom: $r('app.float.wh_padding_128') }
34/**
35 * about phone
36 */
37@Entry
38@Component
39struct DeviceName {
40  @State deviceName: string = AboutDeviceModel.getSystemName();
41  @State isFocused: boolean = false ;
42  @State cancelButton : boolean = true;
43  @State confirmsButton : boolean = false;
44  private deviceInfo: string = '';
45  private aboutDeviceList: string[] = [];
46
47  build() {
48    Column() {
49      GridContainer({ gutter: ConfigData.GRID_CONTAINER_GUTTER_24, margin: ConfigData.GRID_CONTAINER_MARGIN_24 }) {
50        Column() {
51          HeadComponent({ headName: $r('app.string.deviceName'), isActive: true })
52
53          TextInput({ text: this.deviceName })
54            .placeholderFont({
55              size: $r("app.float.font_18"),
56              weight: FontWeight.Normal,
57              style: FontStyle.Normal
58            })
59            .type(InputType.Normal)
60            .enterKeyType(EnterKeyType.Done)
61            .caretColor($r('app.color.font_color_007DFF'))
62            .maxLength(30)
63            .fontColor($r("sys.color.ohos_id_color_primary"))
64            .height($r("app.float.wh_value_40"))
65            .borderRadius(0)
66            .margin({ top: $r("app.float.distance_8") })
67            .backgroundColor($r('app.color.color_00000000_transparent'))
68            .onFocus(() => {
69              this.isFocused = true;
70            })
71            .onChange((value: string) => {
72              LogUtil.debug(ConfigData.TAG + 'device name changed to: ' + JSON.stringify(value));
73              if (value.trim().length != 0) {
74                this.deviceName = value;
75                this.confirmsButton = true;
76              } else {
77                this.deviceName = value.trim();
78                this.confirmsButton = false;
79              }
80
81              if (this.deviceName.length == 30) {
82                this.isFocused = false;
83                ResourceUtil.getString($r("app.string.Input_Reached_Limited"))
84                  .then(value => {
85                    prompt.showToast({
86                      message: value,
87                      duration: 2000,
88                      bottom: 100
89                    })
90                  })
91              }
92            })
93            .onSubmit((enterKey) => {
94              InputMethod.getInputMethodController().stopInput()
95                .then((ret) => {
96                  LogUtil.debug(`${ConfigData.TAG}, enterType: ${enterKey}, stopInput: ${ret}`);
97                });
98            })
99
100          Divider()
101            .strokeWidth(1)
102            .padding({ left: $r('app.float.wh_value_12'), right: $r('app.float.wh_value_12') })
103            .color($r("sys.color.ohos_id_color_primary"))
104            .opacity($r('sys.float.ohos_id_alpha_content_secondary'))
105
106          Flex({ justifyContent: FlexAlign.SpaceBetween }) {
107            Row() {
108              ButtonComponent({
109                text: $r("app.string.cancel"),
110                deviceName: $deviceName,
111                buttonFlag: $cancelButton,
112                onClickEvent: () => {
113                  Router.back();
114                }
115              })
116                .layoutWeight(ConfigData.LAYOUT_WEIGHT_1)
117
118              Column()
119                .width($r('app.float.distance_12'))
120                .height($r('app.float.application_button_height'))
121
122              ButtonComponent({
123                text: $r("app.string.confirm"),
124                deviceName: $deviceName,
125                buttonFlag: $confirmsButton,
126                onClickEvent: () => {
127                  if (this.deviceName.length > 0) {
128                    AboutDeviceModel.setSystemName(this.deviceName);
129                    let name = bluetooth.getLocalName();
130                    if (name != this.deviceName) {
131                      bluetooth.setLocalName(this.deviceName);
132                    }
133                    Router.back();
134                  } else {
135                    return;
136                  }
137                }
138              })
139                .layoutWeight(ConfigData.LAYOUT_WEIGHT_1)
140            }
141            .alignItems(this.isFocused ? VerticalAlign.Top : VerticalAlign.Bottom)
142            .height(ConfigData.WH_100_100)
143            .padding(this.isFocused ? flexRowTop : flexRowBottom)
144          }
145          .width(ConfigData.WH_100_100)
146        }
147        .useSizeType({
148          sm: { span: 4, offset: 0 },
149          md: { span: 6, offset: 1 },
150          lg: { span: 8, offset: 2 }
151        })
152      }
153      .width(ConfigData.WH_100_100)
154      .height(ConfigData.WH_100_100)
155    }
156    .backgroundColor($r("sys.color.ohos_id_color_sub_background"))
157    .width(ConfigData.WH_100_100)
158    .height(ConfigData.WH_100_100)
159  }
160}
161
162@Component
163struct ButtonComponent {
164  @Link deviceName: string ;
165  @Link buttonFlag : boolean;
166  private text : ResourceStr = '';
167  private onClickEvent = () => {};
168
169  build() {
170    Button({ type: ButtonType.Capsule, stateEffect: true }) {
171      Text(this.text)
172        .width(ConfigData.WH_100_100)
173        .fontSize($r('app.float.font_16'))
174        .fontWeight(FontWeight.Medium)
175        .lineHeight($r('app.float.wh_value_22'))
176        .fontColor($r('app.color.font_color_007DFF'))
177        .textAlign(TextAlign.Center)
178        .height($r("app.float.wh_value_40"))
179        .borderRadius($r('app.float.radius_20'))
180        .onTouch((event?: TouchEvent) => {
181          if(this.deviceName.length === 0 && this.buttonFlag != true){
182            return;
183          }
184        })
185        .onClick(() => {
186          this.onClickEvent();
187        })
188    }
189    .backgroundColor($r('sys.color.ohos_id_color_button_normal'))
190    .opacity(this.deviceName.length === 0 && this.buttonFlag != true ? $r('sys.float.ohos_fa_alpha_disabled') : 1)
191    .width(ConfigData.WH_100_100)
192  }
193}
194