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 deviceInfo from '@ohos.deviceInfo';
17
18import { Action } from '../../../redux/actions/Action';
19import { Log } from '../../../utils/Log';
20import { Dispatch, OhCombinedState } from '../../../redux/store';
21import { getStore } from '../../../redux/store';
22import EntryComponent from './EntryComponent';
23
24@Observed
25export class CustomDialogDetails {
26  confirmCallback: Function = () => {
27  };
28  confirmItem: boolean = false;
29  height: number = 0;
30  width: number = 0;
31  setAlias: string = '';
32  childrenList: ChildrenItemStruct[] = [];
33  settingTitle: string = '';
34}
35
36class StateStruct {
37}
38
39class CustomDialogViewDispatcher {
40  private mDispatch: Dispatch = (data) => data;
41
42  public setDispatch(dispatch: Dispatch) {
43    this.mDispatch = dispatch;
44  }
45
46  public closeDialog(isCloseFlag: boolean): void {
47    this.mDispatch(Action.closeDialog(isCloseFlag));
48  }
49}
50
51class ChildrenItemStruct {
52  itemValue: Resource = $r('app.string.photo_ratio_4_3');
53}
54
55class StyleStruct {
56  columns: number = 0;
57  offset: number = 0;
58}
59
60@CustomDialog
61export struct CustomDialogView {
62  private TAG: string = '[CustomDialogView]:'
63  localStyle: StyleStruct = { columns: 4, offset: 0 };
64  controller?: CustomDialogController;
65  cancel: () => void = () => {
66  };
67  confirm: () => void = () => {
68  };
69  @Consume customDialogDetails: CustomDialogDetails;
70  @State settingAlias: string = "";
71  @State getValue: string = "";
72  @State childrenList: Array<ChildrenItemStruct> = [];
73  @State state: StateStruct = new StateStruct();
74  private mAction: CustomDialogViewDispatcher = new CustomDialogViewDispatcher();
75
76  async aboutToAppear() {
77    Log.info(`${this.TAG} aboutToAppear start`)
78    this.childrenList = this.customDialogDetails.childrenList
79    Log.info(`${this.TAG} childrenList ${JSON.stringify(this.childrenList)}`)
80    getStore().subscribe((state: OhCombinedState) => {
81      this.state = {};
82    }, (dispatch: Dispatch) => {
83      this.mAction.setDispatch(dispatch);
84    });
85
86    this.settingAlias = this.customDialogDetails.setAlias
87    Log.info(`${this.TAG} aboutToAppear end`)
88  }
89
90  public onChange(): void {
91    Log.info(`${this.TAG} onChange start`)
92    this.mAction.closeDialog(false)
93    if (this.controller) {
94      this.controller.close()
95    }
96    this.cancel()
97    Log.info(`${this.TAG} onChange end`)
98  }
99
100  build() {
101    if (deviceInfo.deviceType == 'PAD' || deviceInfo.deviceType == 'tablet') {
102      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
103        Column() {
104          Row() {
105            Text(this.customDialogDetails.settingTitle)
106              .fontSize($r('sys.float.ohos_id_text_size_dialog_tittle'))
107              .fontColor('#E6000000')
108              .opacity(0.9)
109              .fontWeight(FontWeight.Medium)
110              .opacity($r('sys.float.ohos_id_alpha_content_primary'))
111          }
112          .width('100%')
113          .height(56)
114
115          List() {
116            ForEach(this.customDialogDetails.childrenList, (item: ChildrenItemStruct) => {
117              ListItem() {
118                EntryComponent({
119                  itemValue: item.itemValue,
120                  checkedValue: this.getValue,
121                  settingAlias: this.settingAlias,
122                  onChange: () => this.onChange()
123                })
124              }
125              .height(48)
126              .width('100%')
127            })
128          }
129          .listDirection(Axis.Vertical)
130          .divider({ strokeWidth: 0.5, color: '#33000000', startMargin: 0, endMargin: 12 }) // 每行之间的分界线
131          Column() {
132            Button({ type: ButtonType.Capsule, stateEffect: true }) {
133              Text($r('app.string.cancel'))
134                .fontSize($r('sys.float.ohos_id_text_size_sub_title2'))
135                .fontColor('#1095E8')
136                .fontWeight(FontWeight.Medium)
137                .height('100%')
138                .height('100%')
139            }
140            .width('100%')
141            .height('100%')
142            .backgroundColor('#00ffffff')
143            .onClick(() => {
144              this.mAction.closeDialog(false)
145              if (this.controller) {
146                this.controller?.close()
147              }
148            })
149          }
150          .height(56)
151          .width('100%')
152          .margin({ top: 8 }).padding({ bottom: '16vp' })
153        }
154        .width(394)
155        .margin({ left: '12vp', right: '12vp', bottom: '16vp' })
156        .backgroundColor(Color.White)
157        .padding({ left: '24vp', right: '24vp' })
158        .borderRadius($r('sys.float.ohos_id_corner_radius_default_xl'))
159      }
160    } else {
161      Flex({ justifyContent: FlexAlign.Center }) {
162        Column() {
163          Row() {
164            Text(this.customDialogDetails.settingTitle)
165              .fontSize($r('sys.float.ohos_id_text_size_dialog_tittle'))
166              .fontColor('#E6000000')
167              .opacity(0.9)
168              .fontWeight(FontWeight.Medium)
169              .opacity($r('sys.float.ohos_id_alpha_content_primary'))
170          }
171          .width('100%')
172          .height(56)
173
174          GridContainer({ columns: this.localStyle.columns, gutter: 12, margin: 12 }) {
175
176            List() {
177              ForEach(this.customDialogDetails.childrenList, (item: ChildrenItemStruct) => {
178                ListItem() {
179                  EntryComponent({
180                    itemValue: item.itemValue,
181                    checkedValue: this.getValue,
182                    settingAlias: this.settingAlias,
183                    onChange: () => this.onChange()
184                  })
185                }
186                .height(48)
187                .width('100%')
188              })
189            }
190            .listDirection(Axis.Vertical)
191            .divider({ strokeWidth: 0.5, color: '#33000000', startMargin: 0, endMargin: 12 }) // 每行之间的分界线
192            Column() {
193              Button({ type: ButtonType.Capsule, stateEffect: true }) {
194                Text($r('app.string.cancel'))
195                  .fontSize($r('sys.float.ohos_id_text_size_sub_title2'))
196                  .fontColor('#1095E8')
197                  .fontWeight(FontWeight.Medium)
198                  .height('100%')
199                  .height('100%')
200              }
201              .width('100%')
202              .height('100%')
203              .backgroundColor('#00ffffff')
204              .onClick(() => {
205                this.mAction.closeDialog(false)
206                if (this.controller) {
207                  this.controller?.close()
208                }
209              })
210            }
211            .height(56)
212            .width('100%')
213            .margin({ top: 8 }).padding({ bottom: '16vp' })
214          }
215          .width('96%')
216        }
217        .margin({ left: '12vp', right: '12vp', bottom: '16vp' })
218        .backgroundColor(Color.White)
219        .padding({ left: '24vp', right: '24vp' })
220        .borderRadius($r('sys.float.ohos_id_corner_radius_default_xl'))
221        .useSizeType({
222          xs: { span: 4, offset: this.localStyle.offset },
223          sm: { span: 4, offset: this.localStyle.offset },
224          md: { span: 4, offset: this.localStyle.offset },
225          lg: { span: 4, offset: this.localStyle.offset }
226        })
227      }
228    }
229  }
230}