1/**
2 * Copyright (c) 2021-2022 Huawei Device Co., Ltd.
3 * Licensed under the Apache License, Version 2.0 (the "License");
4 * you may not use this file except in compliance with the License.
5 * You may obtain a copy of the License at
6 *
7 *     http://www.apache.org/licenses/LICENSE-2.0
8 *
9 * Unless required by applicable law or agreed to in writing, software
10 * distributed under the License is distributed on an "AS IS" BASIS,
11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 * See the License for the specific language governing permissions and
13 * limitations under the License.
14 */
15
16import { ScreenModeModel } from '../model/displayAndBrightnessImpl/display/ScreenMode';
17import LogUtil from '../../../../../../common/utils/src/main/ets/default/baseUtil/LogUtil';
18import Log from '../../../../../../common/utils/src/main/ets/default/baseUtil/LogDecorator';
19import { BaseData } from '../../../../../../common/utils/src/main/ets/default/bean/BaseData';
20import ConfigData from '../../../../../../common/utils/src/main/ets/default/baseUtil/ConfigData';
21import HeadComponent from '../../../../../../common/component/src/main/ets/default/headComponent';
22
23/**
24 * ScreenMode setting
25 */
26@Entry
27@Component
28struct ScreenMode {
29  @StorageLink('supportedScreenModes') supportedScreenModes: Object[] = [];
30  @State screenModeModel: ScreenModeModel = new ScreenModeModel();
31  private TAG = ConfigData.TAG + 'ScreenMode ';
32
33  build() {
34    Column() {
35      GridContainer({ gutter: ConfigData.GRID_CONTAINER_GUTTER_24, margin: ConfigData.GRID_CONTAINER_MARGIN_24 }) {
36        Column() {
37          HeadComponent({ headName: $r('app.string.screenResolution'), isActive: true });
38
39          Text($r('app.string.screenResolutionWarning'))
40            .fontSize($r("sys.float.ohos_id_text_size_body2"))
41            .fontColor($r('sys.color.ohos_id_color_text_secondary'))
42            .fontWeight(FontWeight.Regular)
43            .textAlign(TextAlign.Start)
44            .margin({ top: $r('app.float.distance_24'), bottom: $r('app.float.distance_24') })
45            .padding({ left: $r('app.float.wh_value_12'), right: $r('app.float.wh_value_12') })
46            .width(ConfigData.WH_100_100)
47
48          List() {
49            ForEach(this.supportedScreenModes, (item: BaseData,index?:number) => {
50              ListItem() {
51                Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
52                  Text(`${this.screenModeModel.getScreenModeWidth(item)} x ${this.screenModeModel.getScreenModeHeight(item)}`)
53                    .fontColor($r('sys.color.ohos_id_color_text_primary'))
54                    .fontSize($r("app.float.font_16"))
55                    .lineHeight($r("app.float.lineHeight_22"))
56                    .fontWeight(FontWeight.Medium)
57                    .margin({ top: $r('app.float.distance_8'), bottom: $r("app.float.distance_8") })
58                    .textAlign(TextAlign.Start);
59
60                  Radio({ value: this.TAG, group: '' })
61                    .height($r("app.float.wh_value_24"))
62                    .width($r("app.float.wh_value_24"))
63                    .enabled(true)
64                    .checked(this.screenModeModel.isSysScreenMode(item))
65                    .margin({ top: $r("app.float.distance_12"), bottom: $r("app.float.distance_12"), right: $r("app.float.distance_12")})
66                    .onClick(() => {
67                      LogUtil.info('settings RadioListComponent : onChange: settingValue = ' + item.settingValue);
68                      this.screenModeModel.setSysScreenMode(index? index : 0);
69                    })
70                }
71                .height($r('app.float.wh_value_48'))
72                .width(ConfigData.WH_100_100)
73              }
74            }, (item: BaseData) => JSON.stringify(item));
75          }
76          .padding({
77            left: $r('app.float.wh_value_12'),
78            right: $r('app.float.wh_value_4'),
79            top: $r('app.float.distance_4'),
80            bottom: $r('app.float.distance_4')
81          })
82          .divider({ strokeWidth: $r('app.float.divider_wh'), color: $r("app.color.color_E3E3E3_grey") })
83          .borderRadius($r("app.float.radius_24"))
84          .backgroundColor($r("sys.color.ohos_id_color_foreground_contrary"));
85        }
86        .useSizeType({
87          sm: { span: 4, offset: 0 },
88          md: { span: 6, offset: 1 },
89          lg: { span: 8, offset: 2 }
90        })
91      }
92      .width(ConfigData.WH_100_100)
93      .height(ConfigData.WH_100_100)
94    }
95    .backgroundColor($r("sys.color.ohos_id_color_sub_background"))
96    .width(ConfigData.WH_100_100)
97    .height(ConfigData.WH_100_100)
98  }
99
100  aboutToAppear(): void{
101    LogUtil.info(this.TAG + 'aboutToAppear in');
102    this.screenModeModel.registerObserver();
103    LogUtil.info(this.TAG + 'aboutToAppear out');
104  }
105
106  aboutToDisappear(): void{
107    LogUtil.info(this.TAG + 'aboutToDisappear in');
108    this.screenModeModel.unregisterObserver();
109    LogUtil.info(this.TAG + 'aboutToDisappear out');
110  }
111}