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


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




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

    const columns = [
        {
            title: '订单号',
            dataIndex: 'orderNo',
            valueType: 'text',
            search: true,
            render: (_: any, record: any) => {
                return <div className={'flex items-center'}>
                    {record.orderNo}
                    <Button type="link" onClick={() => {

                    }}>查看</Button>
                </div>
            }
        },
        {
            title: '用户信息',
            dataIndex: 'ordersGoodsList',
            valueType: 'text',
            search: false,
            render: (_: any, record: any) => {
                // return record.ordersGoodsList.map((i) => {
                //     let _Img = i.picture ? JSON.parse(i.picture)[0] : ''
                //     return <div className={'flex'} key={i.id}>
                //         <Image src={_Img}></Image>
                //         <div>
                //             <div>
                //                 用户ID：{i.goodsName}
                //             </div>
                //             <div>
                //                 用户账号：{i.salePrice}
                //             </div>
                //         </div>
                //     </div>
                // })
            }
        },
        {
            title: '支付类型',
            dataIndex: 'payType',
            valueType: 'text',
            search: true,
            render: (_: any, record: any) => {
                let color = record.payType == 1 ? 'volcano' : record.payType == 2 ? 'orange' : 'red'
                return <Tag color={color}>{record.payType == 1 ? '支付宝' : '微信'}</Tag>
            },
            renderFormItem: (
                _,
                { type, defaultRender, formItemProps, fieldProps, ...rest },
                form,
            ) => {
                const statusMap = [
                    { label: '支付宝', value: 1 },
                    { label: '微信', value: 2 },
                ]
                return <Select
                    {...fieldProps}
                    allowClear
                    style={{ width: "100%" }}
                    filterOption={false}
                    fieldNames={{
                        label: "label",
                        value: "value"
                    }}
                    options={statusMap}
                />
            },
        },
        {
            title: '支付通道',
            dataIndex: 'platform',
            valueType: 'text',
            search: true,
            render: (_: any, record: any) => {
                let color = record.platform == 1 ? 'volcano' : record.platform == 2 ? 'orange' : 'red'
                return <Tag color={color}>{record.platform == 1 ? '上海汇付' : record.platform == 2 ? '支付宝' : '微信'}</Tag>
            },
            renderFormItem: (
                _,
                { type, defaultRender, formItemProps, fieldProps, ...rest },
                form,
            ) => {
                const statusMap = [
                    { label: '上海汇付', value: 1 },
                    { label: '支付宝', value: 2 },
                    { label: '微信', value: 3 },
                ]
                return <Select
                    {...fieldProps}
                    allowClear
                    style={{ width: "100%" }}
                    filterOption={false}
                    fieldNames={{
                        label: "label",
                        value: "value"
                    }}
                    options={statusMap}
                />
            },
        },
        {
            title: '订单状态',
            dataIndex: 'status',
            valueType: 'text',
            search: true,
            render: (_: any, record: any) => {
                let colors = ['gold', 'green', 'volcano', 'red', 'magenta']
                return <Tag color={colors[record.status]}>{record.status == 0 ? '待支付' : record.status == 1 ? '支付成功' : record.status == -1 ? '取消' : record.status == -2 ? '退款' : ''}</Tag>
            },
            renderFormItem: (
                _,
                { type, defaultRender, formItemProps, fieldProps, ...rest },
                form,
            ) => {
                const statusMap = [
                    { label: '待支付', value: 0 },
                    { label: '支付成功', value: 1 },
                    { label: '取消', value: -1 },
                    { label: '退款中', value: -2 },
                ]
                return <Select
                    {...fieldProps}
                    allowClear
                    style={{ width: "100%" }}
                    filterOption={false}
                    fieldNames={{
                        label: "label",
                        value: "value"
                    }}
                    options={statusMap}
                />
            },
        },
        {
            title: '备注',
            dataIndex: 'remarks',
            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 paymentPage(params)
                        return {
                            data: data?.records || [],
                            total: data?.total,
                        };
                    }}
                    columns={columns}
                />
            </div>
        </PageContainer>
    );
};

export default LogTableList;