import React, { PureComponent } from 'react';
import SearchHead from './searchHead'
import Tag from '@common/Tag/index.js'
import { http } from '@/utils'
import './index.scss';
import { Link } from 'react-router-dom'
import Loading from '@/common/Loading'


class Search extends PureComponent {

    state = {
        searchHistory: JSON.parse(localStorage.getItem('searchHistory')) || [],
        hot_words: [],
        searchList: [],
        value: '',
        isLoading: true
    }

    async componentDidMount() {
        const res = await http.get(`${API['search-api']}/search_hot_word`)
        if (res.data.errno === 0) {
            this.setState({
                hot_words: res.data.data.info.hot_words,
                isLoading: false
            })
        }
    }

    clearHistory = () => {
        localStorage.setItem('searchHistory', null)
        this.setState({
            searchHistory: []
        })
    }

    handleChange = value => {
        this.setState({value})
    }

    handleSearch = () => {
        this.state.value && this.props.history.push(`/search-result?word=${encodeURIComponent(this.state.value)}`)
    }

    storeHistory = keyword => {
        localStorage.setItem('searchHistory', JSON.stringify([...this.state.searchHistory, keyword]))
    }


    render() {
        const {searchHistory} = this.state
        return (
            <div className="search-page">
                <SearchHead
                    searchHistory={this.state.searchHistory}
                    value={this.state.value}
                    handleChange={this.handleChange}
                    handleSearch={this.handleSearch}
                />
                <Loading isLoading={this.state.isLoading}>
                    <div className="search-main">
                        <div className="search-land">
                            <div className='search-history'>
                                <span>最近搜索</span>
                                <i className="iconfont iconiconfront-56" onClick={this.clearHistory}/>
                            </div>
                            <div className="search-tag">
                                {
                                    searchHistory.length > 0 ?
                                        searchHistory.map((v, i) => {
                                            return (
                                                <Link
                                                    key={i}
                                                    to={`/search-result?word=${encodeURIComponent(v)}`}
                                                >
                                                    <Tag name={"tagLately"}>{v}</Tag>
                                                </Link>
                                            )
                                        })
                                        : <div className={'no_search_history'} style={{textAlign: 'center', padding: '20px'}}>暂无历史</div>
                                }
                            </div>
                        </div>
                        <div className="search-land search-hot">
                            <label className={'search-history'}>
                                <span>热门搜索</span>
                            </label>
                            <div className="search-tag">
                                {
                                    this.state['hot_words'].length > 0 ?
                                        this.state['hot_words'].map((v, i) => {
                                            return (
                                                <Link key={i}
                                                      to={`/search-result?word=${encodeURIComponent(v)}`}
                                                      onClick={this.storeHistory.bind(this, v)}
                                                >
                                                    <Tag name={"tagHot"}>{v}</Tag>
                                                </Link>
                                            )
                                        })
                                        : <div style={{textAlign: 'center', padding: '20px'}}>暂无热门</div>
                                }
                            </div>
                        </div>
                    </div>
                </Loading>

            </div>
        )
    }

}

export default Search;