/** @format */

import * as React from 'react';
import {ColumnProps} from 'antd/es/table';
import {PaginationProps} from 'antd/es/pagination';
import Search, { SearchItemProps } from '../../../components/search/search';
import Result from '../../../components/result';
import Table from '../../../components/table';
import { useMerchantPriceList } from '../../../service/accouting';
import MerchantSelect from '../../../components/select/merchant';

import MerchantSetModal from './merchantSetModal';
import MerchantChargeModal from './merchantChargeModal';
import { encodeBase64 } from '../../../utils/base64';
import PriceList from './priceList';
import MerchantTypeSelect from '../../../components/select/merchantTypeSelect';
import { numberFormats } from '../../../utils/numberFormat';
interface RecordProps {
    index: number;
    id: number;
    status_code: number;
    data_api_name: string;
    query_type: string;
    combo_type: string;
    price: string;
    add_order_time: string;
}

const Index: React.FC = props => {
    const { history } = props
    const [dependState, setDependState] = React.useState<any>({
        merchant_id: '',
    });
    const [state, requestData] = useMerchantPriceList({merchant_id:'',merchant_type_list:'2,3'});
    const handleChangePage = ({current}: PaginationProps,_:any,{order}:any) => {
        let arrearageOrder 
        if(order=='ascend'){
            arrearageOrder=1
        }
        if(order=='descend'){
            arrearageOrder=2
        }
        if(!order){
            arrearageOrder = 0
        }
        requestData({
            page_number: current,
            arrearage_order: arrearageOrder
        });
    };

    const tableColumns = React.useMemo(() => {
        const Columns: ColumnProps<RecordProps>[] = [
            {
                title: '商户',
                dataIndex: 'merchant_name',
                key: 'merchant_name',
            },
            {
                title: '商户类型',
                dataIndex: 'merchant_type',
                render:(_,record:any)=>{
                    const { merchant_type } = record
                    if(merchant_type === 1){
                        return <div>普通客户</div>
                    }
                    if(merchant_type === 2){
                        return <div>预存款客户</div>
                    }
                    if(merchant_type === 3){
                        return <div>后结算客户</div>
                    }
                }
            },
            {
                title: '￥余额',
                dataIndex: 'balance',
                align:'right',
                sorter:true,
                render:(text:any)=>{
                    return <div style={{ fontSize:18}}>￥{numberFormats(text)}</div>
                }
            },
            {
                title: '产品--价格',
                align:'center',
                render:(_,record:any)=>{
                    const { api_price_list } = record
                    return <PriceList api_price_list={api_price_list || []}/>
                }
            },
            {
                title: '可欠费金额',
                dataIndex: 'arrearage',
                align:'right',
                render:(_,record:any)=>{
                    const { arrearage } = record
                    return <div>￥{numberFormats(arrearage)}</div>
                }
            },
            {
                title: '操作',
                align:'center',
                render:(_,record:any)=>{
                    const { merchant_id,merchant_name } = record
                    const search = encodeBase64('merchant_id='+merchant_id + '&name=' + encodeURIComponent(merchant_name));
                    const onClick = () => {
                        history.push(`/home/accounting/merchantDataApiPriceList?`+search)
                    }
                    return <div style={{display:'flex',flexDirection:'row',justifyContent:'space-around'}}>
                        <MerchantSetModal record={record} refresh={refresh}/>
                        <MerchantChargeModal record={record} refresh={refresh}/>
                        <a onClick={onClick}>价格配置</a>
                    </div>
                }
            },
        ];
        return Columns;
    }, []);

    const searchDataSource = React.useMemo(() => {
        const dataSource: SearchItemProps[] = [
            {
                key:'merchant_type_list',
                options: {
                    initialValue: [2,3],
                },
                component:<MerchantTypeSelect mode='multiple'/>
            },
            {
                key: 'merchant_id',
                component: (
                    <MerchantSelect
                        data_api_id={dependState.data_api_id}
                        onChange={id => setDependState(preState => ({ ...preState, merchant_id: id as number }))}
                    />
                ),
            },
        ];
        return dataSource;
    }, [dependState]);

    const refresh = () =>{
        const requestConfig:any = localStorage.getItem('merchant_recharge_accounting') 
        requestData(JSON.parse(requestConfig))
    }

    const handleSearch = (values: any) => {
        requestData({merchant_id:values?.merchant_id,page_number:1,merchant_type_list:values?.merchant_type_list.join()})
    };

    const handleReset = () => {
        localStorage.removeItem('merchant_recharge_accounting')
        setDependState(preState => ({ ...preState, merchant_id: '', data_api_id: '', }))
        requestData({merchant_id:'',page_number:1,merchant_type_list:'2,3'})
    }



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