1/*
2* Copyright (c) 2023 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 hilog from '@ohos.hilog';
17import testNapi from 'libentry.so';
18
19import { NAPI_SAMPLE_CATEGORIES } from '../data/CollectionCategory'
20import { FirstLevelCategory } from '../model/CategoricalDataType'
21import { TabContentNavigation } from '../common/TabContentNavigation'
22
23@Entry
24@Component
25struct Index {
26  @State tabsIndex: number = 0
27
28  build() {
29    Tabs({ barPosition: BarPosition.End }) {
30      ForEach(NAPI_SAMPLE_CATEGORIES, (item: FirstLevelCategory, index: number) => {
31        TabContent() {
32          TabContentNavigation({ categories: item.childNodes })
33        }
34        .tabBar(this.TabBarBuilder(index, item.selectedImage, item.unselectedImage, item.tabBarName))
35      })
36    }
37    .barHeight(56)
38    .barWidth('100%')
39    .vertical(false)
40    .backgroundColor($r('app.color.background_shallow_grey'))
41    .onChange((index: number) => {
42      this.tabsIndex = index
43    })
44  }
45
46  @Builder TabBarBuilder(index: number, selectedImage: Resource, unselectedImage: Resource, tabBarName: Resource) {
47    Column() {
48      Image(this.tabsIndex === index ? selectedImage : unselectedImage)
49        .width(24)
50        .height(24)
51        .margin({ bottom: 4 })
52
53      Text(tabBarName)
54        .fontSize(10)
55        .fontFamily('HarmonyHeiTi-Medium')
56        .fontColor(this.tabsIndex === index ? $r('app.color.tab_bar_select') : $r('app.color.tab_bar_unselect'))
57    }
58    .width('100%')
59    .padding({ top: 6, bottom: 6 })
60    .alignItems(HorizontalAlign.Center)
61    .id(`tabBar${index}`)
62  }
63}
64