import { invoicePage, exportExcel } from '@/services/payment/index';
import { merchantPage } from '@/services/merchant/index';

import React, { useRef, useEffect, useState } from 'react';
import { useIntl, useAccess } from '@umijs/max';
import { message, Tag, Select, Button } from 'antd';
import { ActionType, PageContainer, ProTable } from '@ant-design/pro-components';
import { exportData } from '@/utils/func';
import SetStstus from './setStstus';


const InvoiceTableList: React.FC = () => {
    const actionRef = useRef<ActionType>();
    const [searchParams, setSearchParams] = useState(null);
    const [modalVisit, setModalVisit] = useState<any>(false)
    const [row1, setRow1] = useState<any>()

    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: any = [
        {
            title: 'ID',
            dataIndex: 'id',
            valueType: 'text',
            search: false,
        },
        {
            title: '用户信息',
            dataIndex: 'userId',
            valueType: 'text',
            search: false,
            width: 200,
            render: (_: any, record: any) => {
                return <div>
                    <div>用户ID：{record?.userId}</div>
                    <div>用户昵称：{record?.nickName}</div>
                    <div>手机号码：{record?.phone}</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: 'invoiceType',
            valueType: 'text',
            render: (_: any, record: any) => {
                return _ == 1 ? '普通发票' : _ == 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: 1
                        },
                        {
                            name: '专用发票',
                            id: 2
                        },
                    ]}
                />
            },
        },
        {
            title: '主体类型',
            dataIndex: 'subjectType',
            valueType: 'text',
            render: (_: any, record: any) => {
                return _ == 1 ? '企业' : _ == 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: 1
                        },
                        {
                            name: '个人',
                            id: 2
                        },
                    ]}
                />
            },
        },
        {
            title: '发票抬头',
            dataIndex: 'invoiceTitle',
            valueType: 'text',
            search: false,
        },
        {
            title: '税号',
            dataIndex: 'taxNumber',
            valueType: 'text',
            search: false,
        },
        {
            title: '开票金额',
            dataIndex: 'invoiceAmount',
            valueType: 'number',
            search: false,
        },
        {
            title: '电费',
            dataIndex: 'electricityAmount',
            valueType: 'number',
            search: false,
        },
        {
            title: '注册电话-专用发票',
            dataIndex: 'registrationPhone',
            valueType: 'text',
            search: false,
        },
        {
            title: '注册地址-专用发票',
            dataIndex: 'registrationAddress',
            valueType: 'text',
            search: false,
        },
        {
            title: '开户行名称-专用发票',
            dataIndex: 'bankName',
            valueType: 'text',
            search: false,
        },
        {
            title: '开户行账户-专用发票',
            dataIndex: 'bankAccount',
            valueType: 'text',
            search: false,
        },
        {
            title: '发票备注(内容打印在发票)',
            dataIndex: 'invoiceRemark',
            valueType: 'text',
            search: false,
        },
        {
            title: '收票人姓名',
            dataIndex: 'name',
            valueType: 'text',
            search: false,
        },
        {
            title: '发票邮寄地址',
            dataIndex: 'address',
            valueType: 'text',
            search: false,
        },
        {
            title: '联系人电话',
            dataIndex: 'phone',
            valueType: 'text',
            search: false,
        },
        {
            title: '联系人邮箱',
            dataIndex: 'email',
            valueType: 'text',
            search: false,
        },
        {
            title: '状态',
            dataIndex: 'status',
            valueType: 'text',
            render: (_: any, record: any) => {
                // :0-已提交;1-已开票;-1取消申请;
                return _ == 0 ? <Tag color='blue'>已提交</Tag> : _ == 1 ? <Tag color='green'>已开票</Tag> : _ == -1 ? <Tag color='red'>取消申请</Tag> : _
            },
            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: -1
                        },
                    ]}
                />
            },
        },
        {
            title: '开票服务商',
            dataIndex: 'merchantInvoice',
            valueType: 'text',
            search: false,
        },
        {
            title: '备注',
            dataIndex: 'description',
            valueType: 'text',
            search: false,
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            valueType: 'text',
            search: false,
        },
        {
            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={() => {
                            setRow1(record)
                            setModalVisit(true)
                        }}
                    >
                        修改状态
                    </Button>
                </div>
            },
        },
    ];

    const tableSan = (data)=>{
        actionRef.current.reload();
    }

    return (
        <PageContainer>
            <div style={{ width: '100%', float: 'right' }}>
                <SetStstus onFinishOk={tableSan} modalVisit={modalVisit} values={row1} setModalVisit={setModalVisit} />
                <ProTable
                    actionRef={actionRef}
                    rowKey="id"
                    scroll={{ x: 4000 }}
                    key="logList"
                    search={{
                        labelWidth: 120,
                        defaultCollapsed: false,
                    }}
                    toolBarRender={() => [
                        <Button type="primary" onClick={async () => {
                            let _res = await exportExcel(searchParams)
                            exportData(_res, '发票列表')
                        }}>导出</Button>,
                    ]}
                    request={async (params, sorter, filter) => {
                        setSearchParams(params)
                        let { data } = await invoicePage(params)
                        return {
                            data: data?.records || [],
                            total: data?.total,
                        };
                    }}
                    columns={columns}
                />
            </div>
        </PageContainer>
    );
};

export default InvoiceTableList;
