1/*
2 * Copyright (c) 2023 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 { Action } from '@ohos/common/src/main/ets/default/redux/actions/Action'
17import { EventBus } from '@ohos/common/src/main/ets/default/worker/eventbus/EventBus'
18import { EventBusManager } from '@ohos/common/src/main/ets/default/worker/eventbus/EventBusManager'
19import { Dispatch, OhCombinedState } from '@ohos/common/src/main/ets/default/redux/store'
20import { getStore } from '@ohos/common/src/main/ets/default/redux/store'
21import { Log } from '@ohos/common/src/main/ets/default/utils/Log'
22import { SettingManager } from '@ohos/common/src/main/ets/default/setting/SettingManager'
23import { TabletSettingItem } from '@ohos/common/src/main/ets/default/featurecommon/settingview/tablet/TabletSettingItem'
24import { SettingListModel } from '@ohos/common/src/main/ets/default/featurecommon/settingview/model/SettingListModel'
25import { SettingGroupItem } from '@ohos/common/src/main/ets/default/featurecommon/settingview/model/SettingData'
26import { BaseData } from '@ohos/common/src/main/ets/default/featurecommon/settingview/model/BaseData'
27
28const DEFAULT_FUNCTION = () => {
29}
30
31class StateStruct {
32  isCloseFlag: boolean = false;
33  mode: string = '';
34  zoomRatio: number = 0;
35}
36
37class SettingViewDispatcher {
38  private mDispatch: Dispatch = (data) => data;
39
40  public setDispatch(dispatch: Dispatch) {
41    this.mDispatch = dispatch;
42  }
43
44  public closeDialog(isCloseFlag: boolean): void {
45    this.mDispatch(Action.closeDialog(isCloseFlag));
46  }
47
48  public hideSettingView(): void {
49    this.mDispatch(Action.showSettingView(false));
50  }
51
52  public changeXComponentSize(xComponentWidth: number, xComponentHeight: number): void {
53    this.mDispatch(Action.changeXComponentSize(xComponentWidth, xComponentHeight));
54  }
55
56  public assistiveGridView(isViewShow: number): void {
57    this.mDispatch(Action.assistiveGridView(isViewShow));
58  }
59
60  public reStartPreview(zoomRatio: number): void {
61    this.mDispatch(Action.reStartPreview(zoomRatio));
62  }
63
64  public showBlur(): void {
65    this.mDispatch(Action.uiState(false));
66  }
67
68  public resetZoomRatio(): void {
69    this.mDispatch(Action.changeZoomRatio(1));
70  }
71}
72
73interface LocalStyleType {
74  columns: number
75  offset: number
76  span: number
77}
78
79interface PositionData {
80  width: number;
81  height: number;
82}
83
84@Component
85export struct SettingView {
86  private TAG: string = '[SettingView]:'
87  private settingManager = SettingManager.getInstance()
88  private scroller: Scroller = new Scroller();
89  @State checkNameList: Array<string> = ['4:3', '[16:9] 720p']
90  @State closeFlag: boolean = false
91  @State tempGutter: number = 12; //列间距
92  @State tempMargin: number = 12; //两侧间距
93  @State settingsList: SettingGroupItem[] = new SettingListModel().getSettingList();
94  @State state: StateStruct = new StateStruct()
95  @State localStyle: LocalStyleType = { columns: 12, offset: 2, span: 8 }
96  private WH_100_100: string = "100%";
97  private mEventBus: EventBus = EventBusManager.getInstance().getEventBus()
98  private mAction: SettingViewDispatcher = new SettingViewDispatcher();
99
100  aboutToAppear(): void{
101    Log.info(`${this.TAG} aboutToAppear invoke E`)
102    getStore().subscribe((state: OhCombinedState) => {
103      this.state = {
104        isCloseFlag: state.settingReducer.isCloseFlag,
105        mode: state.modeReducer.mode,
106        zoomRatio: state.zoomReducer.zoomRatio
107      };
108    }, (dispatch: Dispatch) => {
109      this.mAction.setDispatch(dispatch);
110    });
111
112    this.mEventBus.on('windowSize', (data: PositionData) => this.windowSizeChange(data));
113    this.mEventBus.on('AspectRatio', (data: PositionData) => this.aspectRatioChange(data));
114    this.mEventBus.on('Resolution', (data: PositionData) => this.resolutionChange(data));
115    this.mEventBus.on('AssistiveGrid', (data: number) => this.assistiveGridChange(data));
116    Log.info(`${this.TAG} aboutToAppear invoke X`);
117  }
118
119  aboutToDisappear(): void {
120    Log.info(`${this.TAG} aboutToDisappear E`);
121    this.mEventBus.off('AspectRatio', (data: PositionData) => this.aspectRatioChange(data));
122    this.mEventBus.off('Resolution', (data: PositionData) => this.resolutionChange(data));
123    this.mEventBus.off('AssistiveGrid', (data: number) => this.assistiveGridChange(data));
124  }
125
126  onBackPress(): boolean {
127    Log.info(`${this.TAG} onBackPress invoke X`)
128    if (this.state.isCloseFlag){
129      this.closeFlag = !this.closeFlag
130    } else {
131      this.mAction.hideSettingView()
132    }
133    return true;
134  }
135
136  private windowSizeChange(data: PositionData): void {
137    this.localStyle = (data.width >= px2vp(1280)) ? { columns: 12, offset: 2, span: 8 } :
138      { columns: 8, offset: 1, span: 6 };
139  }
140
141  private aspectRatioChange(xComponentSize: PositionData): void {
142    if (this.state.mode != 'VIDEO') {
143      this.mAction.changeXComponentSize(xComponentSize.width, xComponentSize.height)
144      this.mAction.reStartPreview(this.state.zoomRatio)
145    }
146  }
147
148  private resolutionChange(xComponentSize: PositionData): void {
149    if (this.state.mode == 'VIDEO') {
150      this.mAction.changeXComponentSize(xComponentSize.width, xComponentSize.height)
151      this.mAction.reStartPreview(this.state.zoomRatio)
152    }
153  }
154
155  private assistiveGridChange(mAssistiveGrid: number): void {
156    this.mAction.assistiveGridView(mAssistiveGrid)
157  }
158
159  build() {
160    Column() {
161      Row() {
162        Image($r('app.media.ic_public_back'))
163          .width(24)
164          .height(24)
165          .fillColor($r('app.color.settings_ic_public_back_FFFFFF'))
166          .onClick(() => {
167            this.mAction.hideSettingView()
168          })
169        Text($r('app.string.settings'))
170          .margin({ left: $r('sys.float.ohos_id_elements_margin_horizontal_l') })
171          .fontColor($r('app.color.settings_ic_public_back_FFFFFF'))
172          .fontSize($r('sys.float.ohos_id_text_size_headline8'))
173          .fontWeight(FontWeight.Medium)
174      }
175      .width(this.WH_100_100)
176      .height(56)
177      .margin({ left: 48 })
178
179      Scroll(this.scroller) {
180        Column() {
181          GridContainer({ columns: this.localStyle.columns, gutter: this.tempGutter, margin: this.tempMargin }) {
182            Row() {
183              Column() {
184                List() {
185                  ForEach(this.settingsList, (item: SettingGroupItem, index: number) => {
186                    ListItem() {
187                      TabletSettingItem({
188                        settingsList: $settingsList,
189                        closeFlag: $closeFlag,
190                        item: item,
191                        index: index
192                      })
193                    }
194                  })
195                }
196              }.useSizeType({
197                xs: { span: this.localStyle.span, offset: this.localStyle.offset },
198                sm: { span: this.localStyle.span, offset: this.localStyle.offset },
199                md: { span: this.localStyle.span, offset: this.localStyle.offset },
200                lg: { span: this.localStyle.span, offset: this.localStyle.offset }
201              })
202            }
203          }
204
205          GridContainer({ columns: 12, gutter: this.tempGutter, margin: this.tempMargin }) {
206            Row() {
207              Button({ type: ButtonType.Normal, stateEffect: true }) {
208                Text($r('app.string.restore_defaults'))
209                  .fontSize($r('sys.float.ohos_id_text_size_button1'))
210                  .fontColor($r('app.color.font_color_FFFFFF'))
211                  .fontWeight(FontWeight.Regular)
212                  .textAlign(TextAlign.Center)
213              }
214              .borderRadius(30)
215              .backgroundColor($r('app.color.background_color_333333'))
216              .height(40)
217              .useSizeType({
218                xs: { span: 4, offset: 4 },
219                sm: { span: 4, offset: 4 },
220                md: { span: 4, offset: 4 },
221                lg: { span: 4, offset: 4 }
222              })
223              .onClick(() => {
224                this.mAction.showBlur()
225                this.settingManager.restoreValues(this.state.mode)
226                this.mAction.resetZoomRatio()
227                this.mAction.hideSettingView()
228              })
229            }.margin({ top: $r('sys.float.ohos_id_text_paragraph_margin_l') , bottom: 70 })
230          }
231        }
232      }
233      .scrollable(ScrollDirection.Vertical)
234      .scrollBar(BarState.Off)
235    }
236    .height(this.WH_100_100)
237    .backgroundColor(Color.Black)
238  }
239}