
import { useRef, useState, useEffect } from 'react';
import { connect } from '@umijs/max';
import type { ActionType, ProFormInstance } from '@ant-design/pro-components';
import {
    ProFormText,
    ProFormDateTimeRangePicker,
    ProFormDependency,
    FormControlRender,
    ProForm,
    ProFormRadio
} from '@ant-design/pro-components';
import { ConfigProvider, Flex, Space, Modal, message, Form, Row, Col, Image } from 'antd';
import { PostRecruitmentUpdate, PostRecruitmentAdd, GetCompanyInfo, GetRecruitmentDetail } from '@/apis/api';
import MapComponent from '@/components/Common/map';
import RichComponent from '@/components/Common/rich';
import UploadModel from '@/components/Common/upload';
import { Imageprefix } from '@/constants';


import dayjs from "dayjs";
const PagesMainFairListCreate: React.FC = ({ dispatch, dictModel, openModel, id }: any) => {
    const formRef = useRef<ProFormInstance>();
    const [openPreview, setOpenPreview] = useState(false);
    const [detail, setDetail] = useState<FairType.form | null>(null)


    const [richTxt, setRichTxt] = useState<string | number>(''); // 招聘会内容
    const [mapSwitch, setMapSwitch] = useState<boolean>(false); // 选择地图

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

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

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

                <Modal
                    open={openPreview}
                    title={id ? '编辑招聘会' : '添加招聘会'}
                    centered
                    maskClosable={false}
                    footer={null}
                    destroyOnClose
                    width={1000}
                    onCancel={() => {
                        dispatch({ type: 'openModel/getOpenModal', payload: false })
                    }}
                >
                    <ProForm<FairType.form>
                        formRef={formRef}
                        request={async () => {
                            if (id) {
                                let res = await GetRecruitmentDetail({ id: id.id })
                                res.data.dateRange = [res.data.open_date, res.data.close_date ? res.data.close_date : null];
                                setUploadedFilephotoName(res.data.photo)
                                return res.data;
                            } else {
                                setUploadedFilephotoName('')
                                return {
                                    title: '',
                                    content: '',
                                    open_date: '',
                                    close_date: '',
                                    address: '',
                                    status: 0,
                                    photo: '',
                                    dateRange: []
                                }
                            }
                        }}
                        submitter={{
                            searchConfig: {
                                resetText: '取消',
                                submitText: '保存',
                            },
                            render: (_, dom) => { return <Flex justify='flex-end'> <Space>{dom}</Space></Flex> },
                            onReset: () => {
                                setDetail(null)
                                setOpenPreview(false)
                            }
                        }}
                        onFinish={async (values) => {
                            values.open_date = values.dateRange && values.dateRange.length > 0 && values.dateRange[0] ? values.dateRange[0] : 0;
                            values.close_date = values.dateRange && values.dateRange.length > 0 && values.dateRange[1] ? values.dateRange[1] : 0;
                            values.photo = uploadedFilephotoName ? uploadedFilephotoName : '';
                            delete values.dateRange;
                            if (id) {
                                values.id = id.id;
                                let res = await PostRecruitmentUpdate(values)
                                message.success('提交成功')
                                dispatch({ type: 'openModel/getOpenModal', payload: false })
                            } else {
                                let res = await PostRecruitmentAdd(values)
                                message.success('提交成功')
                                dispatch({ type: 'openModel/getOpenModal', payload: false })
                            }
                        }}
                    >
                        <Row gutter={[16, 16]}>
                            <Col span={24}>
                                <UploadModel multiple={false} form_name="photo" image_length={1} uploadTxt="上传招聘会照片" image_type={3} imageUrl={uploadedFilephotoName} onUploadComplete={handleFileUploadedphoto}></UploadModel>
                            </Col>
                            <Col span={12}>
                                <ProFormText
                                    name="title"
                                    label="招聘会主题"
                                    placeholder="请输入招聘会主题"
                                    rules={[{ required: true, message: '请输入招聘会主题' }
                                    ]}
                                />
                            </Col>
                            <Col span={12}>
                                <ProFormDateTimeRangePicker
                                    name="dateRange"
                                    label="选择有效的日期时间范围"
                                    fieldProps={{
                                        format: 'YYYY-MM-DD HH:mm:ss'
                                    }}
                                    rules={[{ required: true, message: '请选择有效的时间范围' }]}
                                />
                            </Col>

                            {/* <Col span={24}>
                                <Switch checked={mapSwitch} checkedChildren='地图已显示' unCheckedChildren="地图已关闭" onChange={(val) => {
                                    setMapSwitch(val)
                                }} />
                            </Col> */}
                            <Col span={8}>
                                <ProFormText
                                    label="详细地址"
                                    name="address"
                                    placeholder="请输入详细地址"
                                    rules={[{ required: true, message: '请输入详细地址' }]}
                                />
                            </Col>
                            {/* {
                                mapSwitch && <Col span={24}>
                                    <MapComponent lat={0} lng={0} getLoc={(values) => {
                                        formRef.current.setFieldsValue({
                                            address: values.poiaddress
                                        })
                                        setMapSwitch(false)
                                    }}></MapComponent>
                                </Col>
                            } */}
                            <Col span={6}>
                                <ProFormRadio.Group
                                    name="status"
                                    label="招聘会状态"
                                    fieldProps={{
                                        buttonStyle: 'solid'
                                    }}
                                    options={[
                                        { label: '开启', value: 1 },
                                        { label: '结束', value: 2 }
                                    ]}
                                />

                            </Col>

                            <Col span={24}>
                                <Form.Item
                                    name='content'
                                    label="招聘会内容"
                                    rules={[{ required: true }]}
                                >
                                    <FormControlRender>
                                        {() => {
                                            return (
                                                <ProFormDependency name={['content']} >
                                                    {({ content }, form) => {
                                                        return (
                                                            <RichComponent placeholder="请输入招聘会内容" defaultValue={content}
                                                                onChange={(value) => {
                                                                    setRichTxt(value)
                                                                    form.formRef.current.setFieldsValue({
                                                                        content: value
                                                                    })
                                                                }}></RichComponent>
                                                        );
                                                    }}
                                                </ProFormDependency>
                                            );
                                        }}
                                    </FormControlRender>
                                </Form.Item>


                            </Col>
                        </Row>
                    </ProForm>
                </Modal>
            </ConfigProvider >
        </>
    );
};



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



