import React, { Component } from 'react';
import SearchHead from './searchHead'
import Tag from '@common/Tag/index.js'

import './index.scss';


class Search extends Component {
    constructor(props) {
        super(props);
        this.state = {
            history: JSON.parse(localStorage.getItem('history')) || [],
            searchHot: ['rec', '电脑', '照片扫描仪', '智能手表', '功夫茶杯', '广角镜头手机'],
            searchList: []
        }
    }
    render() {
        let querystring = this.props.location.query ? this.props.location.query.s : '';
        return (
            <div className="search-page">
                <SearchHead value={querystring} returnbtn={true} ></SearchHead>
                <div className="search-main">
                    <div className="search-land search-history">
                        <label>
                            <span>最近搜索</span>
                            <i className="iconfont iconiconfront-56" onClick={() => {
                                this.removeHistory()
                            }} >
                            </i>
                        </label>
                        <div className="search-tag">
                            {
                                this.state.history.length > 0 ?
                                    this.state.history.map((v, i) => {
                                        return (<Tag key={i} onClick={() => {
                                            this.gotoList(v)
                                        }}>{v}</Tag>)
                                    })
                                    : <div style={{ textAlign: 'center', padding: '20px' }}>暂无历史</div>
                            }
                        </div>
                    </div>
                    <div className="search-land search-hot">
            <label>
            <span>热门搜索</span>
            </label>
              <div className="search-tag">
                {
                  this.state.searchHot.length>0?
                  this.state.searchHot.map((v,i)=>{
                    return (<Tag key={i} onClick={()=>{
                      this.gotoList(v)
                    }}>{v}</Tag>)
                  })
                  :<div style={{textAlign:'center',padding:'20px'}}>暂无热门</div>
                }
              </div>
            </div>
          </div>
               
          </div>
        )
    }

}

export default Search;