import { useRef, useState, useEffect } from 'react';
import { connect, history } from '@umijs/max';
import type { ActionType, ProFormInstance } from '@ant-design/pro-components';
import {
    ProTable, TableDropdown, PageContainer
} from '@ant-design/pro-components';
import { Button, Image, ConfigProvider, Select, Modal, message } from 'antd';
import { GetCompanyRecruiters, GetCompanyInfo, updateCompany, PostCompanyExport, PostCompanyTurnJobseeker } from '@/apis/api';
import { Imageprefix } from '@/constants';

const PagesMainCompanyListHr: React.FC = ({ dispatch, openModel, id }: any) => {
    const actionRef = useRef<ActionType>();
    const [openPreview, setOpenPreview] = useState(false);

    const [list, setList] = useState<object[]>([])
    const [total, setTotal] = useState<number>(0)
    const [page, setPage] = useState<number>(1)
    const [pageSize, setPageSize] = useState<number>(10)


    useEffect(() => {
        setOpenPreview(openModel.openBindModal)
    }, [openModel.openBindModal])

    return (
        <>
            <ConfigProvider
                theme={{
                    token: {
                        colorPrimary: '#4FBE70',
                        colorLink: '#4FBE70',
                    }
                }}
            >
                <Modal
                    open={openPreview}
                    title=""
                    centered
                    maskClosable={false}
                    footer={null}
                    destroyOnClose
                    width={1000}
                    onCancel={() => {
                        dispatch({ type: 'openModel/getOpenBindModal', payload: false })
                    }}
                >

                    <ProTable
                        search={false}
                        size='small'
                        bordered={true}
                        scroll={{ x: 1300 }}
                        actionRef={actionRef}
                        dataSource={list}
                        columns={[
                            {
                                title: '账号',
                                dataIndex: 'username',
                                search: false
                            }, {
                                title: '手机号',
                                dataIndex: 'mobile',
                                search: false
                            }, {
                                title: '绑定时间',
                                dataIndex: 'updated_at',
                                search: false
                            },
                            {
                                title: '操作',
                                width: 300,
                                key: 'option',
                                valueType: 'option',
                                fixed: 'right',
                                render: (_, record, action) => [
                                    <Button key='1' type='link' onClick={() => {
                                        PostCompanyTurnJobseeker({ company_id: record.company_id, customer_id: record.id, role: 1 }).then(res => {
                                            message.success('解除授权成功');
                                            actionRef.current.reload();
                                        })
                                    }}>解除授权</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>) =>
                            GetCompanyRecruiters({
                                page: page,
                                pagesize: pageSize,
                                sort: 'id',
                                sortby: 'desc',
                                id: id
                            }).then(res => {
                                setList(res.data.customers)
                                setTotal(res.data.total)
                            })
                        }
                        headerTitle="管理已经授权的账号"
                    />

                </Modal>
            </ConfigProvider>

        </>
    );
};


export default connect(({ openModel }: any) => ({
    openModel
}))(PagesMainCompanyListHr);