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 */
15
16if (!('finalizeConstruction' in ViewPU.prototype)) {
17    Reflect.set(ViewPU.prototype, 'finalizeConstruction', () => { });
18}
19const LengthMetrics = requireNapi('arkui.node').LengthMetrics;
20const TEXT_MARGIN_TOP_4 = 4;
21const TEXT_MARGIN_BOTTOM_8 = 8;
22const TEXT_MARGIN_BOTTOM_24 = 24;
23const TEXT_MARGIN_LEFT_48 = 48;
24const TEXT_MARGIN_RIGHT_48 = 48;
25export class SplitLayout extends ViewPU {
26    constructor(n4, o4, p4, q4 = -1, r4 = undefined, s4) {
27        super(n4, p4, q4, s4);
28        if (typeof r4 === 'function') {
29            this.paramsGenerator_ = r4;
30        }
31        this.container = undefined;
32        this.__sizeValue = new ObservedPropertySimplePU('', this, 'sizeValue');
33        this.__areaWidth = new ObservedPropertySimplePU(0, this, 'areaWidth');
34        this.__imageBackgroundColor = new ObservedPropertySimplePU('#19000000', this, 'imageBackgroundColor');
35        this.__mainImage = new ObservedPropertyObjectPU(undefined, this, 'mainImage');
36        this.__primaryText = new SynchedPropertySimpleOneWayPU(o4.primaryText, this, 'primaryText');
37        this.secondaryText = '';
38        this.tertiaryText = '';
39        this.setInitiallyProvidedValue(o4);
40        this.finalizeConstruction();
41    }
42    setInitiallyProvidedValue(m4) {
43        if (m4.container !== undefined) {
44            this.container = m4.container;
45        }
46        if (m4.sizeValue !== undefined) {
47            this.sizeValue = m4.sizeValue;
48        }
49        if (m4.areaWidth !== undefined) {
50            this.areaWidth = m4.areaWidth;
51        }
52        if (m4.imageBackgroundColor !== undefined) {
53            this.imageBackgroundColor = m4.imageBackgroundColor;
54        }
55        if (m4.mainImage !== undefined) {
56            this.mainImage = m4.mainImage;
57        }
58        if (m4.primaryText === undefined) {
59            this.__primaryText.set('');
60        }
61        if (m4.secondaryText !== undefined) {
62            this.secondaryText = m4.secondaryText;
63        }
64        if (m4.tertiaryText !== undefined) {
65            this.tertiaryText = m4.tertiaryText;
66        }
67    }
68    updateStateVars(l4) {
69        this.__primaryText.reset(l4.primaryText);
70    }
71    purgeVariableDependenciesOnElmtId(k4) {
72        this.__sizeValue.purgeDependencyOnElmtId(k4);
73        this.__areaWidth.purgeDependencyOnElmtId(k4);
74        this.__imageBackgroundColor.purgeDependencyOnElmtId(k4);
75        this.__mainImage.purgeDependencyOnElmtId(k4);
76        this.__primaryText.purgeDependencyOnElmtId(k4);
77    }
78    aboutToBeDeleted() {
79        this.__sizeValue.aboutToBeDeleted();
80        this.__areaWidth.aboutToBeDeleted();
81        this.__imageBackgroundColor.aboutToBeDeleted();
82        this.__mainImage.aboutToBeDeleted();
83        this.__primaryText.aboutToBeDeleted();
84        SubscriberManager.Get().delete(this.id__());
85        this.aboutToBeDeletedInternal();
86    }
87    get sizeValue() {
88        return this.__sizeValue.get();
89    }
90    set sizeValue(j4) {
91        this.__sizeValue.set(j4);
92    }
93    get areaWidth() {
94        return this.__areaWidth.get();
95    }
96    set areaWidth(i4) {
97        this.__areaWidth.set(i4);
98    }
99    get imageBackgroundColor() {
100        return this.__imageBackgroundColor.get();
101    }
102    set imageBackgroundColor(h4) {
103        this.__imageBackgroundColor.set(h4);
104    }
105    get mainImage() {
106        return this.__mainImage.get();
107    }
108    set mainImage(g4) {
109        this.__mainImage.set(g4);
110    }
111    get primaryText() {
112        return this.__primaryText.get();
113    }
114    set primaryText(f4) {
115        this.__primaryText.set(f4);
116    }
117    initialRender() {
118        this.observeComponentCreation2((a4, b4) => {
119            Column.create();
120            Column.onAreaChange((d4, e4) => {
121                console.info(`Ace: on area change, oldValue is ${JSON.stringify(d4)} value is ${JSON.stringify(e4)}`);
122                this.sizeValue = JSON.stringify(e4);
123                this.areaWidth = parseInt(e4.width.toString(), 0);
124                console.info(`pingAce: on area change, oldValue is` + this.areaWidth);
125                console.info(`pingAce: on area change, oldValue is` + parseInt(e4.height.toString(), 0));
126            });
127        }, Column);
128        this.observeComponentCreation2((c, d) => {
129            If.create();
130            if (this.areaWidth < 600) {
131                this.ifElseBranchUpdateFunction(0, () => {
132                    this.observeComponentCreation2((y3, z3) => {
133                        GridRow.create({
134                            columns: 4,
135                            breakpoints: {
136                                reference: BreakpointsReference.WindowSize
137                            },
138                            direction: GridRowDirection.Row
139                        });
140                    }, GridRow);
141                    this.observeComponentCreation2((w3, x3) => {
142                        GridCol.create({ span: { xs: 4, sm: 4, md: 4, lg: 4 } });
143                    }, GridCol);
144                    this.observeComponentCreation2((u3, v3) => {
145                        Column.create();
146                    }, Column);
147                    this.observeComponentCreation2((s3, t3) => {
148                        Stack.create({ alignContent: Alignment.Bottom });
149                        Stack.height('34%');
150                        Stack.width('100%');
151                    }, Stack);
152                    this.observeComponentCreation2((q3, r3) => {
153                        Image.create(this.mainImage);
154                        Image.height('100%');
155                        Image.width('100%');
156                    }, Image);
157                    this.observeComponentCreation2((o3, p3) => {
158                        Scroll.create();
159                        Scroll.scrollBar(BarState.On);
160                        Scroll.nestedScroll({
161                            scrollForward: NestedScrollMode.SELF_FIRST,
162                            scrollBackward: NestedScrollMode.SELF_FIRST,
163                        });
164                    }, Scroll);
165                    this.observeComponentCreation2((m3, n3) => {
166                        Column.create();
167                        Column.alignItems(HorizontalAlign.Center);
168                        Column.margin({
169                            left: { 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_max_padding_start'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' },
170                            right: { 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_max_padding_end'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' },
171                        });
172                    }, Column);
173                    this.observeComponentCreation2((k3, l3) => {
174                        Text.create(this.primaryText);
175                        Text.fontWeight(FontWeight.Medium);
176                        Text.textAlign(TextAlign.Center);
177                        Text.fontSize({ 'id': -1, 'type': 10002, params: ['sys.float.Title_M'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' });
178                        Text.fontColor({ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_text_primary'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' });
179                    }, Text);
180                    Text.pop();
181                    this.observeComponentCreation2((i3, j3) => {
182                        Text.create(this.secondaryText);
183                        Text.textAlign(TextAlign.Center);
184                        Text.fontSize({ 'id': -1, 'type': 10002, params: ['sys.float.Body_M'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' });
185                        Text.fontColor({ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_text_primary'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' });
186                        Text.margin({ top: TEXT_MARGIN_TOP_4, bottom: TEXT_MARGIN_BOTTOM_8 });
187                    }, Text);
188                    Text.pop();
189                    this.observeComponentCreation2((g3, h3) => {
190                        Text.create(this.tertiaryText);
191                        Text.textAlign(TextAlign.Center);
192                        Text.fontSize({ 'id': -1, 'type': 10002, params: ['sys.float.Caption_M'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' });
193                        Text.fontColor({ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_text_secondary'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' });
194                        Text.margin({ bottom: TEXT_MARGIN_BOTTOM_24 });
195                    }, Text);
196                    Text.pop();
197                    Column.pop();
198                    Scroll.pop();
199                    Stack.pop();
200                    this.observeComponentCreation2((e3, f3) => {
201                        Column.create();
202                        Column.height('66%');
203                        Column.width('100%');
204                    }, Column);
205                    this.container.bind(this)();
206                    Column.pop();
207                    Column.pop();
208                    GridCol.pop();
209                    GridRow.pop();
210                });
211            }
212            else if (600 < this.areaWidth && this.areaWidth < 840) {
213                this.ifElseBranchUpdateFunction(1, () => {
214                    this.observeComponentCreation2((q2, r2) => {
215                        GridRow.create({
216                            columns: 8,
217                            breakpoints: {
218                                reference: BreakpointsReference.WindowSize
219                            },
220                            direction: GridRowDirection.Row
221                        });
222                    }, GridRow);
223                    this.observeComponentCreation2((o2, p2) => {
224                        GridCol.create({ span: { xs: 8, sm: 8, md: 8, lg: 8 } });
225                    }, GridCol);
226                    this.observeComponentCreation2((m2, n2) => {
227                        Column.create();
228                    }, Column);
229                    this.observeComponentCreation2((k2, l2) => {
230                        Row.create();
231                        Row.backgroundColor(this.imageBackgroundColor);
232                        Row.height('34%');
233                        Row.width('100%');
234                    }, Row);
235                    this.observeComponentCreation2((i2, j2) => {
236                        Image.create(this.mainImage);
237                        Image.margin({ start: LengthMetrics.vp(96), end: LengthMetrics.vp(36) });
238                        Image.height('60%');
239                        Image.width('20%');
240                    }, Image);
241                    this.observeComponentCreation2((g2, h2) => {
242                        Scroll.create();
243                        Scroll.scrollBar(BarState.On);
244                        Scroll.nestedScroll({
245                            scrollForward: NestedScrollMode.SELF_FIRST,
246                            scrollBackward: NestedScrollMode.SELF_FIRST,
247                        });
248                    }, Scroll);
249                    this.observeComponentCreation2((e2, f2) => {
250                        Column.create();
251                        Column.width('42%');
252                        Column.alignItems(HorizontalAlign.Start);
253                        Column.margin({ end: LengthMetrics.vp(96) });
254                    }, Column);
255                    this.observeComponentCreation2((c2, d2) => {
256                        Text.create(this.primaryText);
257                        Text.fontWeight(FontWeight.Medium);
258                        Text.fontSize({ 'id': -1, 'type': 10002, params: ['sys.float.Title_M'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' });
259                        Text.fontColor({ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_text_primary'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' });
260                    }, Text);
261                    Text.pop();
262                    this.observeComponentCreation2((a2, b2) => {
263                        Text.create(this.secondaryText);
264                        Text.fontSize({ 'id': -1, 'type': 10002, params: ['sys.float.Body_M'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' });
265                        Text.fontColor({ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_text_primary'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' });
266                        Text.margin({ top: TEXT_MARGIN_TOP_4, bottom: TEXT_MARGIN_BOTTOM_8 });
267                    }, Text);
268                    Text.pop();
269                    this.observeComponentCreation2((y1, z1) => {
270                        Text.create(this.tertiaryText);
271                        Text.fontSize({ 'id': -1, 'type': 10002, params: ['sys.float.Caption_M'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' });
272                        Text.fontColor({ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_text_secondary'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' });
273                        Text.margin({ bottom: TEXT_MARGIN_BOTTOM_24 });
274                    }, Text);
275                    Text.pop();
276                    Column.pop();
277                    Scroll.pop();
278                    Row.pop();
279                    this.observeComponentCreation2((w1, x1) => {
280                        Column.create();
281                        Column.width('100%');
282                        Column.height('66%');
283                    }, Column);
284                    this.container.bind(this)();
285                    Column.pop();
286                    Column.pop();
287                    GridCol.pop();
288                    GridRow.pop();
289                });
290            }
291            else if (this.areaWidth > 840) {
292                this.ifElseBranchUpdateFunction(2, () => {
293                    this.observeComponentCreation2((i1, j1) => {
294                        GridRow.create({
295                            columns: 12,
296                            breakpoints: {
297                                reference: BreakpointsReference.WindowSize
298                            },
299                            direction: GridRowDirection.Row
300                        });
301                        GridRow.width('100%');
302                    }, GridRow);
303                    this.observeComponentCreation2((g1, h1) => {
304                        GridCol.create({ span: { xs: 4, sm: 4, md: 4, lg: 4 } });
305                        GridCol.height('100%');
306                    }, GridCol);
307                    this.observeComponentCreation2((e1, f1) => {
308                        Flex.create({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center, direction: FlexDirection.Column });
309                        Flex.width('100%');
310                        Flex.height('100%');
311                        Flex.backgroundColor(this.imageBackgroundColor);
312                    }, Flex);
313                    this.observeComponentCreation2((c1, d1) => {
314                        Image.create(this.mainImage);
315                        Image.height('17%');
316                        Image.width('34%');
317                        Image.margin({ bottom: 36 });
318                    }, Image);
319                    this.observeComponentCreation2((a1, b1) => {
320                        Scroll.create();
321                        Scroll.scrollBar(BarState.On);
322                        Scroll.nestedScroll({
323                            scrollForward: NestedScrollMode.SELF_FIRST,
324                            scrollBackward: NestedScrollMode.SELF_FIRST,
325                        });
326                    }, Scroll);
327                    this.observeComponentCreation2((y, z) => {
328                        Column.create();
329                        Column.alignItems(HorizontalAlign.Center);
330                        Column.margin({
331                            left: { 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_max_padding_start'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' },
332                            right: { 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_max_padding_end'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' },
333                        });
334                    }, Column);
335                    this.observeComponentCreation2((w, x) => {
336                        Text.create(this.primaryText);
337                        Text.textAlign(TextAlign.Center);
338                        Text.fontWeight(FontWeight.Medium);
339                        Text.fontSize({ 'id': -1, 'type': 10002, params: ['sys.float.Title_M'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' });
340                        Text.fontColor({ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_text_primary'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' });
341                        Text.margin({ left: TEXT_MARGIN_LEFT_48, right: TEXT_MARGIN_RIGHT_48 });
342                    }, Text);
343                    Text.pop();
344                    this.observeComponentCreation2((u, v) => {
345                        Text.create(this.secondaryText);
346                        Text.textAlign(TextAlign.Center);
347                        Text.fontSize({ 'id': -1, 'type': 10002, params: ['sys.float.Body_M'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' });
348                        Text.fontColor({ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_text_primary'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' });
349                        Text.margin({ top: TEXT_MARGIN_TOP_4, bottom: TEXT_MARGIN_BOTTOM_8,
350                            left: TEXT_MARGIN_LEFT_48, right: TEXT_MARGIN_RIGHT_48 });
351                    }, Text);
352                    Text.pop();
353                    this.observeComponentCreation2((s, t) => {
354                        Text.create(this.tertiaryText);
355                        Text.textAlign(TextAlign.Center);
356                        Text.fontSize({ 'id': -1, 'type': 10002, params: ['sys.float.Caption_M'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' });
357                        Text.fontColor({ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_text_secondary'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' });
358                        Text.margin({ left: TEXT_MARGIN_LEFT_48, right: TEXT_MARGIN_RIGHT_48, bottom: TEXT_MARGIN_BOTTOM_24 });
359                    }, Text);
360                    Text.pop();
361                    Column.pop();
362                    Scroll.pop();
363                    Flex.pop();
364                    GridCol.pop();
365                    this.observeComponentCreation2((q, r) => {
366                        GridCol.create({ span: { xs: 8, sm: 8, md: 8, lg: 8 } });
367                    }, GridCol);
368                    this.container.bind(this)();
369                    GridCol.pop();
370                    GridRow.pop();
371                });
372            }
373            else {
374                this.ifElseBranchUpdateFunction(3, () => {
375                });
376            }
377        }, If);
378        If.pop();
379        Column.pop();
380    }
381    rerender() {
382        this.updateDirtyElements();
383    }
384}
385
386export default { SplitLayout };