import { useRef, useState, useEffect } from 'react';
import { connect } from '@umijs/max';
import type { ActionType } from '@ant-design/pro-components';
import {
    ProTable
} from '@ant-design/pro-components';
import {
    Button, ConfigProvider, Modal,
    Radio
} from 'antd';
import { GetCustomerList, GetCustomerDetail, PostCustomerUpdate, PostCustomerDel } from '@/apis/api';
import { Imageprefix } from '@/constants';

const selectfieldNames = { label: 'name', value: 'id' };


const PagesMainJobseekerAccountTable: React.FC = ({ dispatch, getId, dictModel, openModel }: any) => {
    const actionRef = useRef<ActionType>();
    const [list, setList] = useState<object[]>([])
    const [total, setTotal] = useState<number>(0)
    const [page, setPage] = useState<number>(1)
    const [pageSize, setPageSize] = useState<number>(10)

    const setId = (id: number) => {
        getId(id)
    }

    useEffect(() => {
        if (!openModel.openModal) {
            actionRef.current.reload();
        }
    }, [openModel.openModal])

    return (
        <>
            <ConfigProvider
                theme={{
                    token: {
                        colorPrimary: '#4FBE70',
                        colorLink: '#4FBE70',
                    }
                }}
            >

                <ProTable
                    size='small'
                    scroll={{ y: 480, x: 'auto' }}
                    bordered={true}
                    actionRef={actionRef}
                    dataSource={list}
                    search={{ span: 8, labelWidth: 'auto' }}
                    rowSelection={{
                        type: 'checkbox'
                    }}
                    columns={[
                        {
                            title: '用户',
                            dataIndex: 'username',
                            width: 200
                        }, {
                            title: '邮箱',
                            dataIndex: 'email',
                            search: false,
                            width: 200
                        },
                        {
                            title: '联系方式',
                            dataIndex: 'mobile',
                            search: false,
                            width: 200
                        },
                        {
                            title: '登录次数',
                            dataIndex: 'login_count',
                            search: false,
                            width: 200
                        },
                        {
                            title: '账号状态',
                            dataIndex: 'status',
                            width: 200,
                            render: (_, record) => (<>
                                <Radio.Group size='small' value={record.status} onChange={async (e) => {
                                    PostCustomerUpdate({
                                        id: record.id,
                                        status: e.target.value
                                    }).then(res => {
                                        actionRef.current?.reload()
                                    })
                                    actionRef.current?.reload();
                                }}>
                                    <Radio value={1}>使用中</Radio>
                                    <Radio value={2}>已禁用</Radio>
                                </Radio.Group>
                            </>),
                            valueType: 'select',
                            valueEnum: {
                                0: { text: '全部' },
                                1: {
                                    text: '使用中',
                                },
                                2: {
                                    text: '已禁用',
                                }
                            },
                        },
                        {
                            title: '注册日期',
                            dataIndex: 'created_at',
                            search: false,
                            width: 200,
                        },
                        {
                            title: '操作',
                            key: 'option',
                            valueType: 'option',
                            render: (_, record, action) => [
                                <Button key='1' type='link' onClick={() => {
                                    setId(record)

                                    dispatch({ type: 'openModel/getOpenModal', payload: true })
                                }}>编辑</Button>,
                            ],
                        },
                    ]}
                    rowKey="id"
                    pagination={{
                        current: page,
                        pageSize: pageSize,
                        showSizeChanger: true,
                        total: total,
                        pageSizeOptions: [9, 18, 27, 99],
                        onChange(page, pageSize) {
                            setPage(page)
                            setPageSize(pageSize)
                        },
                        onShowSizeChange(current, size) {
                            setPage(current)
                            setPageSize(size)
                        }
                    }}
                    request={async (params = {} as Record<string, any>) =>
                        GetCustomerList({
                            page: page,
                            pagesize: pageSize,
                            sort: 'id',
                            sortby: 'desc',
                            keyword: params.username,
                            status: params.status,
                            role: 1
                        }).then(res => {
                            setList(res.data.customers)
                            setTotal(res.data.total)
                        })
                    }
                    headerTitle="简历列表"
                   
                />
            </ConfigProvider>

        </>



    );
};


export default connect(({ dictModel, openModel }: any) => ({
    dictModel,
    openModel
}))(PagesMainJobseekerAccountTable);