/** @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, encodeBase64 } from '../../../utils/base64';
import Table from '../../../components/table';
import DatePicker from '../../../components/DatePicker/rangePicker';
import moment from 'moment';
import { useBillList } from '../../../service/accouting';
import MonthSelect from './monthSelect'
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 { history } = 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] = useBillList({ merchant_id: '', page_number: 1, start_time: '', end_time: '' });
    const handleChangePage = ({ current }: PaginationProps) => {
        requestData({
            page_number: current,
        });
    };
    const tableColumns = React.useMemo(() => {
        const Columns: ColumnProps<RecordProps>[] = [
            {
                title: '商户',
                dataIndex: 'merchant_name',
                key: 'merchant_name',
            },
            {
                title: '账期',
                dataIndex: 'bill_time',
                key: 'bill_time',
            },
            {
                title: '账单类型',
                dataIndex: 'bill_type',
                key: 'bill_type',
                render:(_,record:any)=>{
                    const { bill_type } = record
                    return <div>{bill_type === 1 ? '充值':'消费'}</div>
                }
            },
            {
                title: '出账日期',
                dataIndex: 'bill_create_time',
                key: 'bill_create_time',
            },
            {
                title: '金额',
                dataIndex: 'amount',
                key: 'amount',
                align:'right',
                render:(_,record:any)=>{
                    const { amount } = record
                    return <div>￥{numberFormats(amount)}</div>
                }
            },
            {
                title: '账户余额',
                align:'right',
                dataIndex: 'balance',
                render:(_,record:any)=>{
                    const { balance } = record
                    return <div>￥{numberFormats(balance)}</div>
                }
            },
            {
                title: '账单状态',
                align:'right',
                dataIndex: 'bill_status',
                render:(_,record:any)=>{
                    const { bill_status } = record
                    return <div>{bill_status === 1? '已确认':'待确认'}</div>
                }
            },
            {
                title: '操作',
                render:(_,record:any)=>{
                    const { bill_time,merchant_id,balance,bill_create_time,bill_id,merchant_name,bill_status } = record
                    const search = encodeBase64('name=' + encodeURIComponent(merchant_name) + '&bill_time=' + bill_time + '&merchant_id=' + merchant_id + '&balance=' + balance + '&bill_create_time=' + bill_create_time + '&bill_id=' + bill_id  + '&merchant_name=' + merchant_name + '&bill_status=' + bill_status );
                    const onClick = () => {
                        history.push(`/home/accounting/billDetail?`+search)
                    }
                    return <a onClick={onClick}>查看详情</a>
                }
            },
        ];
        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: 'time',
                component: (
                    <MonthSelect />
                ),
            },
        ];
        return dataSource;
    }, [dependState]);

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


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


    return (
        <>
            <Search
                handleReset={handleReset}
                disabled={state.loading}
                algin='end'
                handleSubmit={handleSearch}
                dataSource={searchDataSource}
            />
            <Result error={state.error} onRetry={() => requestData({})}>
                <Table
                    pagination={{
                        total: state.total,
                        current: state.deepData.page_number
                    }}
                    onChange={handleChangePage}
                    rowKey='bill_detail_id'
                    columns={tableColumns}
                    loading={state.loading}
                    dataSource={state.dataSource}
                />
            </Result>
        </>
    );
};
export default orderManagement;
