import { paymentPage } from '@/services/payment/index';


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




const LogTableList: React.FC = () => {
    const actionRef = useRef<ActionType>();

    const columns: any = [
        {
            title: 'ID',
            dataIndex: 'id',
            valueType: 'text',
            search: false,
        },
        {
            title: '用户信息',
            dataIndex: '-',
            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: 'platform',
            valueType: 'text',
            search: true,
            render: (data) => {
                // 支付通道:1-上海汇付;2-微信;3-支付宝
                return data == 1 ? '上海汇付' : data == 2 ? '微信' : data == 3 ? '支付宝' : data
            },
        },
        {
            title: '支付订单号',
            dataIndex: 'paymentNo',
            valueType: 'text',
            search: true,
        },
        {
            title: '支付金额',
            dataIndex: 'payAmount',
            valueType: 'text',
            search: false,
        },
        {
            title: '退款金额',
            dataIndex: 'refundAmount',
            valueType: 'text',
            search: false,
        },
        {
            title: '支付完成时间',
            dataIndex: 'completeTime',
            valueType: 'text',
            search: false,
        },

        {
            title: '支付类型',
            dataIndex: 'payType',
            valueType: 'text',
            render: (data) => {
                return data == 1 ? <Tag color="green">微信小程序</Tag> : data == 2 ? <Tag color="blue">支付宝小程序</Tag> : data
            },
            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: 'status',
            valueType: 'text',
            render: (_: any, record: any) => {
                // 0-待支付;1-处理中;2-支付完成; -1支付失败;
                return _ == 0 ? '待支付' : _ == 1 ? '处理中' : _ == 2 ? '支付完成' : _ == -1 ? '支付失败' : _
            },
            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: 0
                        },
                        {
                            name: '处理中',
                            id: 1
                        },
                        {
                            name: '支付完成',
                            id: 2
                        },
                        {
                            name: '支付失败',
                            id: -1
                        },
                    ]}
                />
            },
        },
        {
            title: '来源',
            dataIndex: 'sourceType',
            valueType: 'text',
            render: (_: any, record: any) => {
                // 来源类型:1-订单预付;2-钱包;3-电卡购买
                return _ == 1 ? '订单预付' : _ == 2 ? '钱包' : _ == 3 ? '电卡购买' : _
            },
            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
                        },
                        {
                            name: '电卡购买',
                            id: 3
                        },
                    ]}
                />
            },
        },
        {
            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,
                        defaultCollapsed: false,
                    }}
                    request={async (params, sorter, filter) => {
                        let { data } = await paymentPage(params)
                        return {
                            data: data?.records || [],
                            total: data?.total,
                        };
                    }}
                    columns={columns}
                />
            </div>
        </PageContainer>
    );
};

export default LogTableList;
