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