
import { useRef, useState, useEffect } from 'react';
import { connect } from '@umijs/max';
import type { ActionType, ProFormInstance } from '@ant-design/pro-components';
import {
    ProFormText,
    ProFormSelect,
    ProForm
} from '@ant-design/pro-components';
import { ConfigProvider, Flex, Space, Modal, message } from 'antd';
import { PostCompanyDepartmentAdd, PostCompanyDepartmentEdit, getCompanyList, GetCompanyDepartmentInfo, GetCompanyInfo } from '@/apis/api';

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

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

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

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

                <Modal
                    open={openPreview}
                    title={id ? '编辑部门' : '添加部门'}
                    centered
                    maskClosable={false}
                    footer={null}
                    destroyOnClose
                    width={600}
                    onCancel={() => {
                        dispatch({ type: 'openModel/getOpenModal', payload: false })
                    }}
                >
                    <ProForm<CompanyType.Department>
                        formRef={formRef}
                        request={async () => {
                            if (id) {
                                let res = await GetCompanyDepartmentInfo({ id: id })
                                return res.data;
                            } else {
                                return {
                                    name: '',
                                    company_id: sessionStorage.getItem('company_info') ? JSON.parse(sessionStorage.getItem('company_info')).id : null,
                                    contact: sessionStorage.getItem('company_info') ? JSON.parse(sessionStorage.getItem('company_info')).contact : '',
                                    phone: sessionStorage.getItem('company_info') ? JSON.parse(sessionStorage.getItem('company_info')).phone : '',
                                    mobile: sessionStorage.getItem('company_info') ? JSON.parse(sessionStorage.getItem('company_info')).mobile : '',
                                    email: sessionStorage.getItem('company_info') ? JSON.parse(sessionStorage.getItem('company_info')).email : ''
                                }
                            }
                        }}
                        submitter={{
                            searchConfig: {
                                resetText: '取消',
                                submitText: '保存',
                            },
                            render: (_, dom) => { return <Flex justify='flex-end'> <Space>{dom}</Space></Flex> },
                            onReset: () => {
                                setDetail(null)
                                setOpenPreview(false)
                            }
                        }}
                        onFinish={async (values) => {
                            console.log(values)
                            if (id) {
                                values.id = id;
                                let res = await PostCompanyDepartmentEdit(values)
                                message.success('提交成功')
                                dispatch({ type: 'openModel/getOpenModal', payload: false })
                            } else {
                                let res = await PostCompanyDepartmentAdd(values)
                                message.success('提交成功')
                                dispatch({ type: 'openModel/getOpenModal', payload: false })
                            }
                        }}
                    >
                        
                        <ProFormSelect
                            showSearch
                            name="company_id"
                            label="选择企业"
                            placeholder="请选择企业"
                            fieldProps={{
                                fieldNames: selectfieldNames,
                                defaultValue: sessionStorage.getItem('company_info') ? JSON.parse(sessionStorage.getItem('company_info')).full_name : '',
                                disabled: sessionStorage.getItem('company_info') ? true : false
                            }}
                            onChange={(value) => {
                                GetCompanyInfo({ id: value }).then(res => {
                                    formRef.current?.setFieldsValue({
                                        contact: sessionStorage.getItem('company_info') ? JSON.parse(sessionStorage.getItem('company_info')).contact : res.data.contact,
                                        phone: sessionStorage.getItem('company_info') ? JSON.parse(sessionStorage.getItem('company_info')).phone :  res.data.phone,
                                        mobile: sessionStorage.getItem('company_info') ? JSON.parse(sessionStorage.getItem('company_info')).mobile :  res.data.mobile,
                                        email: sessionStorage.getItem('company_info') ? JSON.parse(sessionStorage.getItem('company_info')).email :  res.data.email
                                    })
                                })
                            }}
                            request={(keyword) =>
                                getCompanyList({ page: 1, pagesize: 100, keyword: keyword.keyWords }).then(res => {
                                    return res.data.list;
                                })
                            }
                        />
                        <ProFormText
                            name="name"
                            label="部门名称"
                            placeholder="请输入部门名称"
                            rules={[{ required: true, message: '请输入部门名称' }
                            ]}
                        />
                        <ProFormText
                            name="contact"
                            label="联系人"
                            placeholder="请输入联系人"
                            rules={[{ required: true, message: '请输入联系人' }
                            ]}
                        />
                        <ProFormText
                            name="phone"
                            label="联系电话"
                            placeholder="请输入联系电话"
                            rules={[{ required: true, message: '请输入联系电话' }
                            ]}
                        />
                        <ProFormText
                            name="mobile"
                            label="手机号"
                            placeholder="请输入手机号"
                            rules={[{ required: true, message: '请输入手机号' }
                            ]}
                        />
                        <ProFormText
                            name="email"
                            label="电子邮箱"
                            placeholder="请输入电子邮箱"
                            rules={[{ required: true, message: '请输入电子邮箱' }
                            ]}
                        />

                    </ProForm>

                </Modal>
            </ConfigProvider>

        </>



    );
};



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