import React, {Component, PropTypes} from 'react';
import {connect} from 'react-redux';
import {Table, Icon, Breadcrumb, Row, Col} from 'antd';
import {Link} from 'react-router';
import {serialize, formatDateTime, tradeStatusToString} from '../../utils';
import Layout from '../../components/Layout/Layout';

const columns = [
    {
        title: '订单ID',
        dataIndex: 'id',
        key: 'id',
        width: 70,
        // fixed:'left'
    }, {
        title: '产品',
        dataIndex: 'shortTitle',
        key: 'shortTitle',

        render: (shortTitle, record)=>(<span title={shortTitle}>{(shortTitle + '').substring(0, 15)}</span>)
    }, {
        title: '预约时间',
        dataIndex: 'reservationTime',
        key: 'reservationTime',
        width: 150,
        className: 'tac',
        render: (reservationTime, record)=>(
            <span>
                {reservationTime && formatDateTime(reservationTime)}
            </span>
        )
    }, {
        title: '投资人',
        dataIndex: 'buyerName',
        key: 'buyerName',
        width: 80,
        className: 'tac',
    }, {
        title: '预约额度',
        dataIndex: 'reservationAmount',
        key: 'reservationAmount',
        width: 100,
        className: 'tac',
    }, {
        title: '实际打款',
        dataIndex: 'remittanceAmount',
        key: 'remittanceAmount',
        width: 100,
        className: 'tac',
    }, {
        title: '进度',
        dataIndex: 'status',
        key: 'status',
        width: 160,
        className: 'tac',
        render: (status, record)=>(<span data-status={status}>{tradeStatusToString(status)}</span>)
    }, {
        title: '操作',
        key: 'operation',
        width: 140,
        // fixed:'right',
        className: 'tac',
        render: (text, record)=>(
            <span>
                <Link to={'/trades/contract/'+ record.id} onClick={e=>e.stopPropagation()}>合同</Link>
                {
                    (record.status == 11 || record.status == 21) &&
                    <span>
                        <span className="ant-divider"></span>
                        <Link to={'/trades/commission/'+ record.id} onClick={e=>e.stopPropagation()}>佣金</Link>
                    </span>
                }

            </span>
        )
    }
];

@connect(state=>({
    items: state.trade.items,
    loading: state.trade.loading,
    total: state.trade.total,
}))
export default class List extends Component {

    constructor(props, context) {
        super(props, context);

    }

    componentWillMount() {
        this.fetchList(this.props.location.query);
    };

    fetchList(query) {
        this.props.dispatch({
            type: 'FETCH_TRADE_LIST',
            query
        });
    }

    handleRowClick({id}) {
        this.props.history.push('/trades/' + id);
    }

    render() {

        const {total, items, loading, history:{replace}, location:{pathname, query}} = this.props;

        const pagination = {
            total: total,
            pageSize: parseInt(query.s, 10) || 10,
            current: parseInt(query.p, 10) || 1,
            showSizeChanger: true,
            onShowSizeChange: (current, pageSize)=> {
                console.log('Current: ', current, '; PageSize: ', pageSize);
                query.p = current;
                query.s = pageSize;
                replace(pathname + '?' + serialize(query));
                this.fetchList(query);
            },
            onChange: (current) => {
                console.log('Current: ', current);
                query.p = current;
                replace(pathname + '?' + serialize(query));
                this.fetchList(query);
            }
        };

        const breadcrumb = ['订单管理', '订单列表'];

        const header = (
            <div className="main-header">
                <Row>
                    <Col span="8">
                        <Breadcrumb>
                            { breadcrumb.map((b, i)=><Breadcrumb.Item key={i}>{b}</Breadcrumb.Item>) }
                        </Breadcrumb>
                    </Col>
                </Row>
                <Row>
                    <Col span="20">
                        <h1 className="tac">订单列表</h1>
                    </Col>
                </Row>
            </div>
        );

        return (
            <Layout header={header}>
                <Table className="ant-table" columns={columns}
                       dataSource={Array.isArray(items)?items:[]}
                       loading={loading}
                       pagination={pagination}
                       scroll={{ y: window.innerHeight-380 }}
                       onRowClick={this.handleRowClick.bind(this)}
                />
            </Layout>
        );
    }
}



