import React, { Component } from 'react';
import { Button,Radio ,message,Row,Col, Spin,Pagination} from 'antd';
import axios from 'axios';
import './collection.less';

class Collection extends Component {
	constructor(props) {
		super(props);
		this.state = {
            loading:false,
            current:1,
            nub:'3'
        };
    }
    loadData(page,nub){
        this.setState({
            loading:true,
        })
        axios.get('https://www.apiopen.top/satinApi',{
            params:{
                type:1,
                page:page
            }
        })
        .then(data=>{
            let thisdata=data.data.data;
            this.setState({
                loading:false,
                thisdata:thisdata,
                total:100
            })
        })
        .catch(error=>{
            message(error.error)
        })
    }
    componentWillMount(){
        this.loadData()
    }
    tabFun(e){
       this.setState({ nub: e.target.value })
       this.loadData(1,e.target.value)
    }
    //分页
    onShowSizeChange(current, pageSize){
        this.setState({
            current:current,
            pageSize:pageSize
        })
        this.loadData(current);
    }
    jump(item){
        console.log(item);
    }
	render() {
        const thisdata =this.state.thisdata || [];
        thisdata.length=8;
		return <div className="user-content">
            <div className="title" >
                我的收藏
            </div>
            <div>
                <Radio.Group className="btnGroup" value={this.state.nub} onChange={this.tabFun.bind(this)}>
                    <Radio.Button value="1">需求中心</Radio.Button>
                    <Radio.Button value="2">技术市场</Radio.Button>
                    <Radio.Button value="3">科技服务</Radio.Button>
                    <Radio.Button value="4">模块名称</Radio.Button>
                </Radio.Group>
            </div>
            <div className="imgList">
                <Spin spinning={this.state.loading}>
                    <Row>
                        {thisdata.map((item,index)=>{
                            return<Col span={6} key={index} onClick={(e)=>{this.jump(item)}}>
                                    <div className="img">
                                        <div className="imgHeader">
                                            <img src={item.cdn_img}  alt=""/>
                                            <span className="new"></span>
                                            <div><p>{item.text}</p></div>
                                        </div>  
                                        <p className="txt">{item.name}</p>
                                    </div>
                                </Col>
                        })
                        }   
                    </Row>
                </Spin>
                {this.state.total&&<Pagination className="page" current={this.state.current} total={this.state.total} onChange={this.onShowSizeChange.bind(this)}/>}
            </div>
           
        </div>
	}
}

export default Collection;
