1/*
2 * Copyright (c) 2023 Hunan OpenValley 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 Logger from '../../utils/Logger';
18import { getMockSearch } from '../../mock/MockData';
19import SearchComponent from '../../component/SearchComponent';
20import SearchResultComponent from '../../component/SearchResultComponent';
21
22const TAG: string = '[SearchPage]';
23
24@Entry
25@Component
26struct SearchPage {
27  private searchArr: Array<string> = getMockSearch();
28  @State inputValue: string = '';
29  @State isInput: boolean = false;
30  @State isShowResult: boolean = false;
31
32  pageTransition(){
33    // 登录页面从底部滑入滑出
34    PageTransitionEnter({ type: RouteType.Push, duration: 10 })
35      .slide(SlideEffect.Right)
36    PageTransitionExit({ type: RouteType.Pop, duration: 10 })
37      .slide(SlideEffect.Right)
38  }
39
40  build() {
41    Column() {
42      Row() {
43        Row() {
44          Image($r('app.media.app_icon'))
45            .width(22)
46            .height(22)
47            .objectFit(ImageFit.Contain)
48        }
49        .id('searchBack')
50        .width(50)
51        .height('100%')
52        .justifyContent(FlexAlign.Center)
53        .onClick(e => {
54          Logger.info(TAG, `ic_cancel_cir onClick`);
55          // 如果在搜索结果界面，则返回至搜索界面
56          if (this.isShowResult) {
57            this.isShowResult = false;
58          }else {
59            // 在搜索界面直接返回上一级页面
60            router.back();
61          }
62        })
63
64        Row() {
65          Image($r('app.media.app_icon'))
66            .width(24)
67            .height(24)
68            .margin({ left: 10, right: 10 })
69            .objectFit(ImageFit.Contain)
70          TextInput({ placeholder: this.searchArr[0], text: this.inputValue })
71            .width('75%')
72            .height('80%')
73            .placeholderColor($r('app.color.COLOR_99F1F3F5'))
74            .fontColor($r('app.color.COLOR_FFFFFF'))
75            .padding({ left: 0 })
76            .onChange(value => {
77              Logger.info(TAG, `TextInput onChange value= ${value}`);
78              this.inputValue = value;
79              if (this.inputValue) {
80                this.isInput = true;
81              } else {
82                this.isInput = false;
83              }
84            })
85
86          Row() {
87            Image(this.isInput ? $r('app.media.app_icon') : $r('app.media.app_icon'))
88              .width(24)
89              .height(24)
90              .margin({ left: 10, right: 10 })
91              .objectFit(ImageFit.Contain)
92              .opacity(0.8)
93          }
94          .width(50)
95          .height('100%')
96          .onClick(e => {
97            Logger.info(TAG, `ic_cancel_cir onClick`);
98            if (this.inputValue) {
99              this.inputValue = '';
100            }
101          })
102        }
103        .width('75%')
104        .height('65%')
105        .backgroundColor($r('app.color.COLOR_393939'))
106        .borderRadius(4)
107
108        Column(){
109          Text($r('app.string.Search'))
110            .fontColor($r('app.color.COLOR_E3163D'))
111            .fontSize(18)
112            .fontFamily($r('app.string.Font_family_medium'))
113            .textAlign(TextAlign.Center)
114        }
115        .width(64)
116        .height('100%')
117        .alignItems(HorizontalAlign.Center)
118        .justifyContent(FlexAlign.Center)
119        .onClick(e=>{
120          this.isShowResult = true;
121        })
122      }
123      .width('100%')
124      .height('10%')
125      .backgroundColor($r('app.color.COLOR_151724'))
126
127      Column() {
128        if (this.isShowResult){
129          // 搜索结果界面
130          SearchResultComponent({ inputSearch: this.inputValue })
131        }else{
132          // 搜索界面
133          SearchComponent({inputValue: $inputValue, isShowResult: $isShowResult})
134        }
135      }
136      .width('100%')
137      .height('90%')
138    }
139    .width('100%')
140    .height('100%')
141    .backgroundColor($r('app.color.COLOR_151724'))
142  }
143}