/** @format */

import * as React from 'react';
import { ColumnProps } from 'antd/es/table';
import { PaginationProps } from 'antd/es/pagination';
import Result from '../../../components/result';
import Search, { SearchItemProps } from '../../../components/search/search';
import MerchantSelect from '../../../components/select/merchant';
// import DataApiSelect from '../../../components/select/dataApi';
import { decodeBase64 } from '../../../utils/base64';
import Table from '../../../components/table';
import DatePicker from '../../../components/DatePicker/rangePicker';
import moment from 'moment';
import { useExpensesList } from '../../../service/accouting';
import DataApiSelect from '../../../components/select/dataApi';
import { numberFormats } from '../../../utils/numberFormat';


interface RecordProps {
    index: number;
    id: number;
    query_type: string;
    combo_type: string;
    price: string;
    add_order_time: string;
}

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

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

const orderManagement: React.FC = props => {
    const search = decodeBase64(location.search.slice(1));
    const id = new URLSearchParams(search).get('id');
    const [dependState, setDependState] = React.useState<dependState>({
        merchant_id: '',
        data_api_id: '',
    });
    const [state, requestData] = useExpensesList({ merchant_id: '', page_number: 1, data_api_id: '', start_time: '', end_time: '' });
    const handleChangePage = ({ current }: PaginationProps,filter:any,{order}:any) => {

        let consumeOrder 
        if(order=='ascend'){
            consumeOrder=2
        }
        if(order=='descend'){
            consumeOrder=1
        }
        if(!order){
            consumeOrder = 0
        }
        requestData({
            page_number: current,
            consume_order: consumeOrder
        });
    };
    const tableColumns = React.useMemo(() => {
        const Columns: ColumnProps<RecordProps>[] = [
            {
                title: '商户',
                dataIndex: 'merchant_name',
                key: 'merchant_name',
            },
            {
                title: '日期',
                dataIndex: 'day',
                key: 'day',
            },
            {
                title: '产品',
                dataIndex: 'data_api_name',
                key: 'data_api_name',
            },
            {
                title: '别名',
                dataIndex: 'alias',
                render:(_,record:any)=>{
                    const { alias } = record
                    return <div>{alias?alias:'-'}</div>
                }
            },
            {
                title: '调用量',
                dataIndex: 'total_count',
                key: 'total_count',
                align:'right',
            },
            {
                title: '计费量',
                dataIndex: 'charge_count',
                key: 'charge_count',
                align:'right',
            },
            {
                title: '消费金额(元)',
                align:'right',
                sorter:true,
                dataIndex: 'amount',
                render:(_,record:any)=>{
                    const { amount } = record
                    return <div>{amount? `-￥${numberFormats(amount)}`:'0.00'}</div>
                }
            },
        ];
        return Columns;
    }, []);

    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: (
                    <DataApiSelect
                        merchant_id={dependState.merchant_id}
                        onChange={id => setDependState(preState => ({...preState, data_api_id: id as number}))}
                    />
                ),
            },
            {
                key: 'time',
                component: (
                    <DatePicker allowClear/>
                ),
            },
        ];
        return dataSource;
    }, [dependState]);

    const handleReset = () => {
        setDependState(preState => ({ ...preState, merchant_id: '', data_api_id: '', }))
        requestData({
            page_number: 1,
            merchant_id: 0,
            data_api_id: '',
            start_time: '',
            end_time: ''
        });
    }


    const handleSearch = (values: SearchColumnsProps) => {
        requestData({
            page_number: 1,
            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}
            />
            <Result error={state.error} onRetry={() => requestData({})}>
                <Table
                    pagination={{
                        total: state.total,
                        current: state.deepData.page_number
                    }}
                    onChange={handleChangePage}
                    rowKey='consume_id'
                    columns={tableColumns}
                    loading={state.loading}
                    dataSource={state.dataSource}
                />
            </Result>
        </>
    );
};
export default orderManagement;
