import { integralPage } from '@/services/finance/index';


import React, { useRef, useEffect,useState } from 'react';
import { useIntl, useAccess } from '@umijs/max';
import { message, Tag,Select } from 'antd';
import { ActionType, PageContainer, ProTable } from '@ant-design/pro-components';
import { usersPage } from '@/services/user/user';




const LogTableList: React.FC = () => {
    const actionRef = useRef<ActionType>();
    const [shopOption, setShopOption] = useState([]);


    const searchShop = async (value) => {
        const { success, data } = await usersPage({
            userName: value
        });
        data.records.map((i) => {
            i.userName = i.userName + ' ' + i.phone
        })
        setShopOption(data.records)
    }

    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            valueType: 'text',
            search: false,
        },
        {
            title: '用户信息',
            dataIndex: 'userId',
            valueType: 'text',
            render: (_: any, record: any) => {
                return <div>
                    <div>用户ID:{record?.userId}</div>
                    <div>用户名：{record?.userName}</div>
                    <div>手机号：{record?.phone}</div>
                </div>
            },
            renderFormItem: (
                _,
                { type, defaultRender, formItemProps, fieldProps, ...rest },
                form,
            ) => {
                return <Select
                    {...fieldProps}
                    allowClear
                    showSearch
                    placeholder="请输入用户名"
                    style={{ width: "100%" }}
                    filterOption={false}
                    onSearch={
                        (e) => {
                            if (!e) {
                                return;
                            }
                            searchShop(e);
                        }
                    }
                    fieldNames={{
                        label: "userName",
                        value: "id"
                    }}
                    options={shopOption}
                />
            },
        },
        {
            title: '用户名',
            dataIndex: 'userName',
            valueType: 'text',
            search: true,
            hidden:true
        },
        {
            title: '手机号',
            dataIndex: 'phone',
            valueType: 'text',
            search: true,
            hidden:true
        },
        {
            title: '钱包',
            dataIndex: 'points2',
            valueType: 'text',
            search: false,
        },
        {
            title: '修改时间',
            dataIndex: 'updateTime',
            valueType: 'text',
            search: false,
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            valueType: 'text',
            search: false,
        },
    ];

    return (
        <PageContainer>
            <div style={{ width: '100%', float: 'right' }}>
                <ProTable
                    actionRef={actionRef}
                    rowKey="id"
                    key="logList"
                    search={{
                        labelWidth: 120,
                    }}
                    request={async (params, sorter, filter) => {
                        let { data } = await integralPage(params)
                        return {
                            data: data?.records || [],
                            total: data?.total,
                        };
                    }}
                    columns={columns}
                />
            </div>
        </PageContainer>
    );
};

export default LogTableList;
