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


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: []
    }

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

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

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

        return (
            <div className='search-result'>
                <SearchHeader/>
                <ul>
                    {

                        courseList && courseList.length > 0 ?
                            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>
                                )
                                return (
                                    <VList img={item.image_name}
                                           handleClick={this.handleClick}
                                           key={item.course_id}
                                           info={Info}/>
                                )
                            }) : null
                    }

                </ul>
            </div>
        );
    }
}

export default SearchResult;