
import { useRef, useState, useEffect } from 'react';
import type { ActionType, ProFormInstance } from '@ant-design/pro-components';
import { connect } from '@umijs/max';
import {
    ProTable
} from '@ant-design/pro-components';
import { ConfigProvider, Modal, Tabs,  Button, Select, Typography, Tag } from 'antd';
import { GetRecruitmentDetail, GetRecruitmentBookList, PostRecruitmentBookUpdate } from '@/apis/api';
import he from 'he';

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

const MainFairListDetail: React.FC = ({ dispatch, dictModel, openModel, id }: 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 [openPreview, setOpenPreview] = useState(false);
    const [detail, setDetail] = useState(null)

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


    return (
        <>
            <ConfigProvider
                theme={{

                }}
            >
                <Modal
                    open={openPreview}
                    centered
                    footer={null}
                    okText="招聘会详情"
                    maskClosable={false}
                    destroyOnClose
                    width={1000}
                    onCancel={() => {
                        dispatch({ type: 'openModel/getOpenFairDetailModal', payload: false })
                    }}
                    afterOpenChange={async (open) => {
                        if (open) {
                            let res = await GetRecruitmentDetail({ id: id.id })
                            setDetail(res.data)
                        }
                    }}
                >
                    {
                        detail && <>
                            <Tabs
                                destroyInactiveTabPane={true}
                                type="card"
                                items={[
                                    {
                                        label: '招聘会详情',
                                        key: '1',
                                        children: (
                                            <>
                                                <Typography.Title  level={3}>{detail.title}</Typography.Title>
                                                <Typography.Paragraph> {detail.status === 1 ? <Tag color="green">进行中</Tag> : <Tag color="red">已结束</Tag>}  活动时间：{detail.open_date}-{detail.close_date ? detail.close_date : '待定'}</Typography.Paragraph>
                                                <div className="ql-editor" dangerouslySetInnerHTML={{ __html: he.decode(detail.content) }} />
                                            </>
                                        ),
                                    },
                                    {
                                        label: '参与企业',
                                        key: '2',
                                        children: (
                                            <>
                                                <ProTable
                                                    search={false}
                                                    size='small'
                                                    bordered={true}
                                                    actionRef={actionRef}
                                                    dataSource={list}
                                                    columns={[
                                                        {
                                                            title: '企业名称',
                                                            dataIndex: 'company_name',
                                                            fixed: 'left',
                                                            search: false
                                                        }, {
                                                            title: '审核状态',
                                                            dataIndex: 'status',
                                                            search: false,
                                                            render: (_, record) => (<>
                                                                {
                                                                    <>
                                                                        <Select 
                                                                            value={record.status === 0 ? '待审' : record.status === 2 ? '审核通过' : '审核不通过'}
                                                                            options={[{ name: '通过', id: 2 }, { name: '不通过', id: 3 }]}
                                                                            fieldNames={selectfieldNames}
                                                                            onChange={(value) => {
                                                                                PostRecruitmentBookUpdate({
                                                                                    id: record.id,
                                                                                    recruitment_id: id.id,
                                                                                    company_id: record.company_id,
                                                                                    status: value
                                                                                }).then(res => {
                                                                                    actionRef.current.reload()
                                                                                })
                                                                            }}>
                                                                        </Select>
                                                                    </>
                                                                }
                                
                                                            </>),
                                                        },
                                                        {
                                                            title: '操作',
                                                            key: 'option',
                                                            valueType: 'option',
                                                            fixed: 'right',
                                                            render: (_, record, action) => [
                                                                <Button key='1' type='link' onClick={() => {
                                                                }}>移除企业</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>) =>
                                                        GetRecruitmentBookList({
                                                            page: page,
                                                            pagesize: pageSize,
                                                            sort: 'id',
                                                            sortby: 'desc',
                                                            recruitment_id:  id.id
                                                        }).then(res => {
                                                            setList(res.data.recruitmentbooks)
                                                            setTotal(res.data.total)
                                                        })
                                                    }
                                                />
                                            </>
                                        ),
                                    }
                                ]}
                            >
                            </Tabs>
                        </>
                    }

                </Modal>
            </ConfigProvider >
        </>
    );
};



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