import React, { PureComponent } from 'react';
import SearchHeader from './searchHead'
import VList from '@/common/VList'
import { http, api, getParam } from '@/utils'
import './search-result.scss'
import Recommendation from './recommendation'

const Bottom = ({item}) => {
    return (
        <div className='bottom'>
            <span className='price'>¥{item.price1}</span>
            <span className='stale-price'>¥{item.price0}</span>
        </div>
    )
}

class SearchResult extends PureComponent {

    state = {
        courseList: [],
        value: '',
        searchHistory: JSON.parse(localStorage.getItem('searchHistory')) || []
    }

    componentDidMount() {
        this.getCourses(getParam('word'))
    }


    getCourses = (word) => {
        http.get(`${api['search-api']}/search/${word}?type=course&page=1`)
            .then(res => {
                const data = res.data

                if (data.errno === 0) {
                    this.setState({
                        courseList: data.data.info['search_data'].course
                    });
                }
            })
    }

    handleClick = id => {
        this.props.history.push(`/detail?id=${id}`)
    }

    handleSearch = () => {
        this.state.value && this.getCourses(this.state.value)
    }

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


    render() {
        const {courseList} = this.state

        return (
            <div className='search-result'>
                <SearchHeader
                    handleSearch={this.handleSearch}
                    value={this.state.value}
                    handleChange={this.handleChange}
                    searchHistory={this.state.searchHistory}
                />
                {

                    courseList && courseList.length > 0 ?
                        <ul>
                            {
                                courseList.map(item => {
                                    const Info = (
                                        <div className="info">
                                            <p className='title'>{item.course_title}</p>
                                            <p className='des'>{item.simpledescription}</p>
                                            <Bottom
                                                item={item}
                                            />
                                        </div>
                                    )
                                    const status = (
                                        (item['bargain_num'] || item['groupon_num']) ?
                                            <div
                                                className='status'>
                                                {
                                                    item['bargain_num'] === 0 ? `砍价减${item['groupon_num']}元` : `拼团减${item['bargain_num']}元`
                                                }
                                            </div>
                                            : null
                                    )
                                    return (
                                        <VList img={item.image_name}
                                               handleClick={this.handleClick}
                                               key={item.course_id}
                                               info={Info}
                                               id={item['course_id']}
                                               status={status}
                                        />
                                    )
                                })
                            }
                        </ul>
                        : <div className="empty">
                            抱歉！没有搜到相关内容
                        </div>

                }
                <Recommendation/>
            </div>
        );
    }
}


export default SearchResult;