• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (c) 2023-2024 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 { LengthMetrics } from '@ohos.arkui.node';
16import { BusinessError, Callback } from '@ohos.base';
17import common from '@ohos.app.ability.common';
18import { accessibility } from '@kit.AccessibilityKit';
19import { intl } from '@kit.LocalizationKit';
20import i18n from '@ohos.i18n';
21import {systemDateTime} from '@kit.BasicServicesKit';
22
23export enum CounterType {
24  LIST = 0,
25  COMPACT = 1,
26  INLINE = 2,
27  INLINE_DATE = 3
28}
29
30enum FocusText {
31  NONE,
32  TEXT1,
33  TEXT2,
34  TEXT3,
35}
36
37export class CommonOptions {
38  public focusable?: boolean;
39  public step?: number;
40  public onHoverIncrease?: (isHover: boolean) => void;
41  public onHoverDecrease?: (isHover: boolean) => void;
42}
43
44export class InlineStyleOptions extends CommonOptions {
45  public value?: number;
46  public min?: number;
47  public max?: number;
48  public textWidth?: number;
49  public onChange?: (value: number) => void;
50}
51
52export class NumberStyleOptions extends InlineStyleOptions {
53  public label?: ResourceStr;
54  public onFocusIncrease?: () => void;
55  public onFocusDecrease?: () => void;
56  public onBlurIncrease?: () => void;
57  public onBlurDecrease?: () => void;
58}
59
60export class DateData {
61  public year: number;
62  public month: number;
63  public day: number;
64
65  constructor(year: number, month: number, day: number) {
66    this.year = year;
67    this.month = month;
68    this.day = day;
69  }
70
71  toString(): string {
72    let date = this.year.toString() + '-';
73    let month = this.month < 10 ? '0' + this.month.toString() : this.month.toString();
74    date += month + '-';
75    let day = this.day < 10 ? '0' + this.day.toString() : this.day.toString();
76    date += day;
77    return date;
78  }
79}
80
81export class DateStyleOptions extends CommonOptions {
82  public year?: number;
83  public month?: number;
84  public day?: number;
85  public onDateChange?: (date: DateData) => void;
86}
87
88export class CounterOptions {
89  public type: CounterType = CounterType.LIST;
90  public direction?: Direction;
91  public numberOptions?: NumberStyleOptions;
92  public inlineOptions?: InlineStyleOptions;
93  public dateOptions?: DateStyleOptions;
94}
95
96class CounterResource {
97  // counter color
98  public static readonly BUTTON_BACKGROUD_COLOR = $r('sys.color.ohos_id_color_button_normal');
99  public static readonly BUTTON_ICON_COLOR = $r('sys.color.ohos_id_color_primary');
100  public static readonly BUTTON_BORDER_FOCUSED_COLOR = $r('sys.color.ohos_id_color_focused_outline');
101  public static readonly COUNTER_TEXT_COLOR = $r('sys.color.ohos_id_color_text_primary');
102  public static readonly COUNTER_BORDER_COLOR = $r('sys.color.ohos_id_color_component_normal');
103  // button icon
104  public static readonly BUTTON_ADD_ICON = $r("sys.media.ohos_ic_public_add");
105  public static readonly BUTTON_SUB_ICON = $r("sys.media.ohos_ic_public_minus");
106  public static readonly BUTTON_ARROW_UP = $r('sys.media.ohos_ic_public_arrow_up');
107  public static readonly BUTTON_ARROW_DOWN = $r('sys.media.ohos_ic_public_arrow_down');
108  // counter size
109  public static readonly BUTTON_BORDER_FOCUSED_WIDTH = '2vp';
110  public static readonly BUTTON_BORDER_BLUR_WIDTH = '0vp';
111  public static readonly COUNTER_BORDER_WIDTH_NUMBER = 1;
112  public static readonly COUNTER_LIST_LABEL_SIZE = $r('sys.float.ohos_id_text_size_body1');
113  public static readonly COUNTER_LIST_NUMBER_SIZE = $r('sys.float.ohos_id_text_size_body1');
114  public static readonly COUNTER_COMPACT_LABEL_SIZE = $r('sys.float.ohos_id_text_size_body2');
115  public static readonly COUNTER_NUMBER_SIZE = $r('sys.float.ohos_id_text_size_body1');
116  public static readonly COUNTER_LIST_LEFT_PADDING = $r('sys.float.ohos_id_default_padding_start');
117  public static readonly COUNTER_LIST_RIGHT_PADDING = $r('sys.float.ohos_id_default_padding_end');
118  public static readonly COUNTER_COMPACT_BUTTON_ICON_SIZE = $r('sys.float.button_icon_size');
119  public static readonly COUNTER_COMPACT_CONTAINER_HEIGHT = $r('sys.float.container_height');
120  public static readonly COUNTER_BORDER_WIDTH = $r('sys.float.border_width');
121  public static readonly COUNTER_COMPACT_BUTTON_SIZE = $r('sys.float.button_size');
122  public static readonly COUNTER_COMPACT_CONTAINER_RADIUS = $r('sys.float.container_radius');
123  public static readonly COUNTER_COMPACT_BUTTON_CONTAINER_MARGIN = $r('sys.float.button_container_margin');
124  public static readonly COUNTER_LIST_PADDING = 12;
125  public static readonly COUNTER_LIST_HEIGHT = '48vp';
126  public static readonly COUNTER_LIST_BUTTON_ICON_SIZE = '20vp';
127  public static readonly COUNTER_LIST_BUTTON_SIZE = '32vp';
128  public static readonly COUNTER_LIST_BUTTON_RADIUS = '16vp';
129  public static readonly COUNTER_LIST_BUTTON_TEXT_DISTANCE = '8vp';
130  public static readonly COUNTER_LIST_BUTTON_TEXT_MARGIN = 8;
131  public static readonly COUNTER_LIST_FOCUS_BORDER_SIZE = '30vp';
132  public static readonly COUNTER_LIST_FOCUS_BORDER_RADIUS = '15vp';
133  public static readonly COUNTER_LIST_BUTTON_HOT_SPOT_X = '-8vp';
134  public static readonly COUNTER_LIST_BUTTON_HOT_SPOT_Y = '-8vp';
135  public static readonly COUNTER_COMPACT_BUTTON_RADIUS = '12vp';
136  public static readonly COUNTER_COMPACT_BUTTON_TEXT_DISTANCE = '10vp';
137  public static readonly COUNTER_COMPACT_BUTTON_TEXT_MARGIN = 10;
138  public static readonly COUNTER_COMPACT_CONTAINER_LABEL_DISTANCE = '8vp';
139  public static readonly COUNTER_COMPACT_FOCUS_BORDER_SIZE = '22vp';
140  public static readonly COUNTER_COMPACT_FOCUS_BORDER_RADIUS = '11vp';
141  public static readonly COUNTER_INLINE_BUTTON_ICON_WIDTH = '24vp';
142  public static readonly COUNTER_INLINE_BUTTON_ICON_HEIGHT = '12vp';
143  public static readonly COUNTER_INLINE_BUTTON_TEXT_DISTANCE = '12vp';
144  public static readonly COUNTER_INLINE_CONTAINER_HEIGHT = '32vp';
145  public static readonly COUNTER_INLINE_BUTTON_WIDTH = '32vp';
146  public static readonly COUNTER_INLINE_BUTTON_HEIGHT = '16vp';
147  public static readonly COUNTER_INLINE_RADIUS = '8vp';
148  public static readonly COUNTER_INLINE_FOCUS_BORDER_WIDTH = '28vp';
149  public static readonly COUNTER_INLINE_FOCUS_BORDER_HEIGHT = '13.5vp';
150  public static readonly COUNTER_INLINE_DATE_TEXT_MARGIN = 12;
151  public static readonly COUNTER_INLINE_INPUT_TEXT_MARGIN = 12;
152  public static readonly COUNTER_BUTTON_INITIAL_OPACITY = 1;
153  public static readonly COUNTER_BUTTON_DISABLE_OPACITY = 0.4;
154  public static readonly COUNTER_LABEL_MAX_FONT_SIZE_SCALE = 2;
155  public static readonly COUNTER_NUMBER_MAX_FONT_SIZE_SCALE = 1;
156}
157
158class CounterConstant {
159  public static readonly COUNTER_MAX_YEAR = 5000;
160  public static readonly COUNTER_MIN_YEAR = 1;
161  public static readonly COUNTER_INITIAL_MONTH = 1;
162  public static readonly COUNTER_INITIAL_DAY = 1;
163  public static readonly COUNTER_INITIAL_STEP = 1;
164  public static readonly COUNTER_TEN_NUMBER = 10;
165  public static readonly COUNTER_MIN_MONTH = 1;
166  public static readonly COUNTER_MAX_MONTH = 12;
167  public static readonly COUNTER_MIN_DAY = 1;
168  public static readonly KEYCODE_DPAD_UP = 2012;
169  public static readonly KEYCODE_DPAD_DOWN = 2013;
170  public static readonly KEYCODE_DPAD_LEFT = 2014;
171  public static readonly KEYCODE_DPAD_RIGHT = 2015;
172  public static readonly KEYCODE_MOVE_HOME = 2081;
173  public static readonly KEYCODE_MOVE_END = 2082;
174  public static readonly KEYCODE_TAB = 2049;
175  public static readonly KEYCODE_ESC = 2070;
176  public static readonly COUNTER_MIN_VALUE = 0;
177  public static readonly COUNTER_MAX_VALUE = 999;
178  public static readonly JANUARY = 1;
179  public static readonly FEBRUARY = 2;
180  public static readonly MARCH = 3;
181  public static readonly APRIL = 4;
182  public static readonly MAY = 5;
183  public static readonly JUNE = 6;
184  public static readonly JULY = 7;
185  public static readonly AUGUST = 8;
186  public static readonly SEPTEMBER = 9;
187  public static readonly OCTOBER = 10;
188  public static readonly NOVEMBER = 11;
189  public static readonly DECEMBER = 12;
190  public static readonly BIG_MONTH_DAYS = 31;
191  public static readonly SMALL_MONTH_DAYS = 30;
192  public static readonly FEBRUARY_DAYS = 28;
193  public static readonly AUSPICIOUS_FEBRUARY_DAYS = 29;
194  public static readonly AUSPICIOUS_FOUR = 4;
195  public static readonly AUSPICIOUS_HUNDRED = 100;
196  public static readonly AUSPICIOUS_FOUR_HUNDRED = 400;
197}
198
199@Component
200export struct CounterComponent {
201  @Prop @Watch('onOptionsChange') options: CounterOptions;
202  @State type: number = -1;
203  @State counterDirection: Direction = Direction.Auto;
204  @State choverEffect: HoverEffect = HoverEffect.Auto;
205  @State focusEnable: boolean = true;
206  @State step: number = CounterConstant.COUNTER_INITIAL_STEP;
207  @State inputValue: string = '0';
208  @State inputYear: number = CounterConstant.COUNTER_MIN_YEAR;
209  @State inputMoon: number = 0;
210  @State inputDay: number = 0;
211  @State inputHour: number = 0;
212  @State inputMinute: number = 0;
213  @State inputSecond: number = 0;
214  @State subOpacity: number = CounterResource.COUNTER_BUTTON_INITIAL_OPACITY;
215  @State addOpacity: number = CounterResource.COUNTER_BUTTON_INITIAL_OPACITY;
216  @State subBtnStateEffect: boolean = true;
217  @State addBtnStateEffect: boolean = true;
218  @State focusText: number = FocusText.NONE;
219  @State hasFocusText1: boolean = false
220  @State hasFocusText2: boolean = false
221  @State hasFocusText3: boolean = false
222  @State subBtnFocusWidh: string = '0vp'
223  @State addBtnFocusWidh: string = '0vp'
224  @State value: number = 0;
225  @State year: number = 0;
226  @State month: number = 0;
227  @State day: number = 0;
228  @State hour: number = 0;
229  @State minute: number = 0;
230  @State second: number = 0;
231  @State subBtnEnabled: boolean = true
232  @State addBtnEnabled: boolean = true
233  @State hasInputText1: boolean = false;
234  @State hasInputText2: boolean = false;
235  @State hasInputText3: boolean = false;
236  @State textWidth: number = 0;
237  @State min: number = CounterConstant.COUNTER_MIN_VALUE;
238  @State max: number = CounterConstant.COUNTER_MAX_VALUE;
239  private maxYear: number = CounterConstant.COUNTER_MAX_YEAR;
240  private minYear: number = CounterConstant.COUNTER_MIN_YEAR;
241  private numberStrList: Array<string> = ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09'];
242  private onHoverIncrease?: (isHover: boolean) => void;
243  private onHoverDecrease?: (isHover: boolean) => void;
244  private onFocusIncrease?: () => void;
245  private onFocusDecrease?: () => void;
246  private onBlurIncrease?: () => void;
247  private onBlurDecrease?: () => void;
248  private onChange?: (value: number) => void;
249  private onDateChange?: (date: DateData) => void;
250  private timeoutID1: number = -1;
251  private timeoutID2: number = -1;
252  private timeoutID3: number = -1;
253  private numberStyleOptions: NumberStyleOptions = new NumberStyleOptions();
254  private dateStyleOptions: DateStyleOptions = new DateStyleOptions();
255  private inlineStyleOptions: InlineStyleOptions = new InlineStyleOptions();
256  private timeStamp: number = 0;
257  private hasTextWidth: boolean = false;
258  private controller1: TextInputController = new TextInputController();
259  private controller2: TextInputController = new TextInputController();
260  private controller3: TextInputController = new TextInputController();
261  private initFlag: boolean = true;
262  private increaseStrCache: string | undefined = undefined;
263  private reduceStrCache: string | undefined = undefined;
264
265  getTextInputFontSize() {
266    let fontSize = this.resourceToVp(CounterResource.COUNTER_NUMBER_SIZE);
267    let uiContext = this.getUIContext();
268    let fontSizeScale = (uiContext.getHostContext() as common.UIAbilityContext)?.config?.fontSizeScale ?? 1;
269    if (fontSizeScale < 1) {
270      return fontSize + 'fp';
271    } else {
272      return fontSize + 'vp';
273    }
274  }
275
276  getDate(value: string | undefined): string {
277    return `[n2] ${value} [n0]`
278  }
279
280  getDateYear(value: number): string {
281    let locale = new intl.Locale();
282    let localeID = locale.toString();
283    let date = new Date(this.year, this.month - 1, this.day);
284    date.setFullYear(this.year);
285    let dateFormatYear: Intl.DateTimeFormat | undefined;
286    try {
287      dateFormatYear = new Intl.DateTimeFormat(localeID, {
288        year: 'numeric',
289        timeZone: systemDateTime.getTimezoneSync(),
290      });
291    } catch (error) {
292      console.log(`Accessility getDateYear fail. message: ${error.message}, code: ${error.code}`);
293    }
294    if (!dateFormatYear) {
295      dateFormatYear = new Intl.DateTimeFormat(localeID, { year: 'numeric' });
296    }
297    let formattedDateYear = dateFormatYear.format(date);
298    return this.getDate(formattedDateYear);
299  }
300
301  getDateMonth(value: number): string {
302    let locale = new intl.Locale();
303    let localeID = locale.toString();
304    let date = new Date(this.year, this.month - 1, this.day);
305    date.setFullYear(this.year);
306    let dateFormatMonth: Intl.DateTimeFormat | undefined;
307    try {
308      dateFormatMonth = new Intl.DateTimeFormat(localeID, { month: 'long',
309        timeZone: systemDateTime.getTimezoneSync()});
310    } catch(error) {
311      console.log(`Accessility getDateMonth fail. message: ${error.message}, code: ${error.code}`);
312    }
313    if (!dateFormatMonth) {
314      dateFormatMonth = new Intl.DateTimeFormat(localeID, { month: 'long'});
315    }
316    let formattedDateMonth = dateFormatMonth.format(date);
317    return this.getDate(formattedDateMonth);
318  }
319
320  getDateDay(value: number): string {
321    try {
322      let dateDayMap = new Map([
323        [1, getContext().resourceManager.getStringByNameSync('First_counter_accessibility_text')],
324        [2, getContext().resourceManager.getStringByNameSync('Second_counter_accessibility_text')],
325        [3, getContext().resourceManager.getStringByNameSync('Third_counter_accessibility_text')],
326        [4, getContext().resourceManager.getStringByNameSync('Fourth_counter_accessibility_text')],
327        [5, getContext().resourceManager.getStringByNameSync('Fifth_counter_accessibility_text')],
328        [6, getContext().resourceManager.getStringByNameSync('Sixth_counter_accessibility_text')],
329        [7, getContext().resourceManager.getStringByNameSync('Seventh_counter_accessibility_text')],
330        [8, getContext().resourceManager.getStringByNameSync('Eighth_counter_accessibility_text')],
331        [9, getContext().resourceManager.getStringByNameSync('Ninth_counter_accessibility_text')],
332        [10, getContext().resourceManager.getStringByNameSync('Tenth_counter_accessibility_text')],
333        [11, getContext().resourceManager.getStringByNameSync('Eleventh_counter_accessibility_text')],
334        [12, getContext().resourceManager.getStringByNameSync('Twelfth_counter_accessibility_text')],
335        [13, getContext().resourceManager.getStringByNameSync('Thirteenth_counter_accessibility_text')],
336        [14, getContext().resourceManager.getStringByNameSync('Fourteenth_counter_accessibility_text')],
337        [15, getContext().resourceManager.getStringByNameSync('Fifteenth_counter_accessibility_text')],
338        [16, getContext().resourceManager.getStringByNameSync('Sixteenth_counter_accessibility_text')],
339        [17, getContext().resourceManager.getStringByNameSync('Seventeenth_counter_accessibility_text')],
340        [18, getContext().resourceManager.getStringByNameSync('Eighteenth_counter_accessibility_text')],
341        [19, getContext().resourceManager.getStringByNameSync('Nineteenth_counter_accessibility_text')],
342        [20, getContext().resourceManager.getStringByNameSync('Twentieth_counter_accessibility_text')],
343        [21, getContext().resourceManager.getStringByNameSync('TwentyFirst_counter_accessibility_text')],
344        [22, getContext().resourceManager.getStringByNameSync('TwentySecond_counter_accessibility_text')],
345        [23, getContext().resourceManager.getStringByNameSync('TwentyThird_counter_accessibility_text')],
346        [24, getContext().resourceManager.getStringByNameSync('TwentyFourth_counter_accessibility_text')],
347        [25, getContext().resourceManager.getStringByNameSync('TwentyFifth_counter_accessibility_text')],
348        [26, getContext().resourceManager.getStringByNameSync('TwentySixth_counter_accessibility_text')],
349        [27, getContext().resourceManager.getStringByNameSync('TwentySeventh_counter_accessibility_text')],
350        [28, getContext().resourceManager.getStringByNameSync('TwentyEighth_counter_accessibility_text')],
351        [29, getContext().resourceManager.getStringByNameSync('TwentyNinth_counter_accessibility_text')],
352        [30, getContext().resourceManager.getStringByNameSync('Thirtieth_counter_accessibility_text')],
353        [31, getContext().resourceManager.getStringByNameSync('ThirtyFirst_counter_accessibility_text')],
354      ]);
355      return this.getDate(dateDayMap.get(this.day));
356    } catch (error) {
357      console.log(`Accessility getDate fail. message: ${error.message}, code: ${error.code}`);
358      return '';
359    }
360  }
361
362  convertNumberToString(value: number) {
363    if (value >= 0 && value < CounterConstant.COUNTER_TEN_NUMBER) {
364      return this.numberStrList[value];
365    } else {
366      return value.toString();
367    }
368  }
369
370  aboutToAppear(): void {
371    let dateTime = new Date();
372    this.timeStamp = dateTime.getTime();
373    if (this.options !== undefined && this.options !== null) {
374      this.onOptionsChange();
375    }
376  }
377
378  private updateNumberStyleOptions() {
379    if (this.numberStyleOptions.label === undefined) {
380      this.numberStyleOptions.label = '';
381    }
382    if (this.initFlag) {
383      this.initFlag = false;
384      this.value = this.numberStyleOptions.value !== undefined ? this.numberStyleOptions.value : 0;
385      this.onChange?.(this.value);
386      this.inputValue = this.value.toString();
387    }
388    if (this.numberStyleOptions.min !== undefined) {
389      this.min = this.numberStyleOptions.min;
390    }
391    if (this.numberStyleOptions.max !== undefined) {
392      this.max = this.numberStyleOptions.max;
393    }
394    if (this.min > this.max) {
395      this.min = this.max;
396    }
397    if (this.numberStyleOptions.textWidth !== undefined) {
398      this.textWidth = this.numberStyleOptions.textWidth;
399      if (this.textWidth < 0) {
400        this.textWidth = 0;
401      }
402      this.hasTextWidth = true;
403    }
404    if (this.value <= this.min) {
405      this.value = this.min;
406      this.onChange?.(this.value);
407      this.inputValue = this.value.toString();
408    }
409    if (this.value >= this.max) {
410      this.value = this.max;
411      this.onChange?.(this.value);
412      this.inputValue = this.value.toString();
413    }
414    if (this.numberStyleOptions.step !== undefined) {
415      if (this.numberStyleOptions.step < 1) {
416        this.step = 1
417      } else {
418        this.step = this.numberStyleOptions.step;
419      }
420    }
421    this.updateButtonStatus()
422    this.updateNumberStyleOptionsEvent();
423  }
424
425  private updateNumberStyleOptionsEvent() {
426    if (this.numberStyleOptions.onHoverIncrease !== undefined) {
427      this.onHoverIncrease = this.numberStyleOptions.onHoverIncrease;
428    }
429    if (this.numberStyleOptions.onHoverDecrease !== undefined) {
430      this.onHoverDecrease = this.numberStyleOptions.onHoverDecrease;
431    }
432    if (this.numberStyleOptions.onFocusIncrease !== undefined) {
433      this.onFocusIncrease = this.numberStyleOptions.onFocusIncrease;
434    }
435    if (this.numberStyleOptions.onFocusDecrease !== undefined) {
436      this.onFocusDecrease = this.numberStyleOptions.onFocusDecrease;
437    }
438    if (this.numberStyleOptions.onBlurIncrease !== undefined) {
439      this.onBlurIncrease = this.numberStyleOptions.onBlurIncrease;
440    }
441    if (this.numberStyleOptions.onBlurDecrease !== undefined) {
442      this.onBlurDecrease = this.numberStyleOptions.onBlurDecrease;
443    }
444    if (this.numberStyleOptions.onChange !== undefined) {
445      this.onChange = this.numberStyleOptions.onChange;
446    }
447    if (this.numberStyleOptions.focusable !== undefined) {
448      this.focusEnable = this.numberStyleOptions.focusable;
449    }
450  }
451
452  private updateInlineStyleOptions() {
453    if (this.initFlag) {
454      this.initFlag = false;
455      this.value = this.inlineStyleOptions.value !== undefined ? this.inlineStyleOptions.value : 0;
456      this.onChange?.(this.value);
457      this.inputValue = this.value.toString();
458    }
459    if (this.inlineStyleOptions.min !== undefined) {
460      this.min = this.inlineStyleOptions.min;
461    }
462    if (this.inlineStyleOptions.max !== undefined) {
463      this.max = this.inlineStyleOptions.max;
464    }
465    if (this.min > this.max) {
466      this.min = this.max;
467    }
468
469    if (this.inlineStyleOptions.textWidth !== undefined) {
470      this.textWidth = this.inlineStyleOptions.textWidth;
471      if (this.textWidth < 0) {
472        this.textWidth = 0;
473      }
474      this.hasTextWidth = true;
475    }
476    if (this.value <= this.min) {
477      this.value = this.min;
478      this.onChange?.(this.value);
479      this.inputValue = this.value.toString();
480    }
481    if (this.value >= this.max) {
482      this.value = this.max;
483      this.onChange?.(this.value);
484      this.inputValue = this.value.toString();
485    }
486    if (this.inlineStyleOptions.step !== undefined) {
487      if (this.inlineStyleOptions.step < 1) {
488        this.step = 1
489      } else {
490        this.step = this.inlineStyleOptions.step;
491      }
492    }
493    this.updateButtonStatus()
494    this.updateInlineStyleOptionsEvent();
495  }
496
497  private updateInlineStyleOptionsEvent() {
498    if (this.inlineStyleOptions.onHoverIncrease !== undefined) {
499      this.onHoverIncrease = this.inlineStyleOptions.onHoverIncrease;
500    }
501    if (this.inlineStyleOptions.onHoverDecrease !== undefined) {
502      this.onHoverDecrease = this.inlineStyleOptions.onHoverDecrease;
503    }
504    if (this.inlineStyleOptions.onChange !== undefined) {
505      this.onChange = this.inlineStyleOptions.onChange;
506    }
507    if (this.inlineStyleOptions.focusable !== undefined) {
508      this.focusEnable = this.inlineStyleOptions.focusable;
509    }
510  }
511
512  private updateDateStyleOptions() {
513    if (this.dateStyleOptions.step !== undefined) {
514      if (this.dateStyleOptions.step < 1) {
515        this.step = 1
516      } else {
517        this.step = Math.floor(this.dateStyleOptions.step);
518      }
519    }
520    if (this.dateStyleOptions.onHoverIncrease !== undefined) {
521      this.onHoverIncrease = this.dateStyleOptions.onHoverIncrease;
522    }
523    if (this.dateStyleOptions.onHoverDecrease !== undefined) {
524      this.onHoverDecrease = this.dateStyleOptions.onHoverDecrease;
525    }
526    if (this.dateStyleOptions.year !== undefined &&
527      this.dateStyleOptions.year >= this.minYear &&
528      this.dateStyleOptions.year <= this.maxYear) {
529      if (this.year === 0) {
530        this.year = this.dateStyleOptions.year;
531      }
532    } else {
533      this.year = CounterConstant.COUNTER_MIN_YEAR;
534    }
535    if (this.dateStyleOptions.month !== undefined &&
536      this.dateStyleOptions.month <= CounterConstant.COUNTER_MAX_MONTH &&
537      this.dateStyleOptions.month >= CounterConstant.COUNTER_MIN_MONTH) {
538      if (this.month === 0) {
539        this.month = this.dateStyleOptions.month;
540      }
541    } else {
542      this.month = CounterConstant.COUNTER_INITIAL_MONTH;
543    }
544    if (this.dateStyleOptions.day !== undefined &&
545      this.dateStyleOptions.day <= this.getDayNumber() &&
546      this.dateStyleOptions.day >= CounterConstant.COUNTER_MIN_DAY) {
547      if (this.day === 0) {
548        this.day = this.dateStyleOptions.day;
549      }
550    } else {
551      this.day = CounterConstant.COUNTER_INITIAL_DAY;
552    }
553    if (this.dateStyleOptions.onDateChange !== undefined) {
554      this.onDateChange = this.dateStyleOptions.onDateChange;
555    }
556    if (this.dateStyleOptions.focusable !== undefined) {
557      this.focusEnable = this.dateStyleOptions.focusable;
558    }
559    this.updateDay();
560  }
561
562  private onOptionsChange() {
563    this.type = this.options.type;
564    if (this.options.direction) {
565      this.counterDirection = this.options.direction;
566    } else {
567      this.counterDirection = Direction.Auto;
568    }
569
570    if (this.type === CounterType.LIST ||
571      this.type === CounterType.COMPACT) {
572      if (this.options.numberOptions !== undefined) {
573        this.numberStyleOptions = this.options.numberOptions;
574      }
575      this.updateNumberStyleOptions();
576    } else if (this.type === CounterType.INLINE) {
577      if (this.options.inlineOptions !== undefined) {
578        this.inlineStyleOptions = this.options.inlineOptions;
579      }
580      this.updateInlineStyleOptions();
581    } else if (this.type === CounterType.INLINE_DATE) {
582      let options = this.options.dateOptions;
583      if (options !== undefined) {
584        options.year = options.year ? options.year : CounterConstant.COUNTER_MIN_YEAR;
585        options.month = options.month ? options.month : CounterConstant.COUNTER_MIN_MONTH;
586        options.day = options.day ? options.day : CounterConstant.COUNTER_MIN_DAY;
587        this.dateStyleOptions = options;
588      }
589      this.updateDateStyleOptions();
590    } else {
591
592    }
593  }
594
595  private subValue(): void {
596    if (this.subBtnStateEffect) {
597      this.value -= this.step;
598    }
599    if (!this.addBtnStateEffect) {
600      this.addBtnStateEffect = true;
601      this.addOpacity = CounterResource.COUNTER_BUTTON_INITIAL_OPACITY;
602      this.addBtnEnabled = true;
603    }
604    if (this.value <= this.min) {
605      this.value = this.min;
606      this.subOpacity = CounterResource.COUNTER_BUTTON_DISABLE_OPACITY;
607      this.subBtnStateEffect = false;
608      this.subBtnEnabled = false;
609    } else {
610      if (this.subOpacity === CounterResource.COUNTER_BUTTON_DISABLE_OPACITY) {
611        this.subOpacity = CounterResource.COUNTER_BUTTON_INITIAL_OPACITY;
612      }
613      if (!this.subBtnStateEffect) {
614        this.subBtnStateEffect = true;
615      }
616      if (!this.subBtnEnabled) {
617        this.subBtnEnabled = true;
618      }
619    }
620    this.focusText1();
621  }
622
623  private focusText1() {
624    if (this.type === CounterType.INLINE) {
625      if (this.focusText === FocusText.NONE) {
626        this.focusText = FocusText.TEXT1;
627        this.hasFocusText1 = true;
628        this.focusWithTarget('InlineTextInput' + this.timeStamp.toString());
629      }
630    }
631  }
632
633  private addValue(): void {
634    if (this.addBtnStateEffect) {
635      this.value += this.step;
636    }
637
638    if (!this.subBtnStateEffect) {
639      this.subBtnStateEffect = true;
640      this.subOpacity = CounterResource.COUNTER_BUTTON_INITIAL_OPACITY;
641      this.subBtnEnabled = true;
642    }
643    if (this.value >= this.max) {
644      this.value = this.max;
645      this.addOpacity = CounterResource.COUNTER_BUTTON_DISABLE_OPACITY;
646      this.addBtnStateEffect = false;
647      this.addBtnEnabled = false;
648    } else {
649      if (this.addOpacity === CounterResource.COUNTER_BUTTON_DISABLE_OPACITY) {
650        this.addOpacity = CounterResource.COUNTER_BUTTON_INITIAL_OPACITY;
651      }
652      if (!this.addBtnStateEffect) {
653        this.addBtnStateEffect = true;
654      }
655      if (!this.addBtnEnabled) {
656        this.addBtnEnabled = true;
657      }
658    }
659
660    this.focusText1();
661  }
662
663  private getDayNumber(): number {
664    switch (this.month) {
665      case CounterConstant.JANUARY:
666      case CounterConstant.MARCH:
667      case CounterConstant.MAY:
668      case CounterConstant.JULY:
669      case CounterConstant.AUGUST:
670      case CounterConstant.OCTOBER:
671      case CounterConstant.DECEMBER:
672        return CounterConstant.BIG_MONTH_DAYS;
673        break;
674      case CounterConstant.APRIL:
675      case CounterConstant.JUNE:
676      case CounterConstant.SEPTEMBER:
677      case CounterConstant.NOVEMBER:
678        return CounterConstant.SMALL_MONTH_DAYS;
679        break;
680      case CounterConstant.FEBRUARY:
681        if ((this.year % CounterConstant.AUSPICIOUS_FOUR === 0 &&
682          this.year % CounterConstant.AUSPICIOUS_HUNDRED !== 0) ||
683          this.year % CounterConstant.AUSPICIOUS_FOUR_HUNDRED === 0) {
684          return CounterConstant.AUSPICIOUS_FEBRUARY_DAYS;
685        } else {
686          return CounterConstant.FEBRUARY_DAYS;
687        }
688        break;
689      default:
690        return CounterConstant.SMALL_MONTH_DAYS;
691        break;
692    }
693  }
694
695  private accessibilityBroadcastSubDate(): void {
696    if (this.focusText === FocusText.TEXT1) {
697      if (this.subBtnStateEffect) {
698        this.inputYear = this.year;
699        this.year -= this.step;
700        if (!this.hasFocusText1) {
701          this.hasFocusText1 = true;
702        }
703      }
704      if (!this.addBtnStateEffect) {
705        this.addBtnStateEffect = true;
706        this.addOpacity = CounterResource.COUNTER_BUTTON_INITIAL_OPACITY;
707        this.addBtnEnabled = true;
708      }
709      if (this.year <= this.minYear) {
710        this.subOpacity = CounterResource.COUNTER_BUTTON_DISABLE_OPACITY;
711        this.subBtnStateEffect = false;
712        this.subBtnEnabled = false;
713      } else {
714        if (this.subOpacity === CounterResource.COUNTER_BUTTON_DISABLE_OPACITY) {
715          this.subOpacity = CounterResource.COUNTER_BUTTON_INITIAL_OPACITY;
716        }
717        if (!this.subBtnStateEffect) {
718          this.subBtnStateEffect = true;
719        }
720        if (!this.subBtnEnabled) {
721          this.subBtnEnabled = true;
722        }
723      }
724      try {
725        let eventInfo: accessibility.EventInfo = ({
726          type: 'announceForAccessibility',
727          bundleName: (getContext() as common.UIAbilityContext)?.abilityInfo?.bundleName,
728          triggerAction: 'click',
729          textAnnouncedForAccessibility: (this.getDateYear(this.year) + ',' + this.getDateYear(this.year) +
730            '/' +
731          this.getDateMonth(this.month) + '/' + this.getDateDay(this.day))
732        });
733        accessibility.sendAccessibilityEvent(eventInfo).then(() => {
734          console.log('Accessility subYear click send event');
735        });
736      } catch (exception) {
737        let code: number = (exception as BusinessError).code;
738        let message: string = (exception as BusinessError).message;
739        console.log(`Accessility subYear faild error code:${code} message:${message}`);
740      }
741    } else if (this.focusText === FocusText.TEXT2) {
742      this.month -= this.step % CounterConstant.COUNTER_MAX_MONTH;
743      if (this.month < CounterConstant.COUNTER_MIN_MONTH) {
744        this.month += CounterConstant.COUNTER_MAX_MONTH;
745      }
746      if (!this.hasFocusText2) {
747        this.hasFocusText2 = true;
748      }
749      try {
750        let eventInfo: accessibility.EventInfo = ({
751          type: 'announceForAccessibility',
752          bundleName: (getContext() as common.UIAbilityContext)?.abilityInfo?.bundleName,
753          triggerAction: 'click',
754          textAnnouncedForAccessibility: (this.getDateMonth(this.month) + ',' + this.getDateYear(this.year) +
755            '/' +
756          this.getDateMonth(this.month) + '/' + this.getDateDay(this.day))
757        });
758        accessibility.sendAccessibilityEvent(eventInfo).then(() => {
759          console.log('Accessility subMonth click send event');
760        });
761      } catch (exception) {
762        let code: number = (exception as BusinessError).code;
763        let message: string = (exception as BusinessError).message;
764        console.log(`Accessility subMonth faild error code:${code} message:${message}`);
765      }
766    } else if (this.focusText === FocusText.TEXT3) {
767      this.day -= this.step % this.getDayNumber();
768      if (this.day < CounterConstant.COUNTER_MIN_DAY) {
769        this.day += this.getDayNumber();
770      }
771      if (!this.hasFocusText3) {
772        this.hasFocusText3 = true;
773      }
774      try {
775        let eventInfo: accessibility.EventInfo = ({
776          type: 'announceForAccessibility',
777          bundleName: (getContext() as common.UIAbilityContext)?.abilityInfo?.bundleName,
778          triggerAction: 'click',
779          textAnnouncedForAccessibility: (this.getDateDay(this.day) + ',' + this.getDateYear(this.year) +
780            '/' +
781          this.getDateMonth(this.month) + '/' + this.getDateDay(this.day))
782        });
783        accessibility.sendAccessibilityEvent(eventInfo).then(() => {
784          console.log('Accessility subDay click send event');
785        });
786      } catch (exception) {
787        let code: number = (exception as BusinessError).code;
788        let message: string = (exception as BusinessError).message;
789        console.log(`Accessility subDay faild error code:${code} message:${message}`);
790      }
791    } else {
792      this.focusDayWitdhSub();
793    }
794  }
795
796  private subDate(): void {
797    if (this.focusText === FocusText.TEXT1) {
798      if (this.subBtnStateEffect) {
799        this.inputYear = this.year;
800        this.year -= this.step;
801        if (!this.hasFocusText1) {
802          this.hasFocusText1 = true;
803        }
804      }
805      if (!this.addBtnStateEffect) {
806        this.addBtnStateEffect = true;
807        this.addOpacity = CounterResource.COUNTER_BUTTON_INITIAL_OPACITY;
808        this.addBtnEnabled = true;
809      }
810      if (this.year <= this.minYear) {
811        this.subOpacity = CounterResource.COUNTER_BUTTON_DISABLE_OPACITY;
812        this.subBtnStateEffect = false;
813        this.subBtnEnabled = false;
814      } else {
815        if (this.subOpacity === CounterResource.COUNTER_BUTTON_DISABLE_OPACITY) {
816          this.subOpacity = CounterResource.COUNTER_BUTTON_INITIAL_OPACITY;
817        }
818        if (!this.subBtnStateEffect) {
819          this.subBtnStateEffect = true;
820        }
821        if (!this.subBtnEnabled) {
822          this.subBtnEnabled = true;
823        }
824      }
825    } else if (this.focusText === FocusText.TEXT2) {
826      this.month -= this.step % CounterConstant.COUNTER_MAX_MONTH;
827      if (this.month < CounterConstant.COUNTER_MIN_MONTH) {
828        this.month += CounterConstant.COUNTER_MAX_MONTH;
829      }
830      if (!this.hasFocusText2) {
831        this.hasFocusText2 = true;
832      }
833    } else if (this.focusText === FocusText.TEXT3) {
834      this.day -= this.step % this.getDayNumber();
835      if (this.day < CounterConstant.COUNTER_MIN_DAY) {
836        this.day += this.getDayNumber();
837      }
838      if (!this.hasFocusText3) {
839        this.hasFocusText3 = true;
840      }
841    } else {
842      this.focusDayWitdhSub();
843    }
844  }
845
846  private focusDayWitdhSub() {
847    this.focusText = FocusText.TEXT3;
848    this.hasFocusText3 = true;
849    this.day -= this.step % this.getDayNumber();
850    if (this.day < CounterConstant.COUNTER_MIN_DAY) {
851      this.day += this.getDayNumber();
852    }
853    this.focusWithTarget('DateTextInput3' + this.timeStamp.toString());
854  }
855
856  private accessibilityBroadcastAddDate(): void {
857    if (this.focusText === FocusText.TEXT1) {
858      if (this.addBtnStateEffect) {
859        this.inputYear = this.year;
860        this.year += this.step;
861        if (!this.hasFocusText1) {
862          this.hasFocusText1 = true;
863        }
864      }
865      if (!this.subBtnStateEffect) {
866        this.subBtnStateEffect = true;
867        this.subOpacity = CounterResource.COUNTER_BUTTON_INITIAL_OPACITY;
868        this.subBtnEnabled = true;
869      }
870      if (this.year >= this.maxYear) {
871        this.addOpacity = CounterResource.COUNTER_BUTTON_DISABLE_OPACITY;
872        this.addBtnStateEffect = false;
873        this.addBtnEnabled = false;
874      } else {
875        if (this.addOpacity === CounterResource.COUNTER_BUTTON_DISABLE_OPACITY) {
876          this.addOpacity = CounterResource.COUNTER_BUTTON_INITIAL_OPACITY;
877        }
878        if (!this.addBtnStateEffect) {
879          this.addBtnStateEffect = true;
880        }
881        if (!this.addBtnEnabled) {
882          this.addBtnEnabled = true;
883        }
884      }
885      try {
886        let eventInfo: accessibility.EventInfo = ({
887          type: 'announceForAccessibility',
888          bundleName: (getContext() as common.UIAbilityContext)?.abilityInfo?.bundleName,
889          triggerAction: 'click',
890          textAnnouncedForAccessibility: (this.getDateYear(this.year) + ',' + this.getDateYear(this.year) +
891            '/' +
892          this.getDateMonth(this.month) + '/' + this.getDateDay(this.day))
893        });
894        accessibility.sendAccessibilityEvent(eventInfo).then(() => {
895          console.log('Accessility addYear click send event');
896        });
897      } catch (exception) {
898        let code: number = (exception as BusinessError).code;
899        let message: string = (exception as BusinessError).message;
900        console.log(`Accessility addYear click faild error code:${code} message:${message}`);
901      }
902    } else if (this.focusText === FocusText.TEXT2) {
903      this.month += this.step % CounterConstant.COUNTER_MAX_MONTH;
904      if (this.month > CounterConstant.COUNTER_MAX_MONTH) {
905        this.month -= CounterConstant.COUNTER_MAX_MONTH;
906      }
907      if (!this.hasFocusText2) {
908        this.hasFocusText2 = true;
909      }
910      try {
911        let eventInfo: accessibility.EventInfo = ({
912          type: 'announceForAccessibility',
913          bundleName: (getContext() as common.UIAbilityContext)?.abilityInfo?.bundleName,
914          triggerAction: 'click',
915          textAnnouncedForAccessibility: (this.getDateMonth(this.month) + ',' + this.getDateYear(this.year) +
916            '/' +
917          this.getDateMonth(this.month) + '/' + this.getDateDay(this.day))
918        });
919        accessibility.sendAccessibilityEvent(eventInfo).then(() => {
920          console.log('Accessility addMonth click send event');
921        });
922      } catch (exception) {
923        let code: number = (exception as BusinessError).code;
924        let message: string = (exception as BusinessError).message;
925        console.log(`Accessility addMonth faild error code:${code} message:${message}`);
926      }
927    } else if (this.focusText === FocusText.TEXT3) {
928      this.day += this.step % this.getDayNumber();
929      if (this.day > this.getDayNumber()) {
930        this.day -= this.getDayNumber();
931      }
932      if (!this.hasFocusText3) {
933        this.hasFocusText3 = true;
934      }
935      try {
936        let eventInfo: accessibility.EventInfo = ({
937          type: 'announceForAccessibility',
938          bundleName: (getContext() as common.UIAbilityContext)?.abilityInfo?.bundleName,
939          triggerAction: 'click',
940          textAnnouncedForAccessibility: (this.getDateDay(this.day) + ',' + this.getDateYear(this.year) +
941            '/' +
942          this.getDateMonth(this.month) + '/' + this.getDateDay(this.day))
943        });
944        accessibility.sendAccessibilityEvent(eventInfo).then(() => {
945          console.log('Accessility addDay click send event');
946        });
947      } catch (exception) {
948        let code: number = (exception as BusinessError).code;
949        let message: string = (exception as BusinessError).message;
950        console.log(`Accessility addDay faild error code:${code} message:${message}`);
951      }
952    } else {
953      this.focusDayWithAdd();
954    }
955  }
956
957  private addDate(): void {
958    if (this.focusText === FocusText.TEXT1) {
959      if (this.addBtnStateEffect) {
960        this.inputYear = this.year;
961        this.year += this.step;
962        if (!this.hasFocusText1) {
963          this.hasFocusText1 = true;
964        }
965      }
966      if (!this.subBtnStateEffect) {
967        this.subBtnStateEffect = true;
968        this.subOpacity = CounterResource.COUNTER_BUTTON_INITIAL_OPACITY;
969        this.subBtnEnabled = true;
970      }
971      if (this.year >= this.maxYear) {
972        this.addOpacity = CounterResource.COUNTER_BUTTON_DISABLE_OPACITY;
973        this.addBtnStateEffect = false;
974        this.addBtnEnabled = false;
975      } else {
976        if (this.addOpacity === CounterResource.COUNTER_BUTTON_DISABLE_OPACITY) {
977          this.addOpacity = CounterResource.COUNTER_BUTTON_INITIAL_OPACITY;
978        }
979        if (!this.addBtnStateEffect) {
980          this.addBtnStateEffect = true;
981        }
982        if (!this.addBtnEnabled) {
983          this.addBtnEnabled = true;
984        }
985      }
986    } else if (this.focusText === FocusText.TEXT2) {
987      this.month += this.step % CounterConstant.COUNTER_MAX_MONTH;
988      if (this.month > CounterConstant.COUNTER_MAX_MONTH) {
989        this.month -= CounterConstant.COUNTER_MAX_MONTH;
990      }
991      if (!this.hasFocusText2) {
992        this.hasFocusText2 = true;
993      }
994    } else if (this.focusText === FocusText.TEXT3) {
995      this.day += this.step % this.getDayNumber();
996      if (this.day > this.getDayNumber()) {
997        this.day -= this.getDayNumber();
998      }
999      if (!this.hasFocusText3) {
1000        this.hasFocusText3 = true;
1001      }
1002    } else {
1003      this.focusDayWithAdd();
1004    }
1005  }
1006
1007  private focusDayWithAdd() {
1008    this.focusText = FocusText.TEXT3;
1009    this.hasFocusText3 = true;
1010    this.day += this.step % this.getDayNumber();
1011    if (this.day > this.getDayNumber()) {
1012      this.day -= this.getDayNumber();
1013    }
1014    this.focusWithTarget('DateTextInput3' + this.timeStamp.toString());
1015  }
1016
1017  private updateInlineEnableSate() {
1018    if (this.value >= this.max) {
1019      this.addOpacity = CounterResource.COUNTER_BUTTON_DISABLE_OPACITY;
1020      this.addBtnStateEffect = false;
1021      this.addBtnEnabled = false;
1022    } else {
1023      this.addOpacity = CounterResource.COUNTER_BUTTON_INITIAL_OPACITY;
1024      this.addBtnStateEffect = true;
1025      this.addBtnEnabled = true;
1026    }
1027    if (this.value <= this.min) {
1028      this.subOpacity = CounterResource.COUNTER_BUTTON_DISABLE_OPACITY;
1029      this.subBtnStateEffect = false;
1030      this.subBtnEnabled = false;
1031    } else {
1032      this.subOpacity = CounterResource.COUNTER_BUTTON_INITIAL_OPACITY;
1033      this.subBtnStateEffect = true;
1034      this.subBtnEnabled = true;
1035    }
1036  }
1037
1038  private updateDateEnableSate() {
1039    if (this.year === this.maxYear && this.focusText === FocusText.TEXT1) {
1040      this.addOpacity = CounterResource.COUNTER_BUTTON_DISABLE_OPACITY;
1041      this.addBtnStateEffect = false;
1042      this.addBtnEnabled = false;
1043    } else {
1044      if (this.addOpacity === CounterResource.COUNTER_BUTTON_DISABLE_OPACITY) {
1045        this.addOpacity = CounterResource.COUNTER_BUTTON_INITIAL_OPACITY;
1046      }
1047      if (!this.addBtnStateEffect) {
1048        this.addBtnStateEffect = true;
1049      }
1050      if (!this.addBtnEnabled) {
1051        this.addBtnEnabled = true;
1052      }
1053    }
1054    if (this.year === this.minYear && this.focusText === FocusText.TEXT1) {
1055      this.subOpacity = CounterResource.COUNTER_BUTTON_DISABLE_OPACITY;
1056      this.subBtnStateEffect = false;
1057      this.subBtnEnabled = false;
1058    } else {
1059      if (this.subOpacity === CounterResource.COUNTER_BUTTON_DISABLE_OPACITY) {
1060        this.subOpacity = CounterResource.COUNTER_BUTTON_INITIAL_OPACITY;
1061      }
1062      if (!this.subBtnStateEffect) {
1063        this.subBtnStateEffect = true;
1064      }
1065      if (!this.subBtnEnabled) {
1066        this.subBtnEnabled = true;
1067      }
1068    }
1069  }
1070
1071  private updateDay() {
1072    if (this.day > this.getDayNumber()) {
1073      this.day = this.getDayNumber();
1074    }
1075  }
1076
1077  private resetFocusText() {
1078    this.focusText = FocusText.NONE;
1079    this.hasFocusText1 = false;
1080    this.hasFocusText2 = false;
1081    this.hasFocusText3 = false;
1082  }
1083
1084  private resetFocusButton() {
1085    if (this.addBtnFocusWidh === CounterResource.BUTTON_BORDER_FOCUSED_WIDTH) {
1086      this.addBtnFocusWidh = CounterResource.BUTTON_BORDER_BLUR_WIDTH;
1087      this.onBlurIncrease && this.onBlurIncrease();
1088    }
1089    if (this.subBtnFocusWidh === CounterResource.BUTTON_BORDER_FOCUSED_WIDTH) {
1090      this.subBtnFocusWidh = CounterResource.BUTTON_BORDER_BLUR_WIDTH;
1091      this.onBlurDecrease && this.onBlurDecrease();
1092    }
1093  }
1094
1095  private homeFocusText() {
1096    this.focusWithTarget('DateTextInput1' + this.timeStamp.toString());
1097  }
1098
1099  private endFocusText() {
1100    this.focusWithTarget('DateTextInput3' + this.timeStamp.toString());
1101  }
1102
1103  private homeFirstValue() {
1104    this.value = this.min;
1105    if (!this.addBtnStateEffect) {
1106      this.addBtnStateEffect = true;
1107      this.addOpacity = CounterResource.COUNTER_BUTTON_INITIAL_OPACITY;
1108      this.addBtnEnabled = true;
1109    }
1110  }
1111
1112  private endLastValue() {
1113    this.value = this.max;
1114    if (!this.subBtnStateEffect) {
1115      this.subBtnStateEffect = true;
1116      this.subOpacity = CounterResource.COUNTER_BUTTON_INITIAL_OPACITY;
1117      this.subBtnEnabled = true;
1118    }
1119  }
1120
1121  private updateButtonStatus() {
1122    if (this.value <= this.min) {
1123      if (!this.addBtnStateEffect && this.max != this.min) {
1124        this.addBtnStateEffect = true;
1125        this.addOpacity = CounterResource.COUNTER_BUTTON_INITIAL_OPACITY;
1126        this.addBtnEnabled = true;
1127      }
1128      this.subOpacity = CounterResource.COUNTER_BUTTON_DISABLE_OPACITY;
1129      this.subBtnStateEffect = false;
1130      this.subBtnEnabled = false;
1131    }
1132    if (this.value >= this.max) {
1133      if (!this.subBtnStateEffect && this.max != this.min) {
1134        this.subBtnStateEffect = true;
1135        this.subOpacity = CounterResource.COUNTER_BUTTON_INITIAL_OPACITY;
1136        this.subBtnEnabled = true;
1137      }
1138      this.addOpacity = CounterResource.COUNTER_BUTTON_DISABLE_OPACITY;
1139      this.addBtnStateEffect = false;
1140      this.addBtnEnabled = false;
1141    }
1142  }
1143
1144  private getValue() {
1145    if (this.inputValue == undefined) {
1146      this.inputValue = ''
1147    }
1148    return this.hasInputText1 ? this.inputValue : this.value.toString();
1149  }
1150
1151  private getValueLength() {
1152    return this.getValue().length > 0 ? this.getValue().length : 1;
1153  }
1154
1155  private getYear() {
1156    let year: string = this.year.toString();
1157    if (year.length === 1) {
1158      year = '000' + year;
1159    } else if (year.length === 2) {
1160      year = '00' + year;
1161    } else if (year.length === 3) {
1162      year = '0' + year;
1163    } else {
1164      year = year;
1165    }
1166    return year;
1167  }
1168
1169  private focusWithTarget(key: string) {
1170    setTimeout(() => {
1171      let res = focusControl.requestFocus(key);
1172      if (res) {
1173        console.log('Request success');
1174      } else {
1175        console.log('Request failed');
1176      }
1177    });
1178  }
1179
1180  private focusCurrentText(text: FocusText) {
1181    if (text === FocusText.TEXT1) {
1182      if (this.focusText === FocusText.NONE) {
1183        this.focusText = FocusText.TEXT1;
1184      }
1185      if (!this.hasFocusText1) {
1186        this.hasFocusText1 = true;
1187      }
1188    } else if (text === FocusText.TEXT2) {
1189      if (this.focusText === FocusText.NONE) {
1190        this.focusText = FocusText.TEXT2;
1191      }
1192      if (!this.hasFocusText2) {
1193        this.hasFocusText2 = true;
1194      }
1195    } else if (text === FocusText.TEXT3) {
1196      if (this.focusText === FocusText.NONE) {
1197        this.focusText = FocusText.TEXT3;
1198      }
1199      if (!this.hasFocusText3) {
1200        this.hasFocusText3 = true;
1201      }
1202    } else {
1203
1204    }
1205  }
1206
1207  private getMaxLength() {
1208    if (this.max.toString().length > this.min.toString().length) {
1209      return this.max.toString().length + 1;
1210    } else {
1211      return this.min.toString().length + 1;
1212    }
1213  }
1214
1215  private resourceToVp(value: Resource): number {
1216    try {
1217      if ((value as Resource).id !== -1) {
1218        return px2vp(getContext(this).resourceManager.getNumber((value as Resource).id))
1219      } else {
1220        return px2vp(getContext(this)
1221          .resourceManager
1222          .getNumberByName(((value.params as string[])[0]).split('.')[2]))
1223      }
1224    } catch (error) {
1225      return CounterResource.COUNTER_LIST_PADDING
1226    }
1227  }
1228
1229  public getAccessibilityResource(resource: ResourceStr | string | undefined): string {
1230    let accessibilityResource: string = '';
1231    try {
1232      if (typeof resource === 'string') {
1233        accessibilityResource = resource;
1234      } else {
1235        accessibilityResource = getContext()?.resourceManager?.getStringSync(resource?.id);
1236      }
1237    } catch (error) {
1238      let code: number = (error as BusinessError).code;
1239      let message: string = (error as BusinessError).message;
1240      console.log(`Get accessility resource error code:${code} message:${message}`);
1241    }
1242    return accessibilityResource;
1243  }
1244
1245  private getTextDirection() {
1246    if (this.counterDirection === Direction.Auto) {
1247      return i18n.isRTL(i18n.getSystemLanguage()) ? Direction.Rtl : Direction.Ltr;
1248    } else {
1249      return this.counterDirection;
1250    }
1251  }
1252
1253  private getIncreaseStr(): string {
1254    if (this.increaseStrCache === undefined) {
1255      this.increaseStrCache = this.getUIContext().getHostContext()?.resourceManager?.getStringSync(125834852) ?? '';
1256    }
1257    return this.increaseStrCache;
1258  }
1259
1260  private getReduceStr(): string {
1261    if (this.reduceStrCache === undefined) {
1262      this.reduceStrCache = this.getUIContext().getHostContext()?.resourceManager?.getStringSync(125834853) ?? '';
1263    }
1264    return this.reduceStrCache;
1265  }
1266
1267  build() {
1268    if (this.type === CounterType.LIST) {
1269      RelativeContainer() {
1270        Text(this.numberStyleOptions.label)
1271          .direction(this.getTextDirection())
1272          .fontSize(CounterResource.COUNTER_LIST_LABEL_SIZE)
1273          .maxFontScale(CounterResource.COUNTER_LABEL_MAX_FONT_SIZE_SCALE)
1274          .fontColor(CounterResource.COUNTER_TEXT_COLOR)
1275          .margin({
1276            start: LengthMetrics.vp(this.resourceToVp(CounterResource.COUNTER_LIST_LEFT_PADDING))
1277          })
1278          .alignRules({
1279            center: { anchor: '__container__', align: VerticalAlign.Center },
1280            start: { anchor: '__container__', align: HorizontalAlign.Start },
1281            end: { anchor: 'Row1', align: HorizontalAlign.Start }
1282          })
1283          .id('Text')
1284        Row() {
1285          Stack() {
1286            Image(CounterResource.BUTTON_SUB_ICON)
1287              .direction(this.counterDirection)
1288              .width(CounterResource.COUNTER_LIST_BUTTON_ICON_SIZE)
1289              .height(CounterResource.COUNTER_LIST_BUTTON_ICON_SIZE)
1290              .fillColor(CounterResource.BUTTON_ICON_COLOR)
1291              .opacity(this.subOpacity)
1292            Button({ type: ButtonType.Circle, stateEffect: this.subBtnStateEffect })
1293              .accessibilityText($r('sys.string.reduce_used_for_accessibility_text'))
1294              .accessibilityDescription(this.value === this.min ? '' : this.getReduceStr())
1295              .accessibilityFocusDrawLevel(FocusDrawLevel.TOP)
1296              .direction(this.counterDirection)
1297              .width(CounterResource.COUNTER_LIST_BUTTON_SIZE)
1298              .height(CounterResource.COUNTER_LIST_BUTTON_SIZE)
1299              .responseRegion({
1300                x: CounterResource.COUNTER_LIST_BUTTON_HOT_SPOT_X,
1301                y: CounterResource.COUNTER_LIST_BUTTON_HOT_SPOT_Y,
1302                width: '150%',
1303                height: '150%'
1304              })
1305              .groupDefaultFocus(true)
1306              .backgroundColor(CounterResource.BUTTON_BACKGROUD_COLOR)
1307              .opacity(this.subOpacity)
1308              .enabled(this.subBtnEnabled)
1309              .key('ListSubButton' + this.timeStamp.toString())
1310              .onKeyEvent((event: KeyEvent) => {
1311                this.subBtnFocusWidh = CounterResource.BUTTON_BORDER_FOCUSED_WIDTH;
1312                if (event.keyCode === CounterConstant.KEYCODE_ESC) {
1313                  this.resetFocusButton();
1314                  event.stopPropagation();
1315                }
1316                if (event.type === KeyType.Down &&
1317                  event.keyCode === CounterConstant.KEYCODE_MOVE_HOME) {
1318                  event.stopPropagation();
1319                  this.homeFirstValue();
1320                  this.focusWithTarget('ListAddButton' + this.timeStamp.toString());
1321                }
1322                if (event.type === KeyType.Down &&
1323                  event.keyCode === CounterConstant.KEYCODE_MOVE_END) {
1324                  event.stopPropagation();
1325                  if (this.addBtnStateEffect) {
1326                    this.addBtnStateEffect = false;
1327                    this.addOpacity = CounterResource.COUNTER_BUTTON_DISABLE_OPACITY;
1328                    this.addBtnEnabled = false;
1329                  }
1330                  this.endLastValue();
1331                  this.focusWithTarget('ListAddButton' + this.timeStamp.toString());
1332                }
1333              })
1334              .onClick((event: ClickEvent) => {
1335                this.subValue();
1336                this.onChange?.(this.value);
1337                if (event.source === SourceType.Mouse ||
1338                  event.source === SourceType.TouchScreen) {
1339                  this.subBtnFocusWidh = CounterResource.BUTTON_BORDER_BLUR_WIDTH;
1340                }
1341                try {
1342                  let eventInfo: accessibility.EventInfo = ({
1343                    type: 'announceForAccessibility',
1344                    bundleName: (getContext() as common.UIAbilityContext)?.abilityInfo?.bundleName,
1345                    triggerAction: 'click',
1346                    textAnnouncedForAccessibility: this.value?.toString()
1347                  });
1348                  accessibility.sendAccessibilityEvent(eventInfo).then(() => {
1349                    console.log('Accessility subValue click send event');
1350                  })
1351                } catch (exception) {
1352                  let code: number = (exception as BusinessError).code;
1353                  let message: string = (exception as BusinessError).message;
1354                  console.log(`Accessility subValue faild error code:${code} message:${message}`);
1355                }
1356              })
1357              .gesture(
1358                LongPressGesture({ repeat: true })
1359                  .onAction((event: GestureEvent) => {
1360                    if (event.repeat) {
1361                      this.subValue();
1362                      this.onChange?.(this.value);
1363                    }
1364                    this.subBtnFocusWidh = CounterResource.BUTTON_BORDER_BLUR_WIDTH;
1365                  })
1366                  .onActionEnd(() => {
1367                    try {
1368                      let eventInfo: accessibility.EventInfo = ({
1369                        type: 'announceForAccessibility',
1370                        bundleName: (getContext() as common.UIAbilityContext)?.abilityInfo?.bundleName,
1371                        triggerAction: 'common',
1372                        textAnnouncedForAccessibility: this.value?.toString()
1373                      });
1374                      accessibility.sendAccessibilityEvent(eventInfo).then(() => {
1375                        console.log('Accessility subValue longPress send event');
1376                      })
1377                    } catch (exception) {
1378                      let code: number = (exception as BusinessError).code;
1379                      let message: string = (exception as BusinessError).message;
1380                      console.log(`Accessility subValue longPress faild error code:${code} message:${message}`);
1381                    }
1382                  })
1383              )
1384              .hoverEffect(this.choverEffect)
1385              .onHover((isHover: boolean) => {
1386                this.onHoverDecrease && this.onHoverDecrease(isHover);
1387              })
1388              .focusable(this.focusEnable)
1389              .onFocus(() => {
1390                this.subBtnFocusWidh = CounterResource.BUTTON_BORDER_FOCUSED_WIDTH;
1391                this.onFocusDecrease && this.onFocusDecrease();
1392                this.updateButtonStatus();
1393              })
1394              .onBlur(() => {
1395                this.subBtnFocusWidh = CounterResource.BUTTON_BORDER_BLUR_WIDTH;
1396                this.onBlurDecrease && this.onBlurDecrease();
1397              })
1398          }
1399          .direction(this.counterDirection)
1400          .width(CounterResource.COUNTER_LIST_BUTTON_SIZE)
1401          .height(CounterResource.COUNTER_LIST_BUTTON_SIZE)
1402          .borderRadius(CounterResource.COUNTER_LIST_BUTTON_RADIUS)
1403          .borderWidth(this.subBtnFocusWidh)
1404          .borderColor(CounterResource.BUTTON_BORDER_FOCUSED_COLOR)
1405          .clip(true)
1406
1407          if (this.hasTextWidth) {
1408            Text(this.value.toString())
1409              .accessibilityText(this.getAccessibilityResource(this.numberStyleOptions.label) + '[n2]' +
1410              this.value.toString() + '[n0]')
1411              .direction(this.counterDirection)
1412              .width(this.textWidth.toString())
1413              .textAlign(TextAlign.Center)
1414              .fontSize(CounterResource.COUNTER_LIST_NUMBER_SIZE)
1415              .maxFontScale(CounterResource.COUNTER_NUMBER_MAX_FONT_SIZE_SCALE)
1416              .fontColor(CounterResource.COUNTER_TEXT_COLOR)
1417              .margin({
1418                start: LengthMetrics.vp(CounterResource.COUNTER_LIST_BUTTON_TEXT_MARGIN),
1419                end: LengthMetrics.vp(CounterResource.COUNTER_LIST_BUTTON_TEXT_MARGIN)
1420              })
1421          } else {
1422            Text(this.value.toString())
1423              .accessibilityText(this.getAccessibilityResource(this.numberStyleOptions.label) + '[n2]' +
1424              this.value.toString() + '[n0]')
1425              .direction(this.counterDirection)
1426              .textAlign(TextAlign.Center)
1427              .fontSize(CounterResource.COUNTER_LIST_NUMBER_SIZE)
1428              .maxFontScale(CounterResource.COUNTER_NUMBER_MAX_FONT_SIZE_SCALE)
1429              .fontColor(CounterResource.COUNTER_TEXT_COLOR)
1430              .margin({
1431                start: LengthMetrics.vp(CounterResource.COUNTER_LIST_BUTTON_TEXT_MARGIN),
1432                end: LengthMetrics.vp(CounterResource.COUNTER_LIST_BUTTON_TEXT_MARGIN)
1433              })
1434          }
1435
1436          Stack() {
1437            Image(CounterResource.BUTTON_ADD_ICON)
1438              .direction(this.counterDirection)
1439              .width(CounterResource.COUNTER_LIST_BUTTON_ICON_SIZE)
1440              .height(CounterResource.COUNTER_LIST_BUTTON_ICON_SIZE)
1441              .fillColor(CounterResource.BUTTON_ICON_COLOR)
1442              .opacity(this.addOpacity)
1443            Button({ type: ButtonType.Circle, stateEffect: this.addBtnStateEffect })
1444              .accessibilityText($r('sys.string.increase_used_for_accessibility_text'))
1445              .accessibilityDescription(this.value === this.max ? '' : this.getIncreaseStr())
1446              .accessibilityFocusDrawLevel(FocusDrawLevel.TOP)
1447              .direction(this.counterDirection)
1448              .width(CounterResource.COUNTER_LIST_BUTTON_SIZE)
1449              .height(CounterResource.COUNTER_LIST_BUTTON_SIZE)
1450              .responseRegion({
1451                x: CounterResource.COUNTER_LIST_BUTTON_HOT_SPOT_X,
1452                y: CounterResource.COUNTER_LIST_BUTTON_HOT_SPOT_Y,
1453                width: '150%',
1454                height: '150%'
1455              })
1456              .backgroundColor(CounterResource.BUTTON_BACKGROUD_COLOR)
1457              .opacity(this.addOpacity)
1458              .enabled(this.addBtnEnabled)
1459              .key('ListAddButton' + this.timeStamp.toString())
1460              .onKeyEvent((event: KeyEvent) => {
1461                this.addBtnFocusWidh = CounterResource.BUTTON_BORDER_FOCUSED_WIDTH
1462                if (event.keyCode === CounterConstant.KEYCODE_ESC) {
1463                  this.resetFocusButton();
1464                  event.stopPropagation();
1465                }
1466                if (event.type === KeyType.Down &&
1467                  event.keyCode === CounterConstant.KEYCODE_MOVE_HOME) {
1468                  event.stopPropagation();
1469                  this.homeFirstValue();
1470                  if (this.subBtnStateEffect) {
1471                    this.subBtnStateEffect = false;
1472                    this.subOpacity = CounterResource.COUNTER_BUTTON_DISABLE_OPACITY;
1473                    this.subBtnEnabled = false;
1474                  }
1475                  this.focusWithTarget('ListAddButton' + this.timeStamp.toString());
1476                }
1477                if (event.type === KeyType.Down &&
1478                  event.keyCode === CounterConstant.KEYCODE_MOVE_END) {
1479                  event.stopPropagation();
1480                  this.endLastValue();
1481                  this.focusWithTarget('ListSubButton' + this.timeStamp.toString());
1482                }
1483              })
1484              .onClick((event: ClickEvent) => {
1485                this.addValue();
1486                this.onChange?.(this.value);
1487                if (event.source === SourceType.Mouse ||
1488                  event.source === SourceType.TouchScreen) {
1489                  this.addBtnFocusWidh = CounterResource.BUTTON_BORDER_BLUR_WIDTH;
1490                }
1491                try {
1492                  let eventInfo: accessibility.EventInfo = ({
1493                    type: 'announceForAccessibility',
1494                    bundleName: (getContext() as common.UIAbilityContext)?.abilityInfo?.bundleName,
1495                    triggerAction: 'click',
1496                    textAnnouncedForAccessibility: this.value?.toString()
1497                  });
1498                  accessibility.sendAccessibilityEvent(eventInfo).then(() => {
1499                    console.log('Accessility addValue click send event');
1500                  })
1501                } catch (exception) {
1502                  let code: number = (exception as BusinessError).code;
1503                  let message: string = (exception as BusinessError).message;
1504                  console.log(`Accessility addValue click longPress faild error code:${code} message:${message}`);
1505                }
1506              })
1507              .gesture(
1508                LongPressGesture({ repeat: true })
1509                  .onAction((event: GestureEvent) => {
1510                    if (event.repeat) {
1511                      this.addValue();
1512                      this.onChange?.(this.value);
1513                    }
1514                    this.addBtnFocusWidh = CounterResource.BUTTON_BORDER_BLUR_WIDTH;
1515                  })
1516                  .onActionEnd(() => {
1517                    try {
1518                      let eventInfo: accessibility.EventInfo = ({
1519                        type: 'announceForAccessibility',
1520                        bundleName: (getContext() as common.UIAbilityContext)?.abilityInfo?.bundleName,
1521                        triggerAction: 'common',
1522                        textAnnouncedForAccessibility: this.value?.toString()
1523                      });
1524                      accessibility.sendAccessibilityEvent(eventInfo).then(() => {
1525                        console.log('Accessility addValue longPress send event');
1526                      })
1527                    } catch (exception) {
1528                      let code: number = (exception as BusinessError).code;
1529                      let message: string = (exception as BusinessError).message;
1530                      console.log(`Accessility addValue longPress longPress faild error code:${code} message:${message}`);
1531                    }
1532                  })
1533              )
1534              .hoverEffect(this.choverEffect)
1535              .onHover((isHover: boolean) => {
1536                this.onHoverIncrease && this.onHoverIncrease(isHover);
1537              })
1538              .focusable(this.focusEnable)
1539              .onFocus(() => {
1540                this.addBtnFocusWidh = CounterResource.BUTTON_BORDER_FOCUSED_WIDTH;
1541                this.onFocusIncrease && this.onFocusIncrease();
1542                this.updateButtonStatus();
1543              })
1544              .onBlur(() => {
1545                this.addBtnFocusWidh = CounterResource.BUTTON_BORDER_BLUR_WIDTH;
1546                this.onBlurIncrease && this.onBlurIncrease();
1547              })
1548          }
1549          .direction(this.counterDirection)
1550          .width(CounterResource.COUNTER_LIST_BUTTON_SIZE)
1551          .height(CounterResource.COUNTER_LIST_BUTTON_SIZE)
1552          .borderRadius(CounterResource.COUNTER_LIST_BUTTON_RADIUS)
1553          .borderWidth(this.addBtnFocusWidh)
1554          .borderColor(CounterResource.BUTTON_BORDER_FOCUSED_COLOR)
1555          .clip(true)
1556        }
1557        .direction(this.counterDirection)
1558        .height(CounterResource.COUNTER_LIST_BUTTON_SIZE)
1559        .margin({
1560          end: LengthMetrics.vp(this.resourceToVp(CounterResource.COUNTER_LIST_RIGHT_PADDING))
1561        })
1562        .alignRules({
1563          center: { anchor: '__container__', align: VerticalAlign.Center },
1564          end: { anchor: '__container__', align: HorizontalAlign.End }
1565        })
1566        .tabIndex(0)
1567        .id('Row1')
1568      }
1569      .direction(this.counterDirection)
1570      .width('100%')
1571      .height(CounterResource.COUNTER_LIST_HEIGHT)
1572    } else if (this.type === CounterType.COMPACT) {
1573      Column() {
1574        Row() {
1575          Stack() {
1576            Image(CounterResource.BUTTON_SUB_ICON)
1577              .direction(this.counterDirection)
1578              .width(CounterResource.COUNTER_COMPACT_BUTTON_ICON_SIZE)
1579              .height(CounterResource.COUNTER_COMPACT_BUTTON_ICON_SIZE)
1580              .fillColor(CounterResource.BUTTON_ICON_COLOR)
1581              .opacity(this.subOpacity)
1582            Button({ type: ButtonType.Circle, stateEffect: this.subBtnStateEffect })
1583              .accessibilityText($r('sys.string.reduce_used_for_accessibility_text'))
1584              .accessibilityDescription(this.value === this.min ? '' : this.getReduceStr())
1585              .accessibilityFocusDrawLevel(FocusDrawLevel.TOP)
1586              .direction(this.counterDirection)
1587              .width(CounterResource.COUNTER_COMPACT_BUTTON_SIZE)
1588              .height(CounterResource.COUNTER_COMPACT_BUTTON_SIZE)
1589              .backgroundColor(CounterResource.BUTTON_BACKGROUD_COLOR)
1590              .opacity(this.subOpacity)
1591              .enabled(this.subBtnEnabled)
1592              .key('CompactSubButton' + this.timeStamp.toString())
1593              .onKeyEvent((event: KeyEvent) => {
1594                this.subBtnFocusWidh = CounterResource.BUTTON_BORDER_FOCUSED_WIDTH
1595                if (event.keyCode === CounterConstant.KEYCODE_ESC) {
1596                  this.resetFocusButton();
1597                  event.stopPropagation();
1598                }
1599                if (event.type === KeyType.Down &&
1600                  event.keyCode === CounterConstant.KEYCODE_MOVE_HOME) {
1601                  event.stopPropagation();
1602                  this.homeFirstValue();
1603                  this.focusWithTarget('CompactAddButton' + this.timeStamp.toString());
1604                }
1605                if (event.type === KeyType.Down &&
1606                  event.keyCode === CounterConstant.KEYCODE_MOVE_END) {
1607                  event.stopPropagation();
1608                  this.endLastValue();
1609                  if (this.addBtnStateEffect) {
1610                    this.addBtnStateEffect = false;
1611                    this.addOpacity = CounterResource.COUNTER_BUTTON_DISABLE_OPACITY;
1612                    this.addBtnEnabled = false;
1613                  }
1614                  this.focusWithTarget('CompactSubButton' + this.timeStamp.toString());
1615                }
1616              })
1617              .onClick((event: ClickEvent) => {
1618                this.subValue();
1619                this.onChange?.(this.value);
1620                if (event.source === SourceType.Mouse ||
1621                  event.source === SourceType.TouchScreen) {
1622                  this.subBtnFocusWidh = CounterResource.BUTTON_BORDER_BLUR_WIDTH;
1623                }
1624                try {
1625                  let eventInfo: accessibility.EventInfo = ({
1626                    type: 'announceForAccessibility',
1627                    bundleName: (getContext() as common.UIAbilityContext)?.abilityInfo?.bundleName,
1628                    triggerAction: 'click',
1629                    textAnnouncedForAccessibility: this.value?.toString()
1630                  });
1631                  accessibility.sendAccessibilityEvent(eventInfo).then(() => {
1632                    console.log('Accessility subValue click send event');
1633                  })
1634                } catch (exception) {
1635                  let code: number = (exception as BusinessError).code;
1636                  let message: string = (exception as BusinessError).message;
1637                  console.log(`Accessility subValue click longPress faild error code:${code} message:${message}`);
1638                }
1639              })
1640              .gesture(
1641                LongPressGesture({ repeat: true })
1642                  .onAction((event: GestureEvent) => {
1643                    if (event.repeat) {
1644                      this.subValue();
1645                      this.onChange?.(this.value);
1646                    }
1647                    if (event.source === SourceType.Mouse ||
1648                      event.source === SourceType.TouchScreen) {
1649                      this.subBtnFocusWidh = CounterResource.BUTTON_BORDER_BLUR_WIDTH;
1650                    }
1651                  })
1652                  .onActionEnd(() => {
1653                    try {
1654                      let eventInfo: accessibility.EventInfo = ({
1655                        type: 'announceForAccessibility',
1656                        bundleName: (getContext() as common.UIAbilityContext)?.abilityInfo?.bundleName,
1657                        triggerAction: 'common',
1658                        textAnnouncedForAccessibility: this.value?.toString()
1659                      });
1660                      accessibility.sendAccessibilityEvent(eventInfo).then(() => {
1661                        console.log('Accessility subValue longPress send event');
1662                      })
1663                    } catch (exception) {
1664                      let code: number = (exception as BusinessError).code;
1665                      let message: string = (exception as BusinessError).message;
1666                      console.log(`Accessility subValue longPress longPress faild error code:${code} message:${message}`);
1667                    }
1668                  })
1669              )
1670              .hoverEffect(this.choverEffect)
1671              .onHover((isHover: boolean) => {
1672                this.onHoverDecrease && this.onHoverDecrease(isHover);
1673              })
1674              .focusable(this.focusEnable)
1675              .groupDefaultFocus(true)
1676              .onFocus(() => {
1677                this.subBtnFocusWidh = CounterResource.BUTTON_BORDER_FOCUSED_WIDTH;
1678                this.onFocusDecrease && this.onFocusDecrease();
1679                this.updateButtonStatus();
1680              })
1681              .onBlur(() => {
1682                this.subBtnFocusWidh = CounterResource.BUTTON_BORDER_BLUR_WIDTH;
1683                this.onBlurDecrease && this.onBlurDecrease();
1684              })
1685          }
1686          .width(CounterResource.COUNTER_COMPACT_BUTTON_SIZE)
1687          .height(CounterResource.COUNTER_COMPACT_BUTTON_SIZE)
1688          .borderRadius(CounterResource.COUNTER_COMPACT_BUTTON_RADIUS)
1689          .borderWidth(this.subBtnFocusWidh)
1690          .borderColor(CounterResource.BUTTON_BORDER_FOCUSED_COLOR)
1691          .margin({
1692            start: LengthMetrics.vp(this.resourceToVp(CounterResource.COUNTER_COMPACT_BUTTON_CONTAINER_MARGIN))
1693          })
1694          .clip(true)
1695
1696          if (this.hasTextWidth) {
1697            Text(this.value.toString())
1698              .accessibilityText(this.getAccessibilityResource(this.numberStyleOptions.label) + '[n2]' +
1699              this.value.toString() + '[n0]')
1700              .textAlign(TextAlign.Center)
1701              .fontSize(CounterResource.COUNTER_NUMBER_SIZE)
1702              .maxFontScale(CounterResource.COUNTER_NUMBER_MAX_FONT_SIZE_SCALE)
1703              .fontColor(CounterResource.COUNTER_TEXT_COLOR)
1704              .width(this.textWidth.toString())
1705              .margin({
1706                start: LengthMetrics.vp(CounterResource.COUNTER_COMPACT_BUTTON_TEXT_MARGIN),
1707                end: LengthMetrics.vp(CounterResource.COUNTER_COMPACT_BUTTON_TEXT_MARGIN)
1708              })
1709          } else {
1710            Text(this.value.toString())
1711              .accessibilityText(this.getAccessibilityResource(this.numberStyleOptions.label) + '[n2]' +
1712              this.value.toString() + '[n0]')
1713              .direction(this.counterDirection)
1714              .textAlign(TextAlign.Center)
1715              .fontSize(CounterResource.COUNTER_NUMBER_SIZE)
1716              .maxFontScale(CounterResource.COUNTER_NUMBER_MAX_FONT_SIZE_SCALE)
1717              .fontColor(CounterResource.COUNTER_TEXT_COLOR)
1718              .margin({
1719                start: LengthMetrics.vp(CounterResource.COUNTER_COMPACT_BUTTON_TEXT_MARGIN),
1720                end: LengthMetrics.vp(CounterResource.COUNTER_COMPACT_BUTTON_TEXT_MARGIN)
1721              })
1722          }
1723
1724          Stack() {
1725            Image(CounterResource.BUTTON_ADD_ICON)
1726              .direction(this.counterDirection)
1727              .width(CounterResource.COUNTER_COMPACT_BUTTON_ICON_SIZE)
1728              .height(CounterResource.COUNTER_COMPACT_BUTTON_ICON_SIZE)
1729              .fillColor(CounterResource.BUTTON_ICON_COLOR)
1730              .opacity(this.addOpacity)
1731            Button({ type: ButtonType.Circle, stateEffect: this.addBtnStateEffect })
1732              .accessibilityText($r('sys.string.increase_used_for_accessibility_text'))
1733              .accessibilityDescription(this.value === this.max ? '' : this.getIncreaseStr())
1734              .accessibilityFocusDrawLevel(FocusDrawLevel.TOP)
1735              .direction(this.counterDirection)
1736              .width(CounterResource.COUNTER_COMPACT_BUTTON_SIZE)
1737              .height(CounterResource.COUNTER_COMPACT_BUTTON_SIZE)
1738              .backgroundColor(CounterResource.BUTTON_BACKGROUD_COLOR)
1739              .opacity(this.addOpacity)
1740              .enabled(this.addBtnEnabled)
1741              .key('CompactAddButton' + this.timeStamp.toString())
1742              .onKeyEvent((event: KeyEvent) => {
1743                this.addBtnFocusWidh = CounterResource.BUTTON_BORDER_FOCUSED_WIDTH
1744                if (event.keyCode === CounterConstant.KEYCODE_ESC) {
1745                  this.resetFocusButton();
1746                  event.stopPropagation();
1747                }
1748                if (event.type === KeyType.Down &&
1749                  event.keyCode === CounterConstant.KEYCODE_MOVE_HOME) {
1750                  event.stopPropagation();
1751                  this.homeFirstValue();
1752                  if (this.subBtnStateEffect) {
1753                    this.subBtnStateEffect = false;
1754                    this.subOpacity = CounterResource.COUNTER_BUTTON_DISABLE_OPACITY;
1755                    this.subBtnEnabled = false;
1756                  }
1757                  this.focusWithTarget('CompactAddButton' + this.timeStamp.toString());
1758                }
1759                if (event.type === KeyType.Down &&
1760                  event.keyCode === CounterConstant.KEYCODE_MOVE_END) {
1761                  event.stopPropagation();
1762                  this.endLastValue();
1763                  this.focusWithTarget('CompactSubButton' + this.timeStamp.toString());
1764                }
1765              })
1766              .onClick((event: ClickEvent) => {
1767                this.addValue();
1768                this.onChange?.(this.value);
1769                if (event.source === SourceType.Mouse ||
1770                  event.source === SourceType.TouchScreen) {
1771                  this.addBtnFocusWidh = CounterResource.BUTTON_BORDER_BLUR_WIDTH;
1772                }
1773                try {
1774                  let eventInfo: accessibility.EventInfo = ({
1775                    type: 'announceForAccessibility',
1776                    bundleName: (getContext() as common.UIAbilityContext)?.abilityInfo?.bundleName,
1777                    triggerAction: 'click',
1778                    textAnnouncedForAccessibility: this.value?.toString()
1779                  });
1780                  accessibility.sendAccessibilityEvent(eventInfo).then(() => {
1781                    console.log('Accessility addValue click send event');
1782                  })
1783                } catch (exception) {
1784                  let code: number = (exception as BusinessError).code;
1785                  let message: string = (exception as BusinessError).message;
1786                  console.log(`Accessility addValue click longPress faild error code:${code} message:${message}`);
1787                }
1788              })
1789              .gesture(
1790                LongPressGesture({ repeat: true })
1791                  .onAction((event: GestureEvent) => {
1792                    if (event.repeat) {
1793                      this.addValue();
1794                      this.onChange?.(this.value);
1795                    }
1796                    if (event.source === SourceType.Mouse ||
1797                      event.source === SourceType.TouchScreen) {
1798                      this.addBtnFocusWidh = CounterResource.BUTTON_BORDER_BLUR_WIDTH;
1799                    }
1800                  })
1801                  .onActionEnd(() => {
1802                    try {
1803                      let eventInfo: accessibility.EventInfo = ({
1804                        type: 'announceForAccessibility',
1805                        bundleName: (getContext() as common.UIAbilityContext)?.abilityInfo?.bundleName,
1806                        triggerAction: 'common',
1807                        textAnnouncedForAccessibility: this.value?.toString()
1808                      });
1809                      accessibility.sendAccessibilityEvent(eventInfo).then(() => {
1810                        console.log('Accessility addValue longPress send event');
1811                      })
1812                    } catch (exception) {
1813                      let code: number = (exception as BusinessError).code;
1814                      let message: string = (exception as BusinessError).message;
1815                      console.log(`Accessility addValue longPress longPress faild error code:${code} message:${message}`);
1816                    }
1817                  })
1818              )
1819              .hoverEffect(this.choverEffect)
1820              .onHover((isHover: boolean) => {
1821                this.onHoverIncrease && this.onHoverIncrease(isHover);
1822              })
1823              .focusable(this.focusEnable)
1824              .onFocus(() => {
1825                this.addBtnFocusWidh = CounterResource.BUTTON_BORDER_FOCUSED_WIDTH;
1826                this.onFocusIncrease && this.onFocusIncrease();
1827                this.updateButtonStatus();
1828              })
1829              .onBlur(() => {
1830                this.addBtnFocusWidh = CounterResource.BUTTON_BORDER_BLUR_WIDTH;
1831                this.onBlurIncrease && this.onBlurIncrease();
1832              })
1833          }
1834          .direction(this.counterDirection)
1835          .width(CounterResource.COUNTER_COMPACT_BUTTON_SIZE)
1836          .height(CounterResource.COUNTER_COMPACT_BUTTON_SIZE)
1837          .borderRadius(CounterResource.COUNTER_COMPACT_BUTTON_RADIUS)
1838          .borderWidth(this.addBtnFocusWidh)
1839          .borderColor(CounterResource.BUTTON_BORDER_FOCUSED_COLOR)
1840          .margin({
1841            end: LengthMetrics.vp(this.resourceToVp(CounterResource.COUNTER_COMPACT_BUTTON_CONTAINER_MARGIN))
1842          })
1843          .clip(true)
1844        }
1845        .direction(this.counterDirection)
1846        .tabIndex(0)
1847        .height(CounterResource.COUNTER_COMPACT_CONTAINER_HEIGHT)
1848        .align(Alignment.Center)
1849        .borderWidth(CounterResource.COUNTER_BORDER_WIDTH)
1850        .borderColor(CounterResource.COUNTER_BORDER_COLOR)
1851        .borderRadius(CounterResource.COUNTER_COMPACT_CONTAINER_RADIUS)
1852
1853        Text(this.numberStyleOptions.label)
1854          .direction(this.counterDirection)
1855          .margin({ top: CounterResource.COUNTER_COMPACT_CONTAINER_LABEL_DISTANCE })
1856          .fontSize(CounterResource.COUNTER_COMPACT_LABEL_SIZE)
1857          .maxFontScale(CounterResource.COUNTER_LABEL_MAX_FONT_SIZE_SCALE)
1858          .fontColor(CounterResource.COUNTER_TEXT_COLOR)
1859          .align(Alignment.Top)
1860      }
1861    } else if (this.type === CounterType.INLINE) {
1862      Row() {
1863        if (this.hasTextWidth) {
1864          RelativeContainer() {
1865            TextInput({
1866              text: this.hasInputText1 ? this.inputValue : this.value.toString(),
1867              controller: this.controller1
1868            })
1869              .accessibilityDescription($r('sys.string.input_counter_double_click_description'))
1870              .alignRules({
1871                center: { anchor: '__container__', align: VerticalAlign.Center },
1872                middle: { anchor: '__container__', align: HorizontalAlign.Center }
1873              })
1874              .width(Math.min(this.getValueLength() * 9.6, this.textWidth))
1875              .height('20vp')
1876              .padding(0)
1877              .borderRadius(0)
1878              .textAlign(TextAlign.Center)
1879              .type(InputType.PhoneNumber)
1880              .copyOption(CopyOptions.None)
1881              .fontSize(this.getTextInputFontSize())
1882              .fontWeight(FontWeight.Medium)
1883              .fontColor(this.hasFocusText1 ? Color.White : CounterResource.COUNTER_TEXT_COLOR)
1884              .maxLength(this.getMaxLength())
1885              .backgroundColor(this.hasFocusText1 ? CounterResource.BUTTON_BORDER_FOCUSED_COLOR : Color.Transparent)
1886              .key('InlineTextInput' + this.timeStamp.toString())
1887              .onKeyEvent((event: KeyEvent) => {
1888                this.focusCurrentText(FocusText.TEXT1)
1889                if (event.keyCode === CounterConstant.KEYCODE_ESC) {
1890                  this.resetFocusText();
1891                  event.stopPropagation();
1892                }
1893                if (event.type === KeyType.Down &&
1894                  event.keyCode === CounterConstant.KEYCODE_DPAD_UP) {
1895                  this.addValue();
1896                  event.stopPropagation();
1897                }
1898                if (event.type === KeyType.Down &&
1899                  event.keyCode === CounterConstant.KEYCODE_MOVE_HOME) {
1900                  event.stopPropagation();
1901                  this.focusWithTarget('InlineTextInput' + this.timeStamp.toString());
1902                }
1903                if (event.type === KeyType.Down &&
1904                  event.keyCode === CounterConstant.KEYCODE_MOVE_END) {
1905                  event.stopPropagation();
1906                  this.focusWithTarget('InlineTextInput' + this.timeStamp.toString());
1907                }
1908                if (event.type === KeyType.Down &&
1909                  event.keyCode === CounterConstant.KEYCODE_DPAD_DOWN) {
1910                  this.subValue();
1911                  event.stopPropagation();
1912                }
1913                if (event.type === KeyType.Down &&
1914                  event.keyCode === CounterConstant.KEYCODE_DPAD_LEFT) {
1915                  this.focusWithTarget('InlineTextInput' + this.timeStamp.toString());
1916                  event.stopPropagation();
1917                }
1918                if (event.type === KeyType.Down &&
1919                  event.keyCode === CounterConstant.KEYCODE_DPAD_RIGHT) {
1920                  this.focusWithTarget('InlineTextInput' + this.timeStamp.toString());
1921                  event.stopPropagation();
1922                }
1923              })
1924              .onChange((value: string) => {
1925                this.inputValue = value;
1926                for (let i = 0; i < value.length; i++) {
1927                  let c = value[i];
1928                  if (c === '+' || c === '*' || c === '#') {
1929                    this.value -= 1;
1930                    this.value += 1;
1931                    this.inputValue = this.value.toString();
1932                    return;
1933                  }
1934                  if (c === '-' && i !== 0) {
1935                    this.inputValue = c;
1936                    break;
1937                  }
1938                }
1939
1940                this.hasInputText1 = true;
1941                let c = value[value.length - 1];
1942                if (value.length === this.getMaxLength()) {
1943                  this.inputValue = c;
1944                }
1945                if (this.timeoutID1 !== -1) {
1946                  clearTimeout(this.timeoutID1);
1947                  this.timeoutID1 = -1;
1948                }
1949                if (this.inputValue !== '' && Number(this.inputValue) <= this.max &&
1950                  Number(this.inputValue) >= this.min) {
1951                  this.value = Number(this.inputValue);
1952                  this.onChange?.(this.value);
1953                  this.hasInputText1 = false;
1954                } else {
1955                  if (Number(this.inputValue) > this.max ||
1956                    (Number(this.inputValue) < this.min &&
1957                      this.inputValue.length <= this.min.toString().length)) {
1958                    this.inputValue = c;
1959                  }
1960                  if (value.length < this.getMaxLength()) {
1961                    this.timeoutID1 = setTimeout(() => {
1962                      if (this.inputValue !== '' && Number(this.inputValue) <= this.max &&
1963                        Number(this.inputValue) >= this.min) {
1964                        this.value = Number(this.inputValue);
1965                        this.onChange?.(this.value);
1966                      }
1967                      this.inputValue = this.value.toString();
1968                      this.hasInputText1 = false;
1969                      this.updateInlineEnableSate();
1970                    }, 1500);
1971                  }
1972                }
1973                this.updateInlineEnableSate();
1974              })
1975              .onSubmit((enterKey: EnterKeyType) => {
1976                if (this.timeoutID1 != -1) {
1977                  clearTimeout(this.timeoutID1);
1978                  this.timeoutID1 = -1;
1979                }
1980                this.hasInputText1 = false;
1981                this.value -= 1;
1982                if (Number(this.inputValue) >= this.min && Number(this.inputValue) <= this.max) {
1983                  this.value = Number(this.inputValue);
1984                  this.onChange?.(this.value);
1985                  this.updateInlineEnableSate();
1986                } else {
1987                  this.value += 1;
1988                  this.inputValue = this.value.toString();
1989                }
1990              })
1991              .focusable(true)
1992              .focusOnTouch(true)
1993              .onFocus(() => {
1994                this.focusText = FocusText.TEXT1;
1995                this.hasFocusText1 = true;
1996                this.controller1.caretPosition(this.value.toString().length);
1997              })
1998              .onBlur(() => {
1999                this.focusText = FocusText.NONE;
2000                this.hasFocusText1 = false;
2001              })
2002              .onClick((event: ClickEvent) => {
2003                this.focusText = FocusText.TEXT1;
2004                this.hasFocusText1 = true;
2005                this.focusWithTarget('InlineTextInput' + this.timeStamp.toString());
2006                this.controller1.caretPosition(this.value.toString().length);
2007              })
2008          }
2009          .direction(this.counterDirection)
2010          .margin({
2011            start: LengthMetrics.vp(CounterResource.COUNTER_INLINE_INPUT_TEXT_MARGIN),
2012            end: LengthMetrics.vp(CounterResource.COUNTER_INLINE_INPUT_TEXT_MARGIN)
2013          })
2014          .height('100%')
2015          .width(this.textWidth)
2016        } else {
2017          Row() {
2018            TextInput({
2019              text: this.hasInputText1 ? this.inputValue : this.value.toString(),
2020              controller: this.controller1
2021            })
2022              .accessibilityDescription($r('sys.string.input_counter_double_click_description'))
2023              .direction(this.counterDirection)
2024              .width(this.getValueLength() * 9.6)
2025              .height('20vp')
2026              .padding(0)
2027              .borderRadius(0)
2028              .textAlign(TextAlign.Center)
2029              .type(InputType.PhoneNumber)
2030              .copyOption(CopyOptions.None)
2031              .fontSize(this.getTextInputFontSize())
2032              .fontWeight(FontWeight.Medium)
2033              .fontColor(this.hasFocusText1 ? Color.White : CounterResource.COUNTER_TEXT_COLOR)
2034              .maxLength(this.getMaxLength())
2035              .backgroundColor(this.hasFocusText1 ? CounterResource.BUTTON_BORDER_FOCUSED_COLOR : Color.Transparent)
2036              .key('InlineTextInput' + this.timeStamp.toString())
2037              .onKeyEvent((event: KeyEvent) => {
2038                this.focusCurrentText(FocusText.TEXT1)
2039                if (event.keyCode === CounterConstant.KEYCODE_ESC) {
2040                  this.resetFocusText();
2041                  event.stopPropagation();
2042                }
2043                if (event.type === KeyType.Down &&
2044                  event.keyCode === CounterConstant.KEYCODE_DPAD_UP) {
2045                  this.addValue();
2046                  event.stopPropagation();
2047                }
2048                if (event.type === KeyType.Down &&
2049                  event.keyCode === CounterConstant.KEYCODE_DPAD_DOWN) {
2050                  this.subValue();
2051                  event.stopPropagation();
2052                }
2053                if (event.type === KeyType.Down &&
2054                  event.keyCode === CounterConstant.KEYCODE_DPAD_LEFT) {
2055                  this.focusWithTarget('InlineTextInput' + this.timeStamp.toString());
2056                  event.stopPropagation();
2057                }
2058                if (event.type === KeyType.Down &&
2059                  event.keyCode === CounterConstant.KEYCODE_DPAD_RIGHT) {
2060                  this.focusWithTarget('InlineTextInput' + this.timeStamp.toString());
2061                  event.stopPropagation();
2062                }
2063              })
2064              .onChange((value: string) => {
2065                this.inputValue = value;
2066                for (let i = 0; i < value.length; i++) {
2067                  let c = value[i];
2068                  if (c === '+' || c === '*' || c === '#') {
2069                    this.value -= 1;
2070                    this.value += 1;
2071                    this.inputValue = this.value.toString();
2072                    return;
2073                  }
2074                  if (c === '-' && i !== 0) {
2075                    this.inputValue = c;
2076                    break;
2077                  }
2078                }
2079
2080                this.hasInputText1 = true;
2081                let c = value[value.length -1];
2082                if (value.length === this.getMaxLength()) {
2083                  this.inputValue = c;
2084                }
2085                if (this.timeoutID1 !== -1) {
2086                  clearTimeout(this.timeoutID1);
2087                  this.timeoutID1 = -1;
2088                }
2089                if (this.inputValue !== '' && Number(this.inputValue) <= this.max &&
2090                  Number(this.inputValue) >= this.min) {
2091                  this.value = Number(this.inputValue);
2092                  this.onChange?.(this.value);
2093                  this.hasInputText1 = false;
2094                } else {
2095                  if (Number(this.inputValue) > this.max ||
2096                    (Number(this.inputValue) < this.min &&
2097                      this.inputValue.length <= this.min.toString().length)) {
2098                    this.inputValue = c;
2099                  }
2100                  if (value.length < this.getMaxLength()) {
2101                    this.timeoutID1 = setTimeout(() => {
2102                      if (this.inputValue !== '' && Number(this.inputValue) <= this.max &&
2103                        Number(this.inputValue) >= this.min) {
2104                        this.value = Number(this.inputValue);
2105                        this.onChange?.(this.value);
2106                      }
2107                      this.inputValue = this.value.toString()
2108                      this.hasInputText1 = false;
2109                      this.updateInlineEnableSate();
2110                    }, 1500);
2111                  }
2112                }
2113                this.updateInlineEnableSate();
2114              })
2115              .onSubmit((enterKey: EnterKeyType) => {
2116                if (this.timeoutID1 !== -1) {
2117                  clearTimeout(this.timeoutID1);
2118                  this.timeoutID1 = -1;
2119                }
2120                this.hasInputText1 = false;
2121                this.value -= 1;
2122                if (Number(this.inputValue) >= this.min && Number(this.inputValue) <= this.max) {
2123                  this.value = Number(this.inputValue);
2124                  this.onChange?.(this.value);
2125                  this.updateInlineEnableSate();
2126                } else {
2127                  this.value += 1;
2128                  this.inputValue = this.value.toString();
2129                }
2130              })
2131              .focusable(true)
2132              .focusOnTouch(true)
2133              .onFocus(() => {
2134                this.focusText = FocusText.TEXT1;
2135                this.hasFocusText1 = true;
2136                this.controller1.caretPosition(this.value.toString().length);
2137              })
2138              .onBlur(() => {
2139                this.focusText = FocusText.NONE;
2140                this.hasFocusText1 = false;
2141              })
2142              .onClick((event: ClickEvent) => {
2143                this.focusText = FocusText.TEXT1;
2144                this.hasFocusText1 = true;
2145                this.focusWithTarget('InlineTextInput' + this.timeStamp.toString());
2146                this.controller1.caretPosition(this.value.toString().length);
2147              })
2148          }
2149          .direction(this.counterDirection)
2150          .margin({
2151            start: LengthMetrics.vp(CounterResource.COUNTER_INLINE_INPUT_TEXT_MARGIN),
2152            end: LengthMetrics.vp(CounterResource.COUNTER_INLINE_INPUT_TEXT_MARGIN)
2153          })
2154        }
2155
2156        Column() {
2157          Stack() {
2158            Rect()
2159              .direction(this.counterDirection)
2160              .width(CounterResource.COUNTER_INLINE_FOCUS_BORDER_WIDTH)
2161              .height(CounterResource.COUNTER_INLINE_FOCUS_BORDER_HEIGHT)
2162              .radius([
2163                ['0vp', '0vp'],
2164                [CounterResource.COUNTER_INLINE_RADIUS, CounterResource.COUNTER_INLINE_RADIUS],
2165                ['0vp', '0vp'],
2166                ['0vp', '0vp']])
2167              .strokeWidth(this.addBtnFocusWidh)
2168              .stroke(CounterResource.BUTTON_BORDER_FOCUSED_COLOR)
2169              .margin({ end: LengthMetrics.vp(2) })
2170              .fillOpacity(0)
2171            Image(CounterResource.BUTTON_ARROW_UP)
2172              .direction(this.counterDirection)
2173              .width(CounterResource.COUNTER_INLINE_BUTTON_ICON_WIDTH)
2174              .height(CounterResource.COUNTER_INLINE_BUTTON_ICON_HEIGHT)
2175              .fillColor(CounterResource.BUTTON_ICON_COLOR)
2176              .opacity(this.addOpacity)
2177
2178            Button({ type: ButtonType.Normal, stateEffect: this.addBtnStateEffect })
2179              .accessibilityText($r('sys.string.increase_used_for_accessibility_text'))
2180              .accessibilityDescription(this.value === this.max ? '' : this.getIncreaseStr())
2181              .direction(this.counterDirection)
2182              .width(CounterResource.COUNTER_INLINE_BUTTON_WIDTH)
2183              .height(CounterResource.COUNTER_INLINE_BUTTON_HEIGHT)
2184              .backgroundColor(Color.Transparent)
2185              .opacity(this.addOpacity)
2186              .enabled(this.addBtnEnabled)
2187              .onClick((event: ClickEvent) => {
2188                this.addValue();
2189                if (event.source === SourceType.Mouse ||
2190                  event.source === SourceType.TouchScreen) {
2191                  this.addBtnFocusWidh = CounterResource.BUTTON_BORDER_BLUR_WIDTH;
2192                }
2193                try {
2194                  let eventInfo: accessibility.EventInfo = ({
2195                    type: 'announceForAccessibility',
2196                    bundleName: (getContext() as common.UIAbilityContext)?.abilityInfo?.bundleName,
2197                    triggerAction: 'click',
2198                    textAnnouncedForAccessibility: this.value?.toString()
2199                  });
2200                  accessibility.sendAccessibilityEvent(eventInfo).then(() => {
2201                    console.log('Accessility addValue click send event');
2202                  })
2203                } catch (exception) {
2204                  let code: number = (exception as BusinessError).code;
2205                  let message: string = (exception as BusinessError).message;
2206                  console.log(`Accessility addValue click longPress faild error code:${code} message:${message}`);
2207                }
2208              })
2209              .gesture(
2210                LongPressGesture({ repeat: true })
2211                  .onAction((event: GestureEvent) => {
2212                    if (event.repeat) {
2213                      this.addValue();
2214                    }
2215                    this.addBtnFocusWidh = CounterResource.BUTTON_BORDER_BLUR_WIDTH;
2216                  })
2217                  .onActionEnd(() => {
2218                    try {
2219                      let eventInfo: accessibility.EventInfo = ({
2220                        type: 'announceForAccessibility',
2221                        bundleName: (getContext() as common.UIAbilityContext)?.abilityInfo?.bundleName,
2222                        triggerAction: 'common',
2223                        textAnnouncedForAccessibility: this.value?.toString()
2224                      });
2225                      accessibility.sendAccessibilityEvent(eventInfo).then(() => {
2226                        console.log('Accessility addValue longPress send event');
2227                      })
2228                    } catch (exception) {
2229                      let code: number = (exception as BusinessError).code;
2230                      let message: string = (exception as BusinessError).message;
2231                      console.log(`Accessility addValue longPress faild error code:${code} message:${message}`);
2232                    }
2233                  })
2234              )
2235              .hoverEffect(this.choverEffect)
2236              .onHover((isHover: boolean) => {
2237                this.onHoverIncrease && this.onHoverIncrease(isHover);
2238              })
2239              .focusable(false)
2240              .onFocus(() => {
2241                this.addBtnFocusWidh = CounterResource.BUTTON_BORDER_FOCUSED_WIDTH;
2242                this.onFocusIncrease && this.onFocusIncrease();
2243              })
2244              .onBlur(() => {
2245                this.addBtnFocusWidh = CounterResource.BUTTON_BORDER_BLUR_WIDTH;
2246                this.onBlurIncrease && this.onBlurIncrease();
2247              })
2248          }
2249          .direction(this.counterDirection)
2250          .width(CounterResource.COUNTER_INLINE_BUTTON_WIDTH)
2251          .height(CounterResource.COUNTER_INLINE_BUTTON_HEIGHT)
2252          .padding({ top: '1vp' })
2253          .borderWidth({ bottom: '1vp' })
2254          .borderColor(CounterResource.COUNTER_BORDER_COLOR)
2255          .clip(true)
2256
2257          Stack() {
2258            Rect()
2259              .direction(this.counterDirection)
2260              .width(CounterResource.COUNTER_INLINE_FOCUS_BORDER_WIDTH)
2261              .height(CounterResource.COUNTER_INLINE_FOCUS_BORDER_HEIGHT)
2262              .radius([
2263                ['0vp', '0vp'],
2264                ['0vp', '0vp'],
2265                [CounterResource.COUNTER_INLINE_RADIUS, CounterResource.COUNTER_INLINE_RADIUS],
2266                ['0vp', '0vp']
2267              ])
2268              .strokeWidth(this.subBtnFocusWidh)
2269              .stroke(CounterResource.BUTTON_BORDER_FOCUSED_COLOR)
2270              .margin({ top: LengthMetrics.vp(1), end: LengthMetrics.vp(1), bottom: LengthMetrics.vp(2) })
2271              .fillOpacity(0)
2272            Image(CounterResource.BUTTON_ARROW_DOWN)
2273              .direction(this.counterDirection)
2274              .width(CounterResource.COUNTER_INLINE_BUTTON_ICON_WIDTH)
2275              .height(CounterResource.COUNTER_INLINE_BUTTON_ICON_HEIGHT)
2276              .fillColor(CounterResource.BUTTON_ICON_COLOR)
2277              .opacity(this.subOpacity)
2278            Button({ type: ButtonType.Normal, stateEffect: this.subBtnStateEffect })
2279              .accessibilityText($r('sys.string.reduce_used_for_accessibility_text'))
2280              .accessibilityDescription(this.value === this.min ? '' : this.getReduceStr())
2281              .direction(this.counterDirection)
2282              .width(CounterResource.COUNTER_INLINE_BUTTON_WIDTH)
2283              .height(CounterResource.COUNTER_INLINE_BUTTON_HEIGHT)
2284              .backgroundColor(Color.Transparent)
2285              .opacity(this.subOpacity)
2286              .enabled(this.subBtnEnabled)
2287              .onClick((event: ClickEvent) => {
2288                this.subValue();
2289                if (event.source === SourceType.Mouse ||
2290                  event.source === SourceType.TouchScreen) {
2291                  this.subBtnFocusWidh = CounterResource.BUTTON_BORDER_BLUR_WIDTH;
2292                }
2293                try {
2294                  let eventInfo: accessibility.EventInfo = ({
2295                    type: 'announceForAccessibility',
2296                    bundleName: (getContext() as common.UIAbilityContext)?.abilityInfo?.bundleName,
2297                    triggerAction: 'click',
2298                    textAnnouncedForAccessibility: this.value?.toString()
2299                  });
2300                  accessibility.sendAccessibilityEvent(eventInfo).then(() => {
2301                    console.log('Accessility subValue click send event');
2302                  })
2303                } catch (exception) {
2304                  let code: number = (exception as BusinessError).code;
2305                  let message: string = (exception as BusinessError).message;
2306                  console.log(`Accessility subValue click faild error code:${code} message:${message}`);
2307                }
2308              })
2309              .gesture(
2310                LongPressGesture({ repeat: true })
2311                  .onAction((event: GestureEvent) => {
2312                    if (event.repeat) {
2313                      this.subValue();
2314                    }
2315                    this.subBtnFocusWidh = CounterResource.BUTTON_BORDER_BLUR_WIDTH;
2316                  })
2317                  .onActionEnd(() => {
2318                    try {
2319                      let eventInfo: accessibility.EventInfo = ({
2320                        type: 'announceForAccessibility',
2321                        bundleName: (getContext() as common.UIAbilityContext)?.abilityInfo?.bundleName,
2322                        triggerAction: 'common',
2323                        textAnnouncedForAccessibility: this.value?.toString()
2324                      });
2325                      accessibility.sendAccessibilityEvent(eventInfo).then(() => {
2326                        console.log('Accessility subValue longPress send event');
2327                      })
2328                    } catch (exception) {
2329                      let code: number = (exception as BusinessError).code;
2330                      let message: string = (exception as BusinessError).message;
2331                      console.log(`Accessility subValue longPress faild error code:${code} message:${message}`);
2332                    }
2333                  })
2334              )
2335              .hoverEffect(this.choverEffect)
2336              .onHover((isHover: boolean) => {
2337                this.onHoverDecrease && this.onHoverDecrease(isHover);
2338              })
2339              .focusable(false)
2340              .onFocus(() => {
2341                this.subBtnFocusWidh = CounterResource.BUTTON_BORDER_FOCUSED_WIDTH;
2342                this.onFocusDecrease && this.onFocusDecrease();
2343              })
2344              .onBlur(() => {
2345                this.subBtnFocusWidh = CounterResource.BUTTON_BORDER_BLUR_WIDTH;
2346                this.onBlurDecrease && this.onBlurDecrease();
2347              })
2348          }
2349          .direction(this.counterDirection)
2350          .width(CounterResource.COUNTER_INLINE_BUTTON_WIDTH)
2351          .height(CounterResource.COUNTER_INLINE_BUTTON_HEIGHT)
2352          .clip(true)
2353        }
2354        .direction(this.counterDirection)
2355        .width(CounterResource.COUNTER_INLINE_BUTTON_WIDTH)
2356        .height(CounterResource.COUNTER_INLINE_CONTAINER_HEIGHT)
2357        .borderWidth({ start: LengthMetrics.vp(CounterResource.COUNTER_BORDER_WIDTH_NUMBER) })
2358        .borderColor(CounterResource.COUNTER_BORDER_COLOR)
2359      }
2360      .direction(this.counterDirection)
2361      .height(CounterResource.COUNTER_INLINE_CONTAINER_HEIGHT)
2362      .borderWidth(CounterResource.COUNTER_BORDER_WIDTH)
2363      .borderColor(CounterResource.COUNTER_BORDER_COLOR)
2364      .borderRadius(CounterResource.COUNTER_INLINE_RADIUS)
2365      .clip(true)
2366    } else if (this.type === CounterType.INLINE_DATE) {
2367      Row() {
2368        Row() {
2369          TextInput({
2370            text: this.hasInputText1 ? this.inputYear.toString() : this.getYear(),
2371            controller: this.controller1
2372          })
2373            .accessibilityText(this.getDateYear(this.year))
2374            .accessibilityDescription($r('sys.string.input_counter_double_click_description'))
2375            .direction(this.counterDirection)
2376            .type(InputType.Number)
2377            .copyOption(CopyOptions.None)
2378            .fontSize(this.getTextInputFontSize())
2379            .fontWeight(FontWeight.Medium)
2380            .fontColor(this.hasFocusText1 ? Color.White : CounterResource.COUNTER_TEXT_COLOR)
2381            .maxLength(5)
2382            .padding(0)
2383            .backgroundColor(this.hasFocusText1 ? CounterResource.BUTTON_BORDER_FOCUSED_COLOR : Color.Transparent)
2384            .width('38vp')
2385            .height('20vp')
2386            .borderRadius(0)
2387            .borderWidth(0)
2388            .key('DateTextInput1' + this.timeStamp.toString())
2389            .onKeyEvent((event: KeyEvent) => {
2390              this.focusCurrentText(FocusText.TEXT1);
2391              if (event.keyCode === CounterConstant.KEYCODE_ESC) {
2392                this.resetFocusText();
2393                event.stopPropagation();
2394              }
2395              if (event.type === KeyType.Down &&
2396                event.keyCode === CounterConstant.KEYCODE_DPAD_UP) {
2397                this.addDate();
2398                event.stopPropagation();
2399              }
2400              if (event.type === KeyType.Down &&
2401                event.keyCode === CounterConstant.KEYCODE_DPAD_DOWN) {
2402                this.subDate();
2403                event.stopPropagation();
2404              }
2405              if (event.type === KeyType.Down &&
2406                event.keyCode === CounterConstant.KEYCODE_MOVE_HOME) {
2407                this.homeFocusText();
2408                event.stopPropagation();
2409              }
2410              if (event.type === KeyType.Down &&
2411                event.keyCode === CounterConstant.KEYCODE_MOVE_END) {
2412                this.endFocusText();
2413                event.stopPropagation();
2414              }
2415              if (event.type === KeyType.Down &&
2416                event.keyCode === CounterConstant.KEYCODE_DPAD_LEFT) {
2417                this.focusWithTarget('DateTextInput1' + this.timeStamp.toString());
2418                event.stopPropagation();
2419              }
2420              if (event.type === KeyType.Down &&
2421                event.keyCode === CounterConstant.KEYCODE_DPAD_RIGHT) {
2422                this.focusWithTarget('DateTextInput2' + this.timeStamp.toString());
2423              }
2424            })
2425            .onChange((value: string) => {
2426              if (value.length !== 4) {
2427                this.hasInputText1 = true;
2428              }
2429              this.inputYear = Number(value)
2430              if (value.length === 5) {
2431                this.inputYear = this.inputYear % 10;
2432              }
2433
2434              if (this.timeoutID1 !== -1) {
2435                clearTimeout(this.timeoutID1);
2436                this.timeoutID1 = -1;
2437              }
2438
2439              this.timeoutID1 = setTimeout(() => {
2440                this.hasInputText1 = false;
2441                this.inputYear = this.year;
2442                this.updateDateEnableSate();
2443                this.updateDay();
2444              }, 1500);
2445
2446              if (this.inputYear >= this.minYear && this.inputYear <= this.maxYear) {
2447                this.year = this.inputYear;
2448                this.updateDateEnableSate();
2449                this.updateDay();
2450              }
2451
2452              if (value.length === 4) {
2453                let date = new DateData(this.year, this.month, this.day);
2454                this.onDateChange?.(date);
2455              }
2456            })
2457            .onSubmit((enterKey: EnterKeyType) => {
2458              if (this.timeoutID1 !== -1) {
2459                clearTimeout(this.timeoutID1);
2460                this.timeoutID1 = -1;
2461              }
2462              this.hasInputText1 = false;
2463              this.year -= 1;
2464              if (this.inputYear >= this.minYear && this.inputYear <= this.maxYear) {
2465                this.year = this.inputYear;
2466              } else {
2467                this.year += 1;
2468                this.inputYear = this.year;
2469              }
2470              this.updateDateEnableSate();
2471              this.updateDay();
2472            })
2473            .tabIndex(0)
2474            .focusOnTouch(true)
2475            .focusable(true)
2476            .onFocus(() => {
2477              this.focusText = FocusText.TEXT1;
2478              this.hasFocusText1 = true;
2479              this.updateDateEnableSate();
2480              this.controller1.caretPosition(this.getYear().length);
2481            })
2482            .onBlur(() => {
2483              this.focusText = FocusText.NONE;
2484              this.hasFocusText1 = false;
2485              this.updateDateEnableSate();
2486            })
2487            .onClick((event: ClickEvent) => {
2488              this.focusText = FocusText.TEXT1;
2489              this.hasFocusText1 = true;
2490              this.updateDateEnableSate();
2491              this.controller1.caretPosition(this.getYear().length);
2492            })
2493          Text('/')
2494            .accessibilityLevel('no')
2495            .direction(this.counterDirection)
2496            .textAlign(TextAlign.Center)
2497            .fontSize(CounterResource.COUNTER_NUMBER_SIZE)
2498            .maxFontScale(CounterResource.COUNTER_NUMBER_MAX_FONT_SIZE_SCALE)
2499            .fontColor(CounterResource.COUNTER_TEXT_COLOR)
2500            .width('8vp')
2501          TextInput({
2502            text: this.hasInputText2 ? this.inputMoon.toString() : this.convertNumberToString(this.month),
2503            controller: this.controller2
2504          })
2505            .accessibilityText(this.getDateMonth(this.month))
2506            .accessibilityDescription($r('sys.string.input_counter_double_click_description'))
2507            .direction(this.counterDirection)
2508            .type(InputType.Number)
2509            .copyOption(CopyOptions.None)
2510            .fontSize(this.getTextInputFontSize())
2511            .fontWeight(FontWeight.Medium)
2512            .fontColor(this.hasFocusText2 ? Color.White : CounterResource.COUNTER_TEXT_COLOR)
2513            .maxLength(3)
2514            .padding(0)
2515            .backgroundColor(this.hasFocusText2 ? CounterResource.BUTTON_BORDER_FOCUSED_COLOR : Color.Transparent)
2516            .width('19vp')
2517            .height('20vp')
2518            .borderRadius(0)
2519            .key('DateTextInput2' + this.timeStamp.toString())
2520            .onKeyEvent((event: KeyEvent) => {
2521              this.focusCurrentText(FocusText.TEXT2)
2522              if (event.keyCode === CounterConstant.KEYCODE_ESC) {
2523                this.resetFocusText();
2524                event.stopPropagation();
2525              }
2526              if (event.type === KeyType.Down &&
2527                event.keyCode === CounterConstant.KEYCODE_DPAD_DOWN) {
2528                this.subDate();
2529                this.updateDay();
2530                event.stopPropagation();
2531              }
2532              if (event.type === KeyType.Down &&
2533                event.keyCode === CounterConstant.KEYCODE_DPAD_UP) {
2534                this.addDate();
2535                this.updateDay();
2536                event.stopPropagation();
2537              }
2538              if (event.type === KeyType.Down &&
2539                event.keyCode === CounterConstant.KEYCODE_MOVE_HOME) {
2540                this.homeFocusText();
2541                event.stopPropagation();
2542              }
2543              if (event.type === KeyType.Down &&
2544                event.keyCode === CounterConstant.KEYCODE_MOVE_END) {
2545                this.endFocusText();
2546                event.stopPropagation();
2547              }
2548              if (event.type === KeyType.Down &&
2549                event.keyCode === CounterConstant.KEYCODE_DPAD_LEFT) {
2550                this.focusWithTarget('DateTextInput1' + this.timeStamp.toString());
2551              }
2552              if (event.type === KeyType.Down &&
2553                event.keyCode === CounterConstant.KEYCODE_DPAD_RIGHT) {
2554                this.focusWithTarget('DateTextInput3' + this.timeStamp.toString());
2555              }
2556
2557              if (event.type === KeyType.Down &&
2558                event.keyCode === CounterConstant.KEYCODE_TAB) {
2559                event.stopPropagation();
2560                this.focusWithTarget('DateTextInput1' + this.timeStamp.toString());
2561              }
2562            })
2563            .onChange((value: string) => {
2564              this.inputMoon = Number(value);
2565              if (value.length !== 2) {
2566                this.hasInputText2 = true;
2567              }
2568              if (value.length === 3) {
2569                this.inputMoon = this.inputMoon % 10;
2570              }
2571              if (this.timeoutID2 !== -1) {
2572                clearTimeout(this.timeoutID2);
2573                this.timeoutID2 = -1;
2574              }
2575
2576              this.timeoutID2 = setTimeout(() => {
2577                this.hasInputText2 = false;
2578                this.month -= 1;
2579                if (this.inputMoon >= 1 && this.inputMoon <= 12) {
2580                  this.month = this.inputMoon;
2581                } else {
2582                  this.month += 1;
2583                  this.inputMoon = this.month;
2584                }
2585                this.updateDay();
2586              }, 1000);
2587
2588              if (value.length === 2) {
2589                this.hasInputText2 = false;
2590                this.month -= 1;
2591                if (this.inputMoon >= 1 && this.inputMoon <= 12) {
2592                  this.month = this.inputMoon;
2593                  let date = new DateData(this.year, this.month, this.day);
2594                  this.onDateChange?.(date);
2595                } else {
2596                  this.month += 1;
2597                  this.inputMoon = this.month;
2598                }
2599                this.updateDay();
2600              }
2601            })
2602            .onSubmit((enterKey: EnterKeyType) => {
2603              if (this.timeoutID2 !== -1) {
2604                clearTimeout(this.timeoutID2);
2605                this.timeoutID2 = -1;
2606              }
2607              this.hasInputText2 = false;
2608              this.month -= 1;
2609              if (this.inputMoon >= 1 && this.inputMoon <= 12) {
2610                this.month = this.inputMoon;
2611                this.updateDay();
2612              } else {
2613                this.month += 1;
2614              }
2615            })
2616            .focusOnTouch(true)
2617            .tabIndex(-1)
2618            .focusable(true)
2619            .onFocus(() => {
2620              this.focusText = FocusText.TEXT2;
2621              this.hasFocusText2 = true;
2622              this.controller2.caretPosition(this.convertNumberToString(this.month).length);
2623            })
2624            .onBlur(() => {
2625              this.focusText = FocusText.NONE
2626              this.hasFocusText2 = false
2627            })
2628            .onClick((event: ClickEvent) => {
2629              this.focusText = FocusText.TEXT2;
2630              this.hasFocusText2 = true;
2631              this.controller2.caretPosition(this.convertNumberToString(this.month).length);
2632            })
2633          Text('/')
2634            .accessibilityLevel('no')
2635            .direction(this.counterDirection)
2636            .textAlign(TextAlign.Center)
2637            .fontSize(CounterResource.COUNTER_NUMBER_SIZE)
2638            .maxFontScale(CounterResource.COUNTER_NUMBER_MAX_FONT_SIZE_SCALE)
2639            .fontColor(CounterResource.COUNTER_TEXT_COLOR)
2640            .width('8vp')
2641          TextInput({
2642            text: this.hasInputText3 ? this.inputDay.toString() : this.convertNumberToString(this.day),
2643            controller: this.controller3
2644          })
2645            .accessibilityText(this.getDateDay(this.day))
2646            .accessibilityDescription($r('sys.string.input_counter_double_click_description'))
2647            .direction(this.counterDirection)
2648            .type(InputType.Number)
2649            .copyOption(CopyOptions.None)
2650            .fontSize(this.getTextInputFontSize())
2651            .fontWeight(FontWeight.Medium)
2652            .fontColor(this.hasFocusText3 ? Color.White : CounterResource.COUNTER_TEXT_COLOR)
2653            .maxLength(3)
2654            .padding(0)
2655            .backgroundColor(this.hasFocusText3 ? CounterResource.BUTTON_BORDER_FOCUSED_COLOR : Color.Transparent)
2656            .width('19vp')
2657            .height('20vp')
2658            .borderRadius(0)
2659            .key('DateTextInput3' + this.timeStamp.toString())
2660            .onKeyEvent((event: KeyEvent) => {
2661              this.focusCurrentText(FocusText.TEXT3)
2662              if (event.keyCode === CounterConstant.KEYCODE_ESC) {
2663                this.resetFocusText();
2664                event.stopPropagation();
2665              }
2666              if (event.type === KeyType.Down &&
2667                event.keyCode === CounterConstant.KEYCODE_DPAD_DOWN) {
2668                this.subDate();
2669                event.stopPropagation();
2670              }
2671              if (event.type === KeyType.Down &&
2672                event.keyCode === CounterConstant.KEYCODE_DPAD_UP) {
2673                this.addDate();
2674                event.stopPropagation();
2675              }
2676              if (event.type === KeyType.Down &&
2677                event.keyCode === CounterConstant.KEYCODE_MOVE_HOME) {
2678                this.homeFocusText();
2679                event.stopPropagation();
2680              }
2681              if (event.type === KeyType.Down &&
2682                event.keyCode === CounterConstant.KEYCODE_MOVE_END) {
2683                this.endFocusText();
2684                event.stopPropagation();
2685              }
2686              if (event.type === KeyType.Down &&
2687                event.keyCode === CounterConstant.KEYCODE_DPAD_LEFT) {
2688                this.focusWithTarget('DateTextInput2' + this.timeStamp.toString());
2689              }
2690
2691              if (event.type === KeyType.Down &&
2692                event.keyCode === CounterConstant.KEYCODE_DPAD_RIGHT) {
2693                this.focusWithTarget('DateTextInput3' + this.timeStamp.toString());
2694                event.stopPropagation();
2695              }
2696
2697              if (event.type === KeyType.Down &&
2698                event.keyCode === CounterConstant.KEYCODE_TAB) {
2699                event.stopPropagation();
2700                this.focusWithTarget('DateTextInput1' + this.timeStamp.toString());
2701              }
2702            })
2703            .onChange((value: string) => {
2704              this.inputDay = Number(value)
2705              if (value.length !== 2) {
2706                this.hasInputText3 = true;
2707              }
2708              if (value.length === 3) {
2709                this.inputDay = this.inputDay % 10;
2710              }
2711              if (this.timeoutID3 !== -1) {
2712                clearTimeout(this.timeoutID3);
2713                this.timeoutID3 = -1;
2714              }
2715
2716              this.timeoutID3 = setTimeout(() => {
2717                this.hasInputText3 = false;
2718                this.day -= 1;
2719                if (this.inputDay >= 1 && this.inputDay <= this.getDayNumber()) {
2720                  this.day = this.inputDay;
2721                } else {
2722                  this.day += 1;
2723                  this.inputDay = this.day;
2724                }
2725              }, 1000);
2726
2727              if (value.length === 2) {
2728                this.hasInputText3 = false;
2729                this.day -= 1;
2730                if (this.inputDay >= 1 && this.inputDay <= this.getDayNumber()) {
2731                  this.day = this.inputDay;
2732                  let date = new DateData(this.year, this.month, this.day);
2733                  this.onDateChange?.(date);
2734                } else {
2735                  this.day += 1;
2736                  this.inputDay = this.day;
2737                }
2738              }
2739            })
2740            .onSubmit((enterKey: EnterKeyType) => {
2741              if (this.timeoutID3 !== -1) {
2742                clearTimeout(this.timeoutID3);
2743                this.timeoutID3 = -1;
2744              }
2745              this.hasInputText3 = false;
2746              this.day -= 1;
2747              if (this.inputDay >= 1 && this.inputDay <= this.getDayNumber()) {
2748                this.day = this.inputDay;
2749              } else {
2750                this.day += 1;
2751              }
2752            })
2753            .tabIndex(-2)
2754            .focusOnTouch(true)
2755            .focusable(true)
2756            .onFocus(() => {
2757              this.focusText = FocusText.TEXT3;
2758              this.hasFocusText3 = true;
2759              this.controller3.caretPosition(this.convertNumberToString(this.day).length);
2760            })
2761            .onBlur(() => {
2762              this.focusText = FocusText.NONE;
2763              this.hasFocusText3 = false;
2764            })
2765            .onClick((event: ClickEvent) => {
2766              this.focusText = FocusText.TEXT3;
2767              this.hasFocusText3 = true;
2768              this.controller3.caretPosition(this.convertNumberToString(this.day).length);
2769            })
2770        }
2771        .direction(this.counterDirection)
2772        .width('92vp')
2773        .height(CounterResource.COUNTER_INLINE_CONTAINER_HEIGHT)
2774        .margin({
2775          start: LengthMetrics.vp(CounterResource.COUNTER_INLINE_DATE_TEXT_MARGIN),
2776          end: LengthMetrics.vp(CounterResource.COUNTER_INLINE_DATE_TEXT_MARGIN)
2777        })
2778
2779        Column() {
2780          Stack() {
2781            Rect()
2782              .direction(this.counterDirection)
2783              .width(CounterResource.COUNTER_INLINE_FOCUS_BORDER_WIDTH)
2784              .height(CounterResource.COUNTER_INLINE_FOCUS_BORDER_HEIGHT)
2785              .radius([
2786                ['0vp', '0vp'],
2787                [CounterResource.COUNTER_INLINE_RADIUS, CounterResource.COUNTER_INLINE_RADIUS],
2788                ['0vp', '0vp'],
2789                ['0vp', '0vp']])
2790              .strokeWidth(this.addBtnFocusWidh)
2791              .stroke(CounterResource.BUTTON_BORDER_FOCUSED_COLOR)
2792              .margin({ end: LengthMetrics.vp(1) })
2793              .fillOpacity(0)
2794            Image(CounterResource.BUTTON_ARROW_UP)
2795              .direction(this.counterDirection)
2796              .width(CounterResource.COUNTER_INLINE_BUTTON_ICON_WIDTH)
2797              .height(CounterResource.COUNTER_INLINE_BUTTON_ICON_HEIGHT)
2798              .fillColor(CounterResource.BUTTON_ICON_COLOR)
2799              .opacity(this.addOpacity)
2800            Button({ type: ButtonType.Normal, stateEffect: this.addBtnStateEffect })
2801              .accessibilityText($r('sys.string.increase_used_for_accessibility_text'))
2802              .accessibilityDescription($r('sys.string.increase_counter_double_click_description'))
2803              .direction(this.counterDirection)
2804              .width(CounterResource.COUNTER_INLINE_BUTTON_WIDTH)
2805              .height(CounterResource.COUNTER_INLINE_BUTTON_HEIGHT)
2806              .backgroundColor(Color.Transparent)
2807              .opacity(this.addOpacity)
2808              .enabled(this.addBtnEnabled)
2809              .onClick((event: ClickEvent) => {
2810                this.accessibilityBroadcastAddDate();
2811                if (event.source === SourceType.Mouse ||
2812                  event.source === SourceType.TouchScreen) {
2813                  this.addBtnFocusWidh = CounterResource.BUTTON_BORDER_BLUR_WIDTH;
2814                }
2815              })
2816              .gesture(
2817                LongPressGesture({ repeat: true })
2818                  .onAction((event: GestureEvent) => {
2819                    if (event.repeat) {
2820                      this.addDate();
2821                    }
2822                    this.addBtnFocusWidh = CounterResource.BUTTON_BORDER_BLUR_WIDTH;
2823                  })
2824                  .onActionEnd(() => {
2825                    this.accessibilityBroadcastAddDate();
2826                  })
2827              )
2828              .hoverEffect(this.choverEffect)
2829              .onHover((isHover: boolean) => {
2830                this.onHoverIncrease && this.onHoverIncrease(isHover);
2831              })
2832              .focusable(false)
2833              .onFocus(() => {
2834                this.addBtnFocusWidh = CounterResource.BUTTON_BORDER_FOCUSED_WIDTH;
2835                this.onFocusIncrease && this.onFocusIncrease();
2836              })
2837              .onBlur(() => {
2838                this.addBtnFocusWidh = CounterResource.BUTTON_BORDER_BLUR_WIDTH;
2839                this.onBlurIncrease && this.onBlurIncrease();
2840              })
2841          }
2842          .width(CounterResource.COUNTER_INLINE_BUTTON_WIDTH)
2843          .height(CounterResource.COUNTER_INLINE_BUTTON_HEIGHT)
2844          .padding({ top: '1vp' })
2845          .borderWidth({ bottom: '1vp' })
2846          .borderColor(CounterResource.COUNTER_BORDER_COLOR)
2847          .clip(true)
2848
2849          Stack() {
2850            Rect()
2851              .direction(this.counterDirection)
2852              .width(CounterResource.COUNTER_INLINE_FOCUS_BORDER_WIDTH)
2853              .height(CounterResource.COUNTER_INLINE_FOCUS_BORDER_HEIGHT)
2854              .radius([
2855                ['0vp', '0vp'],
2856                ['0vp', '0vp'],
2857                [CounterResource.COUNTER_INLINE_RADIUS, CounterResource.COUNTER_INLINE_RADIUS],
2858                ['0vp', '0vp']
2859              ])
2860              .strokeWidth(this.subBtnFocusWidh)
2861              .stroke(CounterResource.BUTTON_BORDER_FOCUSED_COLOR)
2862              .margin({ top: LengthMetrics.vp(1), end: LengthMetrics.vp(1), bottom: LengthMetrics.vp(2) })
2863              .fillOpacity(0)
2864            Image(CounterResource.BUTTON_ARROW_DOWN)
2865              .direction(this.counterDirection)
2866              .width(CounterResource.COUNTER_INLINE_BUTTON_ICON_WIDTH)
2867              .height(CounterResource.COUNTER_INLINE_BUTTON_ICON_HEIGHT)
2868              .fillColor(CounterResource.BUTTON_ICON_COLOR)
2869              .opacity(this.subOpacity)
2870            Button({ type: ButtonType.Normal, stateEffect: this.subBtnStateEffect })
2871              .accessibilityText($r('sys.string.reduce_used_for_accessibility_text'))
2872              .accessibilityDescription($r('sys.string.reduce_counter_double_click_description'))
2873              .direction(this.counterDirection)
2874              .width(CounterResource.COUNTER_INLINE_BUTTON_WIDTH)
2875              .height(CounterResource.COUNTER_INLINE_BUTTON_HEIGHT)
2876              .backgroundColor(Color.Transparent)
2877              .opacity(this.subOpacity)
2878              .enabled(this.subBtnEnabled)
2879              .onClick((event: ClickEvent) => {
2880                this.accessibilityBroadcastSubDate();
2881                if (event.source === SourceType.Mouse ||
2882                  event.source === SourceType.TouchScreen) {
2883                  this.subBtnFocusWidh = CounterResource.BUTTON_BORDER_BLUR_WIDTH;
2884                }
2885              })
2886              .gesture(
2887                LongPressGesture({ repeat: true })
2888                  .onAction((event: GestureEvent) => {
2889                    if (event.repeat) {
2890                      this.subDate();
2891                    }
2892                    this.subBtnFocusWidh = CounterResource.BUTTON_BORDER_BLUR_WIDTH;
2893                  })
2894                  .onActionEnd(() => {
2895                    this.accessibilityBroadcastSubDate();
2896                  })
2897              )
2898              .hoverEffect(this.choverEffect)
2899              .onHover((isHover: boolean) => {
2900                this.onHoverDecrease && this.onHoverDecrease(isHover);
2901              })
2902              .focusable(false)
2903              .onFocus(() => {
2904                this.subBtnFocusWidh = CounterResource.BUTTON_BORDER_FOCUSED_WIDTH;
2905                this.onFocusDecrease && this.onFocusDecrease();
2906              })
2907              .onBlur(() => {
2908                this.subBtnFocusWidh = CounterResource.BUTTON_BORDER_BLUR_WIDTH;
2909                this.onBlurDecrease && this.onBlurDecrease();
2910              })
2911          }.width(CounterResource.COUNTER_INLINE_BUTTON_WIDTH)
2912          .height(CounterResource.COUNTER_INLINE_BUTTON_HEIGHT)
2913          .clip(true)
2914        }
2915        .direction(this.counterDirection)
2916        .width(CounterResource.COUNTER_INLINE_BUTTON_WIDTH)
2917        .height(CounterResource.COUNTER_INLINE_CONTAINER_HEIGHT)
2918        .borderWidth({ start: LengthMetrics.vp(CounterResource.COUNTER_BORDER_WIDTH_NUMBER) })
2919        .borderColor(CounterResource.COUNTER_BORDER_COLOR)
2920      }
2921      .direction(this.counterDirection)
2922      .height(CounterResource.COUNTER_INLINE_CONTAINER_HEIGHT)
2923      .borderWidth(CounterResource.COUNTER_BORDER_WIDTH)
2924      .borderColor(CounterResource.COUNTER_BORDER_COLOR)
2925      .borderRadius(CounterResource.COUNTER_INLINE_RADIUS)
2926      .clip(true)
2927    } else {
2928    }
2929  }
2930}
2931