import React from 'react';
import { Form, Select, Button, PageHeaderFoot, Radio, DatePicker } from 'kts-xui';
import { Space, } from 'kts-components-antd-x4';
import { FormInstance } from 'kts-components-antd-x4/lib/form';
import moment from 'moment';
import SalesTop5 from './SalesTop5';
import SalesTop10 from './SalesTop10';
import BuysTop5 from './BuysTop5';
import { withRouter, RouteChildrenProps } from 'react-router-dom';
const { RangePicker } = DatePicker;
interface IProps {
    changeView: (value) => void
}
class UIComponents extends React.Component<IProps & RouteChildrenProps, any> {
    formRef = React.createRef<FormInstance>();
    constructor(props) {
        super(props);
        this.state = {
            dateParams: [moment().subtract(1, 'month').startOf('year').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')],
            params: {
                minCreateTime: moment().subtract(1, 'month').startOf('year').format('YYYY-MM-DD 00:00:00'),
                maxCreateTime: moment().format('YYYY-MM-DD 23:59:59'),
            }
        }
    }
    onChartClick = (params) => {
        console.log(params);
    }
    onFinish = (data) => {
        const params = {
            minCreateTime: moment(data['createTime'][0]).format('YYYY-MM-DD 00:00:00'),
            maxCreateTime: moment(data['createTime'][1]).format('YYYY-MM-DD 23:59:59'),
            ...data
        }
        this.setState({
            params
        })
    }
    radioChange = (e) => {
        this.props.changeView(e.target.value);
    }
    render() {
        const { dateParams, params } = this.state;
        const onEvents = {
            'click': this.onChartClick,
        }
        return (
            <div style={{ height: 'calc(100vh - 97px)', display: 'flex', flexDirection: 'column' }}>
                <div style={{ flex: 'none', position: 'relative', zIndex: 1, marginBottom: 20 }}>
                    <PageHeaderFoot
                        expandLeft={
                            <div style={{ display: 'flex', alignItems: 'center' }}>
                                <Radio.Group defaultValue="rank" onChange={this.radioChange} style={{ display: 'flex', marginRight: 10 }}>
                                    <Radio.Button value="list">扁平视图</Radio.Button>
                                    <Radio.Button value="echart">穿透视图</Radio.Button>
                                    {/* <Radio.Button value="rank">排行榜</Radio.Button> */}
                                </Radio.Group>
                                <div >
                                    <Form layout="inline" onFinish={this.onFinish} >
                                        <Form.Item name="createTime" label="日期范围" initialValue={[moment(dateParams[0]), moment(dateParams[1])]}>
                                            <RangePicker />
                                        </Form.Item>
                                        <Form.Item>
                                            <Button type="primary" htmlType="submit">
                                                查询
                                        </Button>
                                        </Form.Item>
                                    </Form>
                                </div>
                            </div>}
                    >

                    </PageHeaderFoot>
                </div>
                <Space direction='vertical' size={20} style={{ width: '100%', padding: '0 20px' }}>
                    <div style={{ width: '100%', display: 'flex' }}>
                        <SalesTop5 data={params} />
                        <BuysTop5 data={params} />
                    </div>
                    <SalesTop10 data={params} />
                </Space>
            </div>

        );
    }
}
export default withRouter<any, any>(UIComponents as any)