import React, { useRef, useEffect, useState } from 'react';
import { history } from '@umijs/max';
import CreateFormModal from './components/CreateFormModal';
import CancellationModal from './components/CancellationModal';
import { Select, Space, Image, Button } from 'antd';
import {
    PageContainer,
    ProTable,
    ActionType
} from '@ant-design/pro-components';

import dayjs from 'dayjs';

import { exportLink } from '@/utils/func';

import AuthConsumer from '@/components/Authority';

import { activity10CarUserList, activity10CarUserAdd, activity10CarUserRepeal } from '@/services/activity/index';
import { usersPage } from '@/services/user/user';
// import services from '@/services/admin';

// const { shopActivityItems, shopDeleteItems } = services.ShopActivityController;
// const { shopItems } = services.ShopController;
// const { shopActivity } = services.ShopActivity;
export default () => {
    const [createFormModal, setCreateFormModal] = useState(false);

    const [cancellationModal, setCancellationModal] = useState(false)

    const initRow = {
        shop_id: '',
        todate: '',
    };

    const initRowCancellationModal = {
        userName: "",
        phone: "",
    }


    const [row, setRow] = useState(initRow);



    const [rowCancellationModal, setRowCancellationModal] = useState(initRowCancellationModal);


    const actionRef = useRef<ActionType>();

    const [config, setConfig] = useState();

    const [searchParams, setSearchParams] = useState(null);

    const [shopOption, setShopOption] = useState([]);
    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 handleCreate = async (fields) => {
        setRow(fields);
        const { success } = await activity10CarUserAdd(fields);

        if (success) {
            setRow(initRow);
            actionRef.current?.reload();
            setCreateFormModal(false);
        }
    };

    const handleCreateFormModal = async (fields) => {
        setRowCancellationModal(fields)
        const { success } = await activity10CarUserRepeal(fields);
        if (success) {
            setRowCancellationModal(initRow);
            actionRef.current?.reload();
            setCancellationModal(false);
        }

    }

    const columns = [
        {
            title: '活动名称',
            dataIndex: 'title',
            search: false,
        },
        {
            title: '投资人',
            dataIndex: 'userId',
            render: (_, record) => {
                return <>
                    <div>用户名：{record?.usersInfo?.userName}</div>
                    <div>手机号：{record?.usersInfo?.phone}</div>
                    <div>等级：{record?.usersInfo?.level}</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: 'freezeDate',
            search: false,
            render: (_, record) => {
                return record?.freezeDate + '个月'
            },
        },
        {
            title: '有效期',
            dataIndex: 'expirationDate',
            search: false,
        },
        {
            title: '客户资料',
            dataIndex: 'information',
            search: false,
            render: (_, record) => {

                console.log(_);


                let data = {}
                if (_ && _ != '-') {
                    data = JSON.parse(_)
                }

                return <>
                    <div>车辆型号：{data?.carModel}</div>
                    <div>车主姓名：{data?.ownerName}</div>
                    <div>车牌号码：{data?.licensePlateNumber}</div>
                    <div>车架号码：{data?.chassisNumber}</div>
                    <div>还款卡号：{data?.repaymentCardNumber}</div>
                    <div>银行名称：{data?.bankName}</div>
                    <div>还款日期：{data?.repaymentDate}</div>
                </>
            },
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            search: false,
        }
    ];

    return (
        <PageContainer
            ghost
        >
            <>
                <CreateFormModal
                    values={row}
                    modalOpenState={createFormModal}
                    onModalOpenState={setCreateFormModal}
                    onSubmit={handleCreate}
                />
                <CancellationModal
                    values={rowCancellationModal}
                    modalOpenState={cancellationModal}
                    onModalOpenState={setCancellationModal}
                    onSubmit={handleCreateFormModal}
                />
                <ProTable
                    actionRef={actionRef}
                    rowKey="id"
                    search={{
                        defaultCollapsed: false,
                    }}
                    toolBarRender={() => [
                        <Button
                            type="primary"
                            style={{ background: '#67c23a' }}
                            onClick={() => {
                                setCreateFormModal(true)
                            }}
                        >
                            添加
                        </Button>,
                        // <AuthConsumer action={'admin/shop_activity/export'} key="admin/shop_activity/export">
                        //     <Button type="primary" onClick={() => {
                        //         window.location.href = exportLink(searchParams, '/admin/shop_activity/export');
                        //     }}>导出表格</Button>
                        // </AuthConsumer>,
                        <Button
                            danger
                            type="primary"
                            onClick={() => {
                                setCancellationModal(true)
                            }}
                        >
                            作废
                        </Button>
                    ]}
                    request={async (params, sorter, filter) => {
                        setSearchParams({ token: '', ...params });
                        const { data, success } = await activity10CarUserList({
                            ...params,
                            sorter,
                            filter,
                        });
                        return {
                            data: data?.records || [],
                            total: data?.total,
                            success,
                        };
                    }}
                    columns={columns}
                />
            </>
        </PageContainer>
    );
};
