import {
    ProFormInstance,
    ProTable,
    ActionType
} from '@ant-design/pro-components';
import { message, Modal,Select } from 'antd';
import { useRef, useEffect } from 'react';
import { recordPage } from '@/services/user/index';




export default ({ values, setModalVisit, modalVisit }) => {
    const actionRef = useRef<ActionType>();
    useEffect(() => {
        if (actionRef.current) {
            actionRef.current.reload();
        }
    }, [values]);


    const columns: any = [
        {
            title: 'ID',
            dataIndex: 'id',
            valueType: 'text',
            search: false,
        },
        {
            title: '用户信息',
            dataIndex: 'userId',
            valueType: 'text',
            search: false,
            render: (_: any, record: any) => {
                return <div>
                    <div>用户ID：{record?.userId}</div>
                    <div>用户昵称：{record?.nickName}</div>
                    <div>手机号：{record?.phone}</div>
                </div>
            },
        },
        {
            title: '记录名称',
            dataIndex: 'recordName',
            valueType: 'text',
        },
        {
            title: '当前余额',
            dataIndex: 'curBalance',
            valueType: 'text',
            search: false,
        },
        {
            title: '变动金额',
            dataIndex: 'amount',
            valueType: 'text',
            search: false,
        },
        {
            title: '赠送金额',
            dataIndex: 'giveAmount',
            valueType: 'text',
            search: false,
        },
        {
            title: '来源类型',
            dataIndex: 'sourceType',
            valueType: 'text',
            render: (_: any, record: any) => {
                // 11 - 用户购买; 12 - 用户退款; 13 - 后台下发; 14 - 后台退卡; 21 - 订单支付; 22 - 订单退款
                return _ == 11 ? '用户购买' : _ == 12 ? '用户退款' : _ == 13 ? '后台下发' : _ == 14 ? '后台退卡' : _ == 21 ? '订单支付' : _ == 22 ? '订单退款' : _
            },
            renderFormItem: (
                _,
                { type, defaultRender, formItemProps, fieldProps, ...rest },
                form,
            ) => {
                return <Select
                    {...fieldProps}
                    allowClear
                    placeholder="请选择来源类型"
                    style={{ width: "100%" }}
                    filterOption={false}
                    fieldNames={{
                        label: "name",
                        value: "id"
                    }}
                    options={[
                        {
                            name: '用户购买',
                            id: 11
                        },
                        {
                            name: '用户退款',
                            id: 12
                        },
                        {
                            name: '后台下发',
                            id: 13
                        },
                        {
                            name: '后台退卡',
                            id: 14
                        },
                        {
                            name: '订单支付',
                            id: 21
                        },
                        {
                            name: '订单退款',
                            id: 22
                        },
                    ]}
                />
            },
        },
        {
            title: '场景',
            dataIndex: 'scene',
            valueType: 'text',
            render: (_: any, record: any) => {
                // 场景:1-余额;2-订单
                return _ == 1 ? '余额' : _ == 2 ? '订单' : _
            },
            renderFormItem: (
                _,
                { type, defaultRender, formItemProps, fieldProps, ...rest },
                form,
            ) => {
                return <Select
                    {...fieldProps}
                    allowClear
                    placeholder="请选择场景"
                    style={{ width: "100%" }}
                    filterOption={false}
                    fieldNames={{
                        label: "name",
                        value: "id"
                    }}
                    options={[
                        {
                            name: '余额',
                            id: 1
                        },
                        {
                            name: '订单',
                            id: 2
                        }
                    ]}
                />
            },
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            valueType: 'text',
            search: false,
        },
    ]

    return (
        <>
            <Modal width={1200} title="电卡-余额记录" open={modalVisit} onOk={async () => {
                setModalVisit(false)
            }} onCancel={async () => {
                setModalVisit(false)
            }}>
                <ProTable
                    rowKey="id"
                    key="logList"
                    actionRef={actionRef}
                    search={{
                        labelWidth: 120,
                        defaultCollapsed: false,
                    }}
                    request={async (params, sorter, filter) => {
                        params.userId = values.userId
                        params.cardId = values.cardId
                        let { data } = await recordPage(params)
                        return {
                            data: data?.records || [],
                            total: data?.total,
                        };
                    }}
                    columns={columns}
                />
            </Modal>
        </>
    );
};