import { withdrawPage, withdrawExtract } from '@/services/finance/index';
import { usersPage } from '@/services/user/user';
import { exportData } from '@/utils/func';

import React, { useRef, useEffect, useState } from 'react';
import { useIntl, useAccess } from '@umijs/max';
import { message, Tag, Select, Button, Upload } from 'antd';
import { ActionType, PageContainer, ProTable, ProFormSelect } from '@ant-design/pro-components';
import { UploadOutlined } from '@ant-design/icons';
import TempFormModal from './components/TempFormModal';


const LogTableList: React.FC = () => {
    const actionRef = useRef<ActionType>();
    const [tempFormModal, setTempFormModal] = useState(false);
    const [shopOption, setShopOption] = useState([]);
    const [searchParams, setSearchParams] = useState(null);
    const access = useAccess()



    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 handleTemp = async (fields) => {
        return
        const { success } = await userTransferHanging(fields);
        if (success) {
            message.success('导入成功');
            actionRef.current?.reload();
            setTempFormModal(false);
        }
    };

    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            valueType: 'text',
            search: false,
        },
        {
            title: '用户信息',
            dataIndex: 'userId',
            valueType: 'text',
            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}
                />
                // <div className='w-52'>
                //     <ProFormSelect
                //         name="formUserId"
                //         fieldProps={{
                //             fieldNames: {
                //                 label: "userName",
                //                 value: "id"
                //             },
                //             placeholder: "请输入用户名",
                //             showSearch: true
                //         }}
                //         request={async (param) => {
                //             const { success, data } = await usersPage({
                //                 userName: param.keyWords
                //             });
                //             data.records.map((i) => {
                //                 i.userName = i.userName + ' ' + i.phone
                //             })
                //             return data.records;
                //         }}
                //     />
                // </div>
            },
        },
        {
            title: '订单号',
            dataIndex: 'orderNo',
            valueType: 'text',
            search: false,
        },
        {
            title: '提取积分',
            dataIndex: 'points',
            valueType: 'text',
            search: false,
        },
        {
            title: '收益',
            dataIndex: 'points1',
            valueType: 'text',
            search: false,
        },
        {
            title: '状态',
            dataIndex: 'status',
            valueType: 'text',
            render: (_: any, record: any) => {
                let color = record.status == 0 ? 'orange' : record.status == 1 ? 'green' : record.status == -1 ? 'red' : ''
                return <Tag color={color}>{record.status == 0 ? '申请中' : record.status == 1 ? '提现成功' : record.status == -1 ? '失败' : ''}</Tag>
            },
            renderFormItem: (
                _,
                { type, defaultRender, formItemProps, fieldProps, ...rest },
                form,
            ) => {
                const statusMap = [
                    { label: '申请中', value: 0 },
                    { label: '提现成功', value: 1 },
                    { label: '失败', value: -1 },
                ]
                return <Select
                    {...fieldProps}
                    allowClear
                    style={{ width: "100%" }}
                    filterOption={false}
                    fieldNames={{
                        label: "label",
                        value: "value"
                    }}
                    options={statusMap}
                />
            },
        },
        {
            title: '提现信息',
            dataIndex: 'type',
            valueType: 'text',
            search: false,
            render: (_: any, record: any) => {
                let color = record.type == 1 ? 'cyan' : record.type == 2 ? 'red' : ''
                return <div>
                    <div>
                        <Tag color={color}>{record.type == 1 ? '个人' : record.type == 2 ? '企业' : ''}</Tag>
                        {record.name}
                    </div>
                    <div hidden={record.type == 2}>
                        身份证号：{record.idCard}
                    </div>
                    <div>
                        银行卡号：{record.bankCard}
                    </div>
                    <div>
                        开户行：{record.idCard}
                    </div>
                    <div>
                        开户支行：{record.idCard}
                    </div>
                    <div hidden={record.type == 1}>
                        纳税人识别号：{record.taxNo}
                    </div>
                </div>
            }
        },
        {
            title: '完成时间',
            dataIndex: 'completeTime',
            valueType: 'text',
            search: false,
        },
        {
            title: '处理结果',
            dataIndex: 'handleMessage',
            valueType: 'text',
            search: false,
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            valueType: 'dateRange',
            search: {
                transform: (value) => {
                    return {
                        createTimeBegin: value[0],
                        createTimeEnd: value[1],
                    };
                },
            },
            render: (_, record) => {
                return record?.createTime
            },
        },
    ];

    return (
        <PageContainer>
            <div style={{ width: '100%', float: 'right' }}>
                <TempFormModal
                    modalOpenState={tempFormModal}
                    onModalOpenState={setTempFormModal}
                    onSubmit={handleTemp}
                />
                <ProTable
                    actionRef={actionRef}
                    rowKey="id"
                    key="logList"
                    search={{
                        labelWidth: 120,
                        defaultCollapsed: false,
                    }}
                    toolBarRender={() => [
                        <Button hidden={!access.hasPerms('/api/userspoints/points/extract/export')} type="primary" onClick={async () => {
                            let _res = await withdrawExtract(searchParams)
                            exportData(_res, '提现记录')
                        }}>导出提现申请</Button>,
                        <Button hidden={!access.hasPerms('/api/userspoints/importUsersPointsExtract')} icon={<UploadOutlined />} onClick={async () => {
                            setTempFormModal(true)
                        }}>导入提现结果</Button>
                    ]}
                    request={async (params, sorter, filter) => {
                        setSearchParams(params)
                        let { data } = await withdrawPage(params)
                        return {
                            data: data?.records || [],
                            total: data?.total,
                        };
                    }}
                    columns={columns}
                />
            </div>
        </PageContainer>
    );
};

export default LogTableList;
