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';
import router from '../../router/index';
import Yas from '../../utils/yas';

let yas;

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

	config = {
		navigationBarTitleText: '搜索'
	}

	componentWillMount() {
	  yas = new Yas(this.$scope);
    yas.pageOpenReport();
  }

	componentDidMount () {
		const list = Taro.getStorageSync('latelySearch');
		console.log(list);
		this.setState({
			latelySearch: list || []
		})
		searchModel.getSearchWord().then(ret => {
			if (ret && ret.code === 200) {
				this.setState({
					hotSearch: ret.data || []
				});
			}
		})
	}

	componentDidShow() {
		const list = Taro.getStorageSync('latelySearch');
		this.setState({
			latelySearch: list || []
		})
	}

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

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

	onComplate(e) {
		if (e.detail.value === '') {
			return;
		}
		this.saveLateSearch(e);
		router.go('productList', {
				query: e.detail.value
		});
	}

	saveLateSearch(e) {
		const latelySearch = this.state.latelySearch;
		if (latelySearch.length >= 10) {
			latelySearch.pop();
		}
    let setList = this.removeSameSearch(latelySearch, e.detail.value);
    setList.unshift({search_word: e.detail.value});
    try {
      Taro.setStorageSync('latelySearch', setList);
		} catch (error) {
			console.log(error);
		}
		// this.setState({
		// 	latelySearch
		// })
	}

  removeSameSearch(arr, search_word) {
    let hash = [];
    for (var i = 0; i < arr.length; i++) {
      if (arr[i].search_word !== search_word) {
        hash.push(arr[i]);
      }
    }
    return hash;
  }

	onRemoveAllSearch() {
		try {
			Taro.setStorageSync('latelySearch', []);
		} catch (error) {
			console.log(error);
		}
		this.setState({
			latelySearch: []
		})
	}

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

		return (
			<View>
				<View className='search-out-box'>
						<SearchBar onComplate={this.onComplate} value={value}></SearchBar>
				</View>

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

					{
						latelySearch.length > 0 &&
						<View className='latelySearch'>
							<SearchItem title={latelySearchTitle} list={latelySearch} isSearch={true} onRemoveAllSearch={this.onRemoveAllSearch}></SearchItem>
						</View>
					}
					{
						hotSearch.length > 0 &&
						<View className={latelySearch.length > 0 ? '' : 'hotSearch'}>
							<SearchItem title={hotSearchTitle} list={hotSearch} ></SearchItem>
						</View>
					}
			</ScrollView>
			</View>
		)
	}
}