/** @format */

import * as React from 'react';
import Search, { SearchItemProps } from '../../../components/search/search';
import MerchantSelect from '../../../components/select/merchant';
import DatePicker from '../../../components/DatePicker/rangePicker';
import { useExpensesTrends } from '../../../service/accouting';
import DataApi from '../../../components/select/dataApi';
import * as echarts from 'echarts';
import moment from 'moment';
import { Empty } from 'antd';
const startTime = moment('00:00:00', 'HH:mm').subtract(15, 'd');
const endTime = moment('23:59:59', 'HH:mm');


interface SearchColumnsProps {
    merchant_id: number | '';
    data_api_id: string;
    time: any;
}

interface dependState {
    merchant_id: number | '';
    data_api_id: number | '';
}

const Trends: React.FC = props => {
    const [dependState, setDependState] = React.useState<dependState>({
        merchant_id: '',
        data_api_id: '',
    });
    const [state, requestData] = useExpensesTrends({ merchant_id: '', data_api_id: '', start_time: '', end_time: '' });

    React.useEffect(()=>{
        if(state?.xData){
            generateLine()
        }
    },[state?.xData])


    const generateLine = () => {
        const chartDom: any = document.getElementById('main_expenses_trends');
        const myChart = echarts.init(chartDom);
        const option = {
            xAxis: {
              type: 'category',
              data: state?.xData
            },
            tooltip: {
                trigger: 'axis'
            },
            yAxis: {
              type: 'value',
              name:'金额(元)'
            },
            toolbox: {
                feature: {
                  saveAsImage: {}
                }
            },
            series: [
              {
                data: state?.yData,
                type: 'line',
                stack: 'Total',
              }
            ]
        };
        myChart.setOption(option)
    }

    const searchDataSource = React.useMemo(() => {
        const dataSource: SearchItemProps[] = [
            {
                key: 'merchant_id',
                component: (
                    <MerchantSelect
                        data_api_id={dependState.data_api_id}
                        onChange={id => setDependState(preState => ({ ...preState, merchant_id: id as number }))}
                    />
                ),
            },
            {
                key: 'data_api_id',
                component: (
                    <DataApi 
                        onChange={id => {
                            setDependState(preState => ({...preState, data_api_id: id as number | ''}));
                        }}
                        merchant_id={dependState.merchant_id}
                    />
                ),
            },
            {
                key: 'time',
                component: (
                    <DatePicker placeholder={['开始日期(必选)','结束日期(必选)']} allowClear  onChange={(value:any)=>{}}/>
                ),
                options: {
                    initialValue: [startTime, endTime],
                },
            },
        ];
        return dataSource;
    }, [dependState]);

    const handleReset = () => {
        setDependState(preState => ({...preState, merchant_id: '', data_api_id: ''}));
        requestData({
            merchant_id: 0,
            data_api_id: '',
            start_time:  moment(startTime).format('YYYY-MM-DD'),
            end_time: moment(endTime).format('YYYY-MM-DD')
        });
    }


    const handleSearch = (values: SearchColumnsProps) => {
        requestData({
            merchant_id: values.merchant_id || '',
            data_api_id: values.data_api_id || "",
            start_time: values.time ? moment(values.time[0]).format('YYYY-MM-DD') : '',
            end_time: values.time ? moment(values.time[1]).format('YYYY-MM-DD') : ''
        });
    };


    return (
        <>
            <Search
                handleReset={handleReset}
                disabled={state.loading}
                algin='end'
                right={10}
                handleSubmit={handleSearch}
                dataSource={searchDataSource}
            />
            { state?.xData ? <div id='main_expenses_trends' style={{height:500}}></div> : <Empty style={{marginTop:100}}></Empty> }
        </>
    );
};
export default Trends;
