import Taro, { Component } from '@tarojs/taro';
import { View, Text} from '@tarojs/components';
import { SearchItem, SearchBar, PageTitle } from '../../components';
import {search as searchModel} from '../../models';
import './index.scss';

export default class Search extends Component {
	constructor() {
		super(...arguments);
		this.state = {
			hotSearch: [],
			latelySearch: [],
			hotSearchTitle: '热门推荐',
			latelySearchTitle: '最近搜索',
			fixed: false
		};
	}

	config = {
		navigationBarTitleText: '搜索'
	}

	componentDidMount () {
		searchModel.getSearchWord().then(ret => {
			if (ret && ret.code === 200) {
				this.setState({
					hotSearch: ret.data || []
				});
			}
		})
	}

	onScroll(e) {
		if (e.detail.scrollTop > 48) {
			this.setState({
				fixed: true
			});
		} else {
			this.setState({
				fixed: false
			});
		}
	}

	onScrolltoupper() {
		this.setState({
			fixed: false
		});
	}

	render () {
		let {hotSearchTitle, hotSearch, latelySearchTitle, latelySearch} = this.state;

		return (
			<ScrollView
				className='search-page'
				scrollY
				scrollWithAnimation
				scrollTop='0'
				lowerThreshold='20'
				upperThreshold='20'
				onScrolltoupper={this.onScrolltoupper}
				onScroll={this.onScroll}>
				<PageTitle pageTitle="搜索"></PageTitle>

				<View className={this.fixed ? 'fixed search-out-box' : 'search-out-box'}>
					<SearchBar></SearchBar>
				</View>

				{
					latelySearch.length > 0 &&
					<SearchItem title={latelySearchTitle} list={latelySearch}></SearchItem>
				}
				{
					hotSearch.length > 0 &&
					<SearchItem title={hotSearchTitle} list={hotSearch} ></SearchItem>
				}
			</ScrollView>
		)
	}
}