1/*
2 * Copyright (c) 2024 Shenzhen Kaihong Digital Industry Development 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 router from '@ohos.router';
17import { SecondLevelCategory, ThirdLevelCategory, FourthLevelCategory } from '../model/CategoricalDataType';
18
19@Extend(Column)
20function ColumnStyle() {
21  .width('100%')
22  .borderRadius(24)
23  .backgroundColor(Color.White)
24  .padding({ left: 12, right: 12, bottom: 4, top: 4 })
25}
26
27@Component
28export struct TabContentNavigation {
29  private categories: ThirdLevelCategory[] | SecondLevelCategory[] = new Array<ThirdLevelCategory>();
30
31  hasSecondLevelCategory(category: ThirdLevelCategory | SecondLevelCategory): boolean {
32    return category && category.image ? false : true;
33  }
34
35  build() {
36    Column() {
37      List() {
38        if (this.hasSecondLevelCategory(this.categories[0])) {
39          ForEach(this.categories, (secondLevelCategory: SecondLevelCategory, secondLevelCategoryIndex: number) => {
40            ListItem() {
41              Column() {
42                Text(secondLevelCategory.title)
43                  .height(48)
44                  .fontSize(14)
45                  .width('100%')
46                  .textAlign(TextAlign.Start)
47                  .fontFamily('HarmonyHeiTi-Medium')
48                  .fontColor($r('app.color.font_color_shallow'))
49                  .padding({ bottom: 4, top: 4, left: 24 })
50
51                Column() {
52                  ForEach(secondLevelCategory.childNodes, (thirdLevelCategory: ThirdLevelCategory,
53                                                           thirdLevelCategoryIndex: number) => {
54                    ThirdLevelNavigation({
55                      thirdLevelCategory: thirdLevelCategory,
56                      secondLevelCategoryIndex: secondLevelCategoryIndex,
57                      ThirdLevelNavigationIndex: thirdLevelCategoryIndex
58                    })
59                  })
60                }
61                .ColumnStyle()
62              }
63            }
64            .id('ListItem' + secondLevelCategoryIndex)
65          })
66        } else {
67          ForEach(this.categories, (thirdLevelCategory: ThirdLevelCategory) => {
68            ListItem() {
69              Column() {
70                ThirdLevelNavigation({ thirdLevelCategory: thirdLevelCategory })
71              }
72              .ColumnStyle()
73            }
74            .margin({ top: 6, bottom: 6 })
75          })
76        }
77      }
78      .width('100%')
79      .layoutWeight(1)
80      .padding({ left: 16, right: 16, top: 4 })
81      .id('list_001')
82
83      Blank()
84    }
85    .height('100%')
86    .padding({ top: 12 })
87  }
88}
89
90@Component
91struct ThirdLevelNavigation {
92  @State isUnfold: boolean = false;
93  private thirdLevelCategory!: ThirdLevelCategory;
94  private ThirdLevelNavigationIndex: number = 0;
95  private secondLevelCategoryIndex: number = 0;
96
97  build() {
98    Column() {
99      Row() {
100        Image(this.thirdLevelCategory.image)
101          .width(24)
102          .height(24)
103          .objectFit(ImageFit.Fill)
104
105        Text(this.thirdLevelCategory.title)
106          .fontSize(16)
107          .margin({ left: 16 })
108          .fontFamily('HarmonyHeiTi-Medium')
109          .fontColor($r('app.color.font_color_dark'))
110
111        Blank()
112
113        if (this.thirdLevelCategory.childNodes) {
114          Image(this.isUnfold ? $r('app.media.ic_down_arrow') : $r('app.media.ic_right_arrow'))
115            .width(this.isUnfold ? 24 : 12)
116            .height(this.isUnfold ? 12 : 24)
117            .margin({ right: this.isUnfold ? 0 : 6 })
118        }
119      }
120      .height(56)
121      .width('100%')
122      .onClick(() => {
123        if (this.thirdLevelCategory.childNodes === undefined) {
124          // Click to jump to the corresponding page
125          if (this.thirdLevelCategory.url) {
126            router.pushUrl({
127              url: this.thirdLevelCategory.url
128            })
129          }
130        } else {
131          this.isUnfold = !this.isUnfold
132        }
133      })
134
135      // Click to expand the fourth-level category
136      if (this.isUnfold) {
137        ForEach(this.thirdLevelCategory.childNodes, (fourthLevelCategory: FourthLevelCategory) => {
138          Column() {
139            Divider()
140              .height(1)
141              .opacity(0.2)
142              .margin({ left: 42, right: 8 })
143              .color($r('app.color.font_color_dark'))
144
145            FourthLevelNavigation({ fourthLevelCategory: fourthLevelCategory })
146          }
147        })
148      }
149    }
150    // 整体字符串折行会被识别出来，导致功能异常，只能放在单独一行，1和0分别为首页标题层级index
151    .id(`secondLevelMenu${this.secondLevelCategoryIndex}${this.secondLevelCategoryIndex === 1 ? 0 : this.ThirdLevelNavigationIndex}`)
152  }
153}
154
155@Component
156struct FourthLevelNavigation {
157  private fourthLevelCategory!: FourthLevelCategory;
158
159  build() {
160    Row() {
161      Text(this.fourthLevelCategory.title)
162        .fontSize(16)
163        .layoutWeight(1)
164        .margin({ left: 42 })
165        .align(Alignment.Start)
166        .fontFamily('HarmonyHeiTi-Medium')
167        .fontColor($r('app.color.font_color_dark'))
168      Blank()
169    }
170    .height(48)
171    .width('100%')
172    .onClick(() => {
173      // Click to jump to the corresponding page
174      router.pushUrl({
175        url: this.fourthLevelCategory.url
176      })
177    })
178  }
179}
180