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, message } from 'antd';
import { getCompanyList, GetCompanyInfo, updateCompany, PostCompanyExport } from '@/apis/api';
import { Imageprefix } from '@/constants';

const PagesMainCompanyListTable: React.FC = ({ dispatch, openModel, getId }: 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'
                        bordered={true}
                        scroll={{ x: 1300 }}
                        actionRef={actionRef}
                        dataSource={list}
                        columns={[
                            {
                                title: 'ID',
                                dataIndex: 'id',
                                width: 100,
                                fixed: 'left',
                            },
                            {
                                title: '企业名称',
                                dataIndex: 'full_name',
                                width: 240,
                            },
                            {
                                title: '来源',
                                dataIndex: 'origin_text',
                                search: false,
                                width: 100,
                            },
                            {
                                title: '登录次数',
                                dataIndex: 'login_count',
                                search: false,
                                width: 100
                            },
                            {
                                title: '点击次数',
                                dataIndex: 'click_count',
                                search: false,
                                width: 100
                            },
                            {
                                title: '会员类型',
                                dataIndex: 'member_type',
                                width: 100,
                                hidden: true,
                                valueType: 'select',
                                valueEnum: {
                                    0: { text: '全部' },
                                    1: {
                                        text: '试用申请中',
                                    },
                                    2: {
                                        text: '试用正式',
                                    },
                                    3: {
                                        text: '普通申请中',
                                    },
                                    4: {
                                        text: '普通正式',
                                    },
                                    5: {
                                        text: 'VIP申请中',
                                    },
                                    6: {
                                        text: 'VIP正式',
                                    },
                                },
                            },
                            {
                                title: '会员类型',
                                dataIndex: 'member_type_text',
                                width: 100,
                                search: false,
                                render: (_, record) => (<>
                                    {
                                        record.member_type_text && <Button type="primary" size='small' onClick={() => {
                                            sessionStorage.setItem('vip_company_info', JSON.stringify(record))
                                            history.push({
                                                pathname: '/company/vip'
                                            })
                                        }}>
                                            {record.member_type_text}
                                        </Button>
                                    }

                                </>),
                                valueType: 'select',
                                valueEnum: {
                                    0: { text: '全部' },
                                    1: {
                                        text: '试用申请中',
                                    },
                                    2: {
                                        text: '试用正式',
                                    },
                                    3: {
                                        text: '普通申请中',
                                    },
                                    4: {
                                        text: '普通正式',
                                    },
                                    5: {
                                        text: 'VIP申请中',
                                    },
                                    6: {
                                        text: 'VIP正式',
                                    },
                                },
                            },
                            {
                                title: '开始时间',
                                dataIndex: 'start_date',
                                search: false,
                                width: 140
                            },
                            {
                                title: '到期时间',
                                dataIndex: 'end_date',
                                search: false,
                                width: 140
                            }, {
                                title: '剩余点数',
                                dataIndex: 'code',
                                search: false,
                                width: 100
                            },
                            {
                                title: '会员状态',
                                dataIndex: 'member_status',
                                width: 100,
                                hidden: true,
                                valueType: 'select',
                                valueEnum: {
                                    0: { text: '全部' },
                                    1: {
                                        text: '待审',
                                    },
                                    2: {
                                        text: '正常',
                                    },
                                    3: {
                                        text: '到期',
                                    },
                                    4: {
                                        text: '推荐',
                                    }
                                },
                            },
                            {
                                title: '状态',
                                dataIndex: 'status',
                                hidden: true,
                                valueType: 'select',
                                valueEnum: {
                                    0: { text: '全部' },
                                    1: {
                                        text: '开通',
                                    },
                                    2: {
                                        text: '关闭',
                                    },
                                },
                            },
                            {
                                title: '会员状态',
                                dataIndex: 'member_status_text',
                                width: 120,
                                search: false,
                                valueType: 'select',
                                valueEnum: {
                                    0: { text: '全部' },
                                    1: {
                                        text: '待审',
                                    },
                                    2: {
                                        text: '正常',
                                    },
                                    3: {
                                        text: '到期',
                                    },
                                    4: {
                                        text: '推荐',
                                    }
                                },
                            },
                            {
                                title: '企业照片',
                                dataIndex: 'photo',
                                search: false,
                                width: 100,
                                render: (_, record) => (<>
                                    <Image src={`${Imageprefix + record.photo}`} width={40} height={40} />
                                </>
                                )
                            }, {
                                title: '照片审核',
                                dataIndex: 'photo_status_text',
                                search: false,
                                width: 120,
                                render: (_, record) => (<>
                                    <Select
                                        size="small"
                                        style={{ width: 100 }}
                                        value={record.photo_status_text}
                                        options={[
                                            {
                                                label: '待审',
                                                value: 1,
                                            },
                                            {
                                                label: '通过',
                                                value: 2,
                                            },
                                            {
                                                label: '不通过',
                                                value: 3,
                                            },
                                        ]}
                                        onChange={async (value) => {
                                            let info = await GetCompanyInfo({ id: record.id });
                                            let res = await updateCompany({ ...info.data, photo_status: value });
                                            actionRef.current.reload();
                                        }}
                                    ></Select>
                                </>)
                            },
                            {
                                title: '营业执照',
                                dataIndex: 'license_path',
                                search: false,
                                width: 120,
                                render: (_, record) => (<>
                                    <Image src={`${Imageprefix}${record.license_path}`} width={40} height={40} />
                                </>
                                )
                            },
                            {
                                title: '营业执照审核',
                                dataIndex: 'license_status_text',
                                search: false,
                                width: 120,
                                render: (_, record) => (<>
                                    <Select
                                        size="small"
                                        style={{ width: 100 }}
                                        value={record.license_status_text}
                                        options={[
                                            {
                                                label: '待审',
                                                value: 1,
                                            },
                                            {
                                                label: '通过',
                                                value: 2,
                                            },
                                            {
                                                label: '不通过',
                                                value: 3,
                                            },
                                        ]}
                                        onChange={async (value) => {
                                            let info = await GetCompanyInfo({ id: record.id });
                                            let res = await updateCompany({ ...info.data, license_status: value });
                                            actionRef.current.reload();
                                        }}
                                    ></Select>
                                </>)
                            },
                            {
                                title: '登录账号',
                                dataIndex: 'login_name',
                                width: 200
                            },
                            {
                                title: '操作',
                                width: 300,
                                key: 'option',
                                valueType: 'option',
                                fixed: 'right',
                                render: (_, record, action) => [
                                    <Button key='1' type='link' onClick={() => {
                                        setId(record.id)
                                        dispatch({ type: 'openModel/getOpenModal', payload: true })
                                    }}>编辑</Button>,
                                    <Button key='2' type='link' onClick={() => {
                                        GetCompanyInfo({ id: record.id }).then(res => {
                                            sessionStorage.setItem('company_info', JSON.stringify(res.data))
                                            history.push({
                                                pathname: '/company/department'
                                            })
                                        })
                                    }}>查看部门</Button>,
                                    <TableDropdown
                                        key="actionGroup"
                                        menus={[
                                            {
                                                name: '查看职位',
                                                key: '3',
                                                onClick: () => {
                                                    GetCompanyInfo({ id: record.id }).then(res => {
                                                        sessionStorage.setItem('post_company_info', JSON.stringify(res.data))
                                                        history.push({
                                                            pathname: '/company/post'
                                                        })
                                                    })
                                                },
                                            },
                                            {
                                                name: '子账号解绑',
                                                key: '4',
                                                onClick: () => {
                                                    setId(record.id)
                                                    dispatch({ type: 'openModel/getOpenBindModal', payload: true })
                                                },
                                            },
                                        ]}
                                    />,
                                ],
                            },
                        ]}
                        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>) =>
                            getCompanyList({
                                page: page,
                                pagesize: pageSize,
                                sort: 'id',
                                sortby: 'desc',
                                id: params.id,
                                keyword: params.full_name,
                                login_name: params.login_name,
                                member_type: params.member_type,
                                member_status: params.member_status,
                                status: params.status,
                            }).then(res => {
                                setList(res.data.list)
                                setTotal(res.data.total)
                            })
                        }
                        headerTitle="企业列表"
                        toolBarRender={() => [
                            <Button type="primary" onClick={() => {
                                message.info('数据导出需要时间，请耐心等待')
                                PostCompanyExport().then(res => {
                                    let url = Imageprefix + res.data.excel_url;
                                    window.open(url);
                                    message.info('数据导出完毕')
                                })
                            }}>
                                导出数据
                            </Button>,
                            <Button type="primary" onClick={() => {
                                dispatch({ type: 'openModel/getOpenModal', payload: true })
                            }}>
                                添加企业
                            </Button>
                        ]}
                    />
            </ConfigProvider>
        </>
    );
};


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