Deer/features/feature/src/main/ets/pages/BookSearchPage.ets

import { YTAvoid, YTHeader } from 'basic'
import { DeerSearch } from '../components/DeerSearch'
import { CustomTextStyle } from '../style/CustomTextStyle'
import { LengthMetrics, PersistenceV2 } from '@kit.ArkUI'
import { HistoryStorage } from '../model/Storage'

// 书籍搜索页面
@ComponentV2
struct BookSearchPage {
  @Local safeBottom: number = AppStorage.get(YTAvoid.SAFE_BOTTOM_KEY) as number

  searHistory: HistoryStorage = PersistenceV2.connect(HistoryStorage, () => new HistoryStorage())!

  // 清空历史记录
  clearHistory() {
    this.searHistory.history = []
  }

  // 开始搜索
  onSearch(text: string) {
    let key = text

    console.log('开始搜索searchKey: ' + key)
  }

  build() {
    NavDestination() {
      Column() {
        YTHeader({ defaultStyle: { title: '搜索' } })

        Column(){
          List(){
            ListItem(){
              DeerSearch({
                onSearch: this.onSearch,
              })
            }
            .margin({top: 14})

            ListItem(){
              Row(){
                Text('搜索历史')
                  .attributeModifier(new CustomTextStyle({ size: 12, weight: 600 }))

                Image($r('[basic].media.icon_trashCan'))
                  .width(24)
                  .aspectRatio(1)
                  .onClick(() => { this.clearHistory() })
              }
              .width("100%")
              .alignItems(VerticalAlign.Center)
              .justifyContent(FlexAlign.SpaceBetween)
            }
            .margin({top: 16})

            ListItem(){
              Flex({wrap: FlexWrap.Wrap, space: { cross: new LengthMetrics(9), main: new LengthMetrics(6)}}) {
                ForEach(this.searHistory.history, (item: string, index) => {
                  Text(item)
                    .borderRadius(13)
                    .backgroundColor('rgba(0, 0, 0, 0.04)')
                    .padding({left: 11, top: 6, right: 11, bottom: 6})
                    .attributeModifier(new CustomTextStyle({ size: 12, weight: 400, color: 'rgba(0, 0, 0, 0.5)' }))
                    .onClick(() => { this.onSearch(item) })
                })
              }
              .width("100%")
            }
            .margin({top: 4})

            ListItem(){
              Scroll(){
                Row({space: 15}){
                  ForEach(['热门搜索', '主体分类'], (item: string, index) => {
                    Column(){
                      Row({space: 8}){
                        Image(index == 0 ?
                        $r('[basic].media.icon_SearchHot') :
                        $r('[basic].media.icon_SearchClassify')
                        )
                          .width(24)
                          .aspectRatio(1)

                        Text(item)
                      }

                      Divider()
                        .height(2)
                        .backgroundColor('#f1f1f1')
                        .width('90%')
                        .margin({left: 15, top: 13, bottom: 13})

                      ForEach(new Array(20).fill(''), (item: string, index) => {
                       Row({space: 5}){
                         Text(`${index<9?' ':''}${index+1}`)
                           .attributeModifier(new CustomTextStyle({ size: 14, weight: 400, color: index < 3 ? '#FFFC3636' : '#FF000000'}))

                         Text('西游记')
                           .attributeModifier(new CustomTextStyle({ size: 14, weight: 400, color: index < 3 ? '#FF000000' : '#80000000'}))
                       }
                       .width('100%')
                       .margin({top: 12})
                       .justifyContent(FlexAlign.Start)
                        .onClick(() => { this.onSearch('西游记') })
                      })
                    }
                    .width(230)
                    .borderRadius(8)
                    .alignItems(HorizontalAlign.Start)
                    .border({width: 2, color: '#000000'})
                    .padding({left: 10, right: 10, top: 13, bottom: 13})
                  })
                }
              }
              .scrollBar(BarState.Off)
              .scrollable(ScrollDirection.Horizontal)
            }
            .margin({top: 20})

            ListItem()
              .height(this.safeBottom)
          }
          .width('100%')
          .height('100%')
          .scrollBar(BarState.Off)
        }
        .width('100%')
        .layoutWeight(1)
        .padding({ left: 16, right: 16 })
      }
      .width('100%')
      .height('100%')
      .backgroundColor('#F7F8FA')
      .justifyContent(FlexAlign.Start)
      .alignItems(HorizontalAlign.Start)
    }
    .hideTitleBar(true)
  }

}

@Builder
function BookSearchBuilder() {
  BookSearchPage()
}