import { orderPage, exportExcel, refundAmount, getPriceTemplateSnapshot, stopCharging } from '@/services/order/index';
import { userPage } from '@/services/system/user';
import { merchantPage } from '@/services/merchant/index';
import { exportData } from '@/utils/func';


import React, { useRef, useEffect, useState } from 'react';
import { useIntl, useAccess } from '@umijs/max';
import { message, Tag, Select, Tooltip, Divider, Button } from 'antd';
import { ActionType, PageContainer, ProTable } from '@ant-design/pro-components';
import Table1 from './table1';
import Table2 from './table2';
import Table3 from './table3';
import Table4 from './table4';
import Refund from './refund';
import UpdateForm from './edit';



const LogTableList: React.FC = () => {
    const actionRef = useRef<ActionType>();
    const [row1, setRow1] = useState<any>()
    const [row2, setRow2] = useState<any>()
    const [row3, setRow3] = useState<any>()
    const [row4, setRow4] = useState<any>()
    const [row5, setRow5] = useState<any>()
    const [row6, setRow6] = useState<any>()
    const [table1, setTable1] = useState<any>(false)
    const [table2, setTable2] = useState<any>(false)
    const [table3, setTable3] = useState<any>(false)
    const [table5, setTable5] = useState<any>(false)
    const [table6, setTable6] = useState<any>(false)



    const [searchParams, setSearchParams] = useState(null);
    const [modalVisit, setModalVisit] = useState<any>(false)




    const [userOption, setUserOption] = useState([]);
    const searchUser = async (value) => {
        const { success, data } = await userPage({
            nickName: value
        });
        data.records.map((i) => {
            i.nickName = i.nickName + ' ' + i.phone
        })
        searchUser(data.records)
    }


    const [shopOption, setShopOption] = useState([]);
    const searchShop = async (value) => {
        const { success, data } = await merchantPage({
            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: 'orderNo',
            valueType: 'text',
            search: true,
        },
        {
            title: '交易编号',
            dataIndex: 'transactionNo',
            valueType: 'text',
            search: true,
        },
        {
            title: '开始时间',
            dataIndex: 'startTime',
            valueType: 'text',
            search: false,
        },
        {
            title: '结束时间',
            dataIndex: 'endTime',
            valueType: 'text',
            search: false,
        },
        {
            title: '用电度数',
            dataIndex: 'useDegree',
            valueType: 'text',
            search: false,
            width: 80
        },
        {
            title: '用电时长',
            dataIndex: 'useTime',
            valueType: 'text',
            search: false,
            width: 80
        },
        {
            title: '电费',
            dataIndex: 'electricityAmount',
            valueType: 'text',
            search: false,
            width: 60
        },
        {
            title: '服务费',
            dataIndex: 'serviceAmount',
            valueType: 'text',
            search: false,
            width: 80
        },
        {
            title: '计费类型',
            dataIndex: 'chargeType',
            valueType: 'text',
            width: 100,
            render: (_: any, record: any) => {
                // 计费类型:1-服务的计费;2-设备端计费
                return record.chargeTypeName
            },
            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: 'preAmount',
            valueType: 'text',
            search: false,
            width: 80
        },
        {
            title: '应收金额',
            dataIndex: 'expectAmount',
            valueType: 'text',
            search: false,
            width: 80
        },
        {
            title: '实收金额',
            dataIndex: 'actuallyAmount',
            valueType: 'text',
            search: false,
            width: 80
        },
        {
            title: '退款金额',
            dataIndex: 'refundAmount',
            valueType: 'text',
            search: false,
            width: 80
        },
        {
            title: '结束原因',
            dataIndex: 'stopChargingTypeName',
            valueType: 'text',
            search: false,
        },
        {
            title: '支付类型',
            dataIndex: 'payType',
            valueType: 'text',
            render: (_: any, record: any) => {
                let data = [
                    {
                        name: '商户汇付',
                        id: 1
                    },
                    {
                        name: '京东支付',
                        id: 2
                    },
                    {
                        name: '金钱吧预付',
                        id: 3
                    },
                    {
                        name: '钱包预付',
                        id: 4
                    },
                    {
                        name: '刷卡预付',
                        id: 5
                    },
                ]
                var findData = data.find((val) => val.id == record.payType)
                return findData ? findData.name : '-'
            },
            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
                        },
                        {
                            name: '钱包预付',
                            id: 4
                        },
                        {
                            name: '刷卡预付',
                            id: 5
                        },
                    ]}
                />
            },
        },
        {
            title: '支付平台',
            dataIndex: 'orderPlatform',
            valueType: 'text',
            render: (_: any, record: any) => {
                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: 'businessType',
        //     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: 'status',
            valueType: 'text',
            search: true,
            width: 120,
            render: (_: any, record: any) => {
                // 订单状态:1-订单初始化;2-启动充电中;3-正在充电;4-充电结束中;5:交易记录确认;6-订单完成;-1-启动失败;-2-启动超时
                return _ == 1 ? '初始化订单' : _ == 2 ? '启动充电中' : _ == 3 ? '正在充电' : _ == 4 ? '充电结束中' : _ == 5 ? '交易记录确认' : _ == 6 ? '订单完成' : _ == -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
                        },
                        {
                            name: '正在充电',
                            id: 3
                        },
                        {
                            name: '充电结束中',
                            id: 4
                        },
                        {
                            name: '交易记录确认',
                            id: 5
                        },
                        {
                            name: '订单完成',
                            id: 6
                        },
                        {
                            name: '启动失败',
                            id: -1
                        },
                        {
                            name: '启动超时',
                            id: -2
                        },
                    ]}
                />
            },
        },
        {
            title: '用户信息',
            dataIndex: 'userId',
            valueType: 'text',
            render: (_: any, record: any) => {
                return <div>
                    <div>用户ID:{record?.userId}</div>
                    <div>用户昵称:{record?.nickName}</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;
                            }
                            searchUser(e);
                        }
                    }
                    fieldNames={{
                        label: "nickName",
                        value: "id"
                    }}
                    options={userOption}
                />
            },
        },
        {
            title: '设备信息',
            dataIndex: 'transactionNo',
            valueType: 'text',
            search: false,
            width: 230,
            render: (_: any, record: any) => {
                return <div>
                    <div>电枪ID:{record?.gunId}</div>
                    <div>电枪名称:{record?.gunName || '-'}</div>
                    <div>电枪编号:{record?.gunNo || '-'}</div>
                    {/* <Divider orientationMargin="0" verticalMarginInline={0}></Divider> */}
                    <div>电桩ID:{record?.deviceId}</div>
                    <div>电桩名称:{record?.deviceName}</div>
                </div>
            },
        },
        {
            title: '站点名称',
            dataIndex: 'stationName',
            valueType: 'text',
            width: 120,
            hideInTable: true
        },
        {
            title: '电站信息',
            dataIndex: 'transactionNo',
            valueType: 'text',
            search: false,
            render: (_: any, record: any) => {
                return <div>
                    <div>电站ID:{record?.stationId}</div>
                    <div>电站昵称:{record?.stationName}</div>
                    <div>
                        电站电话:{record.stationTel}
                    </div>
                </div>
            },
        },
        {
            title: '商户信息',
            dataIndex: 'merchantId',
            valueType: 'text',
            render: (_: any, record: any) => {
                return <div>
                    <div>商户ID:{record?.merchantId}</div>
                    <div>商户昵称:{record?.merchantName}</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: 'option',
            width: 170,
            valueType: 'option',
            fixed: 'right',
            render: (_, record: any) => {
                return <div className='flex flex-wrap'>
                    <Button
                        size="small"
                        type="primary"
                        style={{ marginRight: 10, marginBottom: 10 }}
                        onClick={() => {
                            stopCharging({
                                orderId: record.id
                            }).then((res) => {
                                message.success('结束充电成功');
                                actionRef.current.reload();
                            })
                        }}
                    >强制结束充电</Button>
                    <Button
                        size="small"
                        type="primary"
                        style={{ marginRight: 10, marginBottom: 10 }}
                        onClick={() => {
                            setRow1(record.id)
                            setTable1(true)
                        }}
                    >
                        交易数据
                    </Button>
                    <Button
                        size="small"
                        type="primary"
                        onClick={async () => {
                            setRow2(record.id)
                            setTable2(true)
                        }}
                    >
                        实时数据
                    </Button>
                    <Button
                        size="small"
                        type="primary"
                        style={{ marginRight: 10, marginBottom: 10 }}
                        onClick={async () => {
                            setRow3(record.id)
                            setTable3(true)
                        }}
                    >
                        订单状态
                    </Button>
                    <Button
                        size="small"
                        type="primary"
                        onClick={async () => {
                            setRow5(record.id)
                            setTable5(true)
                        }}
                    >
                        订单金额
                    </Button>
                    <Button
                        size="small"
                        type="primary"
                        style={{ marginRight: 10, marginBottom: 10 }}
                        onClick={async () => {
                            getPriceTemplateSnapshot({ ptsId: record.ptsId }).then((res) => {
                                setRow6(res.data)
                                setTable6(true)
                            })
                        }}
                    >
                        计价规则
                    </Button>
                    <Button
                        size="small"
                        type="primary"
                        danger
                        onClick={async () => {
                            setRow4(record.id)
                            setModalVisit(true)
                        }}
                    >
                        退单
                    </Button>

                </div>
            },
        },
    ];

    return (
        <PageContainer>
            <div style={{ width: '100%', float: 'right' }}>
                <Table1
                    values={row1}
                    modalOpenState={table1}
                    onModalOpenState={setTable1}
                />
                <Table2
                    values={row2}
                    modalOpenState={table2}
                    onModalOpenState={setTable2}
                />
                <Table3
                    values={row3}
                    modalOpenState={table3}
                    onModalOpenState={setTable3}
                />
                <Table4
                    values={row5}
                    modalOpenState={table5}
                    onModalOpenState={setTable5}
                />
                {/* 退单 */}
                <Refund modalVisit={modalVisit} id={row4} setModalVisit={setModalVisit} />
                <ProTable
                    actionRef={actionRef}
                    rowKey="id"
                    key="logList"
                    search={{
                        labelWidth: 120,
                        defaultCollapsed: false,
                    }}
                    scroll={{ x: 2700 }}
                    toolBarRender={() => [
                        <Button type="primary" onClick={async () => {
                            let _res = await exportExcel(searchParams)
                            exportData(_res, '订单列表')
                        }}>导出</Button>,
                    ]}
                    request={async (params, sorter, filter) => {
                        setSearchParams(params)
                        let { data } = await orderPage(params)
                        return {
                            data: data?.records || [],
                            total: data?.total,
                        };
                    }}
                    columns={columns}
                />
            </div>
            <UpdateForm values={row6 || {}} open={table6} onCancel={() => {
                setTable6(false);
                setRow6(undefined);
            }} onSubmit={async (values) => {
                setTable6(false);
                setRow6(undefined);
            }} />
        </PageContainer>
    );
};

export default LogTableList;
