import ReactECharts from 'echarts-for-react';
import React, { useCallback, useEffect, useState } from 'react';
import { Form, Select, Button, PageHeaderFoot, DatePicker } from 'kts-xui';
import { Space, } from 'kts-components-antd-x4';
import { FormInstance } from 'kts-components-antd-x4/lib/form';
import agent from '../Server';
import moment from 'moment';
import TaskChart from './TaskChart';
import ProductChart from './ProductChart';
import InvoiceChart from './InvoiceChart';
import AppealChart from './AppealChart'
import './index.less';
const { Option } = Select;
const { RangePicker } = DatePicker;
class UIComponents extends React.Component<any, any> {
    formRef:any = 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')],
            companyList: [],
            params: {
                minCreateTime: moment().subtract(1, 'month').startOf('year').format('YYYY-MM-DD 00:00:00'),
                maxCreateTime: moment().format('YYYY-MM-DD 23:59:59'),
            }
        }
    }
    componentDidMount() {
        this.searchCompany('');
    }
    searchCompany = async (value, callback?) => {
        const res: any = await agent.get('/web/verifier/dashboard/getVerifierParty', {}, this);
        if (res.err) {
            return;
        } else {
            this.setState({
                companyList: res.res.items
            });

        }
    }
    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
        })
        console.log(params);
    }
    render() {
        const { dateParams, companyList, 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={
                            <Form ref={this.formRef} layout="inline" onFinish={this.onFinish} style={{ paddingTop: 6 }}>
                                <Form.Item name="verifiedParty" label="采集方名称">
                                    <Select
                                        placeholder="选择采集方"
                                        allowClear
                                        style={{ width: 200 }}
                                    >
                                        {companyList.map((item, key: number) => {
                                            return <Select.Option value={item.name} key={key}>{item.name}</Select.Option>

                                        })}
                                    </Select>
                                </Form.Item>
                                <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>}
                    >

                    </PageHeaderFoot>
                </div>
                <Space direction='vertical' size={20} style={{ width: '100%', padding: '0 20px' }}>
                    <div style={{ width: '100%', display: 'flex' }}>
                        <TaskChart data={params} />
                        <ProductChart data={params} />
                    </div>
                    <div style={{ width: '100%', display: 'flex' }}>
                        <InvoiceChart data={params} />
                        <AppealChart data={params} />
                    </div>

                </Space>
            </div>
        );
    }
}
export default UIComponents