
import { useRef, useState, useEffect } from 'react';
import { connect } from '@umijs/max';
import type { ActionType, ProFormInstance } from '@ant-design/pro-components';
import {
    ProFormText,
    ProFormSegmented,
    ProFormSelect,
    ProForm,
    FormControlRender,
    ProFormDependency,
    ProFormSwitch,
    ProFormRadio,
    ProFormDatePicker
} from '@ant-design/pro-components';
import { ConfigProvider, Flex, Space, Modal, message, Image, Row, Col, Switch, Form, Typography, Divider, Radio } from 'antd';

import { isArrayOfType } from '@/utils/dataHelper';


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

import { PostTalentsinfoAdd, PostTalentsinfoUpdate, GetTalentsinfoDetail } from '@/apis/api';

const PagesMainInformationArticleCreate: React.FC = ({ dispatch, dictModel, openModel, id }: any) => {
    const formRef = useRef<ProFormInstance>();
    const [openPreview, setOpenPreview] = useState(false);
    const [detail, setDetail] = useState<InformationType.article | null>(null)

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


    useEffect(() => {
        dispatch({ type: 'dictModel/getList', payload: { code: 2006, type: 'setEducationList' } })

    }, [])


    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<InformationType.article>
                        formRef={formRef}
                        request={async () => {
                            if (id) {
                                let res = await GetTalentsinfoDetail({ id: id })
                                res.data.section_arr = [res.data.section_name]

                                setDetail(res.data)
                                return res.data;
                            } else {
                                setDetail(null)
                                return {
                                    "code": "",
                                    "company_name": "",
                                    "household_num": 1,
                                    "name": "",
                                    "gender": "",
                                    "school_or_institution": "",
                                    "major": "",
                                    "id_number": "",
                                    "mobile": "",
                                    "do_time": null,
                                    "remark": "",
                                    "status": 1
                                }
                            }
                        }}
                        submitter={{
                            searchConfig: {
                                resetText: '取消',
                                submitText: '保存',
                            },
                            render: (_, dom) => { return <Flex justify='flex-end'> <Space>{dom}</Space></Flex> },
                            onReset: () => {
                                setDetail(null)
                                dispatch({ type: 'openModel/getOpenModal', payload: false })
                            }
                        }}
                        onFinish={async (values) => {

                            if (id) {
                                values.id = id;
                            
                                let res = await PostTalentsinfoUpdate(values)
                                message.success('提交成功')
                                dispatch({ type: 'openModel/getOpenModal', payload: false })
                            } else {
                                let res = await PostTalentsinfoAdd(values)
                                message.success('提交成功')
                                dispatch({ type: 'openModel/getOpenModal', payload: false })
                            }
                        }}
                    >
                        <Row gutter={[16, 16]}>
                            <Col span={24}>
                                <ProFormText
                                    name="code"
                                    label="户口卡编号"
                                    placeholder="请输入户口卡编号"
                                    rules={[{ required: true, message: '请输入户口卡编号' }]}
                                />
                            </Col>
                            {/* <Col span={4}>
                                <ProFormRadio.Group
                                    name="gender"
                                    label="是否是主办人"
                                    request={async () => [
                                        { label: '是', value: 1 },
                                        { label: '否', value: 2 }
                                    ]}
                                    rules={[{ required: true, message: '请选择是否是主办人' }]}
                                />
                            </Col> */}
                            <Col span={16}>
                                <ProFormText
                                    name="name"
                                    label="姓名"
                                    placeholder="请输入姓名"
                                    rules={[{ required: true, message: '请输入姓名' }]}

                                />
                            </Col>
                            <Col span={4}>
                                <ProFormRadio.Group
                                    name="gender"
                                    label="性别"
                                    request={async () => [
                                        { label: '男', value: '男' },
                                        { label: '女', value: '女' }
                                    ]}
                                    rules={[{ required: true, message: '请选择性别' }]}

                                />
                            </Col>
                            {/* <Col span={4}>
                                <ProFormRadio.Group
                                    name="gender"
                                    label="是否是随迁人"
                                    request={async () => [
                                        { label: '是', value: 1 },
                                        { label: '否', value: 2 }
                                    ]}
                                    rules={[{ required: true, message: '请选择是否是随迁人' }]}
                                />
                            </Col> */}
                            <Col span={14}>
                                <ProFormSelect
                                    name="education"
                                    label="选择主办人员"
                                    fieldProps={{
                                        width: '100%',
                                        fieldNames: selectfieldNames
                                    }}
                                    placeholder='请选择主办人员'
                                    options={dictModel.educationList}
                                />
                            </Col>
                            <Col span={6}>
                                <ProFormDatePicker
                                    name="do_time"
                                    label="入户时间"
                                    placeholder='请选择入户时间'
                                    width={'lg'}
                                    rules={[{ required: true, message: '请选择入户时间' }]}
                                />
                            </Col>

                            <Col span={8}>
                                <ProFormSelect
                                    name="education"
                                    label="学历"
                                    fieldProps={{
                                        fieldNames: selectfieldNames
                                    }}
                                    placeholder='请选择学历'
                                    options={dictModel.educationList}
                                    rules={[{ required: true, message: '请选择学历' }]}

                                />
                            </Col>
                            <Col span={8}>
                                <ProFormText
                                    name="mobile"
                                    label="联系电话"
                                    placeholder="请输入联系电话"
                                    rules={[{ required: true, message: '请输入联系电话' }]}

                                />
                            </Col>

                        </Row>

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



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