import { useRef, useState, useEffect } from 'react';
import { connect, history } from '@umijs/max';
import type { ActionType, ProFormInstance } from '@ant-design/pro-components';
import {
    ProTable, ProForm
} from '@ant-design/pro-components';
import { Button, ConfigProvider, Tag, Modal, Radio, Row, Col, Descriptions, Space, Image } from 'antd';
import { Imageprefix } from '@/constants';
import { listRecruitment, GetRecruitmentDetail } from '@/apis/api';

import UploadModel from '@/components/Common/upload';


const MainFairListPage: React.FC = ({ dispatch, getId, 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])

    const [uploadedFilephotoName, setUploadedFilephotoName] = useState<string>('');
    const uploadedFilephotoNameRef = useRef<string>('');
    const handleFileUploadedphoto = (filename: string) => {
        setUploadedFilephotoName(filename);
    };

    useEffect(() => {
        uploadedFilephotoNameRef.current = uploadedFilephotoName;
    }, [uploadedFilephotoName])


    const expandedRowRender = (record) => {
        return (
            <>
                <Space direction='vertical' style={{ width: '100%' }}>
                    <Descriptions title="参会信息" bordered column={3} contentStyle={{ fontWeight: 'bold' }} labelStyle={{ width: 180 }}>
                        <Descriptions.Item label="参与的企业总数">{record.join_count}</Descriptions.Item>
                        <Descriptions.Item label="已审核企业总数">{record.job_count}</Descriptions.Item>
                        <Descriptions.Item label="参与职位数">{record.job_count}</Descriptions.Item>
                        <Descriptions.Item label="需求人数">{record.recruiting_num}</Descriptions.Item>
                    </Descriptions>
                </Space >

            </>
        );
    };

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

                    }
                }}
            >

                <ProTable
                    scroll={{ y: 480, x: 'auto' }}
                    bordered={true}
                    actionRef={actionRef}
                    dataSource={list}
                    search={{ span: 8, labelWidth: 'auto' }}
                    rowSelection={{
                        type: 'checkbox'
                    }}
                    expandable={{
                        expandedRowRender
                    }}
                    columns={[{
                        title: 'ID',
                        dataIndex: 'id',
                        width: 200,
                    },
                    {
                        title: '招聘会名称',
                        dataIndex: 'title',
                        width: 400,
                    }, {
                        title: '地点',
                        dataIndex: 'address',
                        width: 200,
                        search: false
                    }, {
                        title: '开始时间',
                        dataIndex: 'open_date',
                        width: 200,
                        search: false
                    }, {
                        title: '开启状态',
                        dataIndex: 'status',
                        width: 300,
                        render: (_, record) => (<>
                            <Radio.Group size='small' value={record.status} onChange={async (e) => {
                               
                                actionRef.current?.reload();
                            }}>
                                <Radio value={1}>已开启</Radio>
                                <Radio value={2}>已关闭</Radio>
                            </Radio.Group>
                        </>),
                        valueType: 'select',
                        valueEnum: {
                            0: { text: '全部' },
                            1: {
                                text: '已开启',
                            },
                            2: {
                                text: '已关闭',
                            }
                        },
                    }, {
                        title: '封面图',
                        dataIndex: 'photo',
                        width: 200,
                        search: false,
                        render: (_, record) => (<>
                                <Image src={`${Imageprefix}${record.photo}`} width={60} height={60} />
                        </>
                        )
                    },
                    {
                        title: '操作',
                        key: 'option',
                        valueType: 'option',
                        render: (_, record, action) => [
                            <Button key='1' type='link' onClick={() => {
                                setId(record)
                                dispatch({ type: 'openModel/getOpenModal', payload: true })
                            }}>编辑</Button>,
                            <Button size='small' type='link'  onClick={() => {
                                Modal.confirm({
                                    title: '更换图片',
                                    content: (<>
                                        <ProForm submitter={{ render: false }}>
                                            <UploadModel multiple={false} form_name="photo" image_length={1} uploadTxt="更换图片" image_type={3} imageUrl={record.photo} onUploadComplete={handleFileUploadedphoto}></UploadModel>
                                        </ProForm>
                                    </>),
                                    async onOk() {
                                        // let info = await GetCompanyInfo({ id: record.id });
                                        // let res = await updateCompany({ ...info.data, license_path: uploadedFilelicenseNameRef.current });
                                        // setUploadedFilelicenseName('');
                                        actionRef.current?.reload();
                                    },
                                    onCancel() {
                                        console.log('Cancel');
                                    },
                                    okText: '保存',
                                    cancelText: '取消',
                                    centered: true,
                                });
                            }}>更换图片</Button>,
                            <Button key='2' type='link' onClick={() => {
                                setId(record)
                                dispatch({ type: 'openModel/getOpenFairDetailModal', payload: true })

                            }}>详情</Button>,
                            <Button key='3' type='link' onClick={() => {
                                setId(record)
                                dispatch({ type: 'openModel/getOpenFairDetailModal', 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>) =>
                        listRecruitment({
                            page: page,
                            pagesize: pageSize,
                            sort: 'id',
                            sortby: 'desc',
                            keyword: params.title,
                            status: params.status ? params.status : 0
                        }).then(res => {
                            setList(res.data.recruitments)
                            setTotal(res.data.total)
                        })
                    }
                    toolBarRender={() => [<Button type="primary" onClick={() => {
                        Modal.confirm({
                            title: '请选择对批量数据进行何种操作',
                            content: (<>
                                <div>参数：id, status, open_date, close_date</div>
                                <h4 style={{ fontWeight: 'bold' }}>状态：</h4>
                                <Radio.Group size='small' onChange={async (e) => {

                                    actionRef.current?.reload();
                                }}>
                                    <Row gutter={[20, 20]} style={{ padding: 20 }}>
                                        <Col span={12}>
                                            <Radio value={1}>开启</Radio>
                                        </Col>
                                        <Col span={12}>
                                            <Radio value={1}>关闭</Radio>
                                        </Col>
                                    </Row>
                                </Radio.Group>
                                <h4 style={{ fontWeight: 'bold' }}>时长：</h4>
                                <Radio.Group size='small' onChange={async (e) => {
                                    actionRef.current?.reload();
                                }}>
                                    <Row gutter={[20, 20]} style={{ padding: 20 }}>
                                        <Col span={12}>
                                            <Radio value={1}>1天</Radio>
                                        </Col>
                                        <Col span={12}>
                                            <Radio value={1}>3天</Radio>
                                        </Col>
                                        <Col span={12}>
                                            <Radio value={1}>7天</Radio>
                                        </Col>
                                        <Col span={12}>
                                            <Radio value={1}>15天</Radio>
                                        </Col>
                                        <Col span={12}>
                                            <Radio value={1}>30天</Radio>
                                        </Col>
                                    </Row>
                                </Radio.Group>
                            </>),
                            onOk() {

                            },
                            onCancel() {
                                console.log('Cancel');
                            },
                            okText: '保存',
                            cancelText: '取消',
                            centered: true
                        });
                    }}>
                        批量管理招聘会
                    </Button>,
                    <Button type="primary" onClick={() => {
                        dispatch({ type: 'openModel/getOpenModal', payload: true })
                    }}>
                        添加招聘会
                    </Button>
                    ]}
                    headerTitle="招聘会列表"
                />
            </ConfigProvider>
        </>
    );
};




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