/** @format */

import * as React from 'react';
import {Badge} from 'antd';
import {ColumnProps} from 'antd/es/table';
import {PaginationProps} from 'antd/es/pagination';
import {orderStatus, ORDER_STATUS_COLOR} from '../../../const/status';
import Result from '../../../components/result';
import {formatNumer} from '../../../utils/operation';
import {decodeBase64} from '../../../utils/base64';
import Table from '../../../components/table';
import {useOrderMangent} from '../../../service/merchant';
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 orderManagement: React.FC = props => {
    const search = decodeBase64(location.search.slice(1));
    const id = new URLSearchParams(search).get('id');
    const [state, requestData] = useOrderMangent({merchant_id: Number(id), page_number: 1});
    const handleChangePage = ({current}: PaginationProps) => {
        requestData({
            page_number: current,
        });
    };
    const tableColumns = React.useMemo(() => {
        const Columns: ColumnProps<RecordProps>[] = [
            {
                title: '订单号',
                dataIndex: 'order_no',
                key: 'order_no',
            },
            {
                title: '项目',
                dataIndex: 'data_api_name',
                key: 'data_api_name',
            },
            {
                title: '查询方式',
                dataIndex: 'query_type',
                key: 'query_type',
            },
            {
                title: '套餐规格',
                dataIndex: 'combo_desc',
                key: 'combo_desc',
            },
            {
                title: '购买数量',
                dataIndex: 'count',
                align: 'right',
                key: 'count',
            },
            {
                title: '购买账号',
                dataIndex: 'buy_account',
                align: 'right',
                key: 'buy_account',
            },
            {
                title: '价格(￥)',
                dataIndex: 'price',
                key: 'price',
                align: 'right',
                width: 200,
                render: (_, record: any) => {
                    const {count, price} = record;
                    const result = Number(count * price).toFixed(2);
                    return <div>{result}</div>;
                },
            },
            {
                title: '状态',
                dataIndex: 'status_code',
                key: 'status_code',
                width: 100,
                render: text => {
                    return <Badge text={orderStatus[text]} color={ORDER_STATUS_COLOR[text - 1]} />;
                },
            },
            {
                title: '下单时间',
                dataIndex: 'add_order_time',
                width: 200,
                key: 'add_order_time',
            },
        ];
        return Columns;
    }, []);
    return (
        <Result error={state.error} onRetry={() => requestData()}>
            <Table
                pagination={{
                    total: state.total,
                }}
                onChange={handleChangePage}
                rowKey="id"
                columns={tableColumns}
                loading={state.loading}
                dataSource={state.dataSource}
            />
        </Result>
    );
};
export default orderManagement;
