import { useRef, useState, useEffect } from 'react';
import { connect } from '@umijs/max';
import type { ActionType, ProFormInstance } from '@ant-design/pro-components';
import {
    ProFormText,
    ProFormSegmented,
    ProFormRadio,
    ProForm
} from '@ant-design/pro-components';
import { ConfigProvider, Flex, Space, Modal, message, Image, Row, Col, Switch } from 'antd';
import { PostDictAdd, PostDictUpdate, GetDictDetail } from '@/apis/api';




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

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

    return (
        <>
            <ConfigProvider
                theme={{
                    token: {
                        colorPrimary: '#4FBE70',
                    }, components: {
                        Segmented: {
                            itemSelectedBg: '#19be6e',
                            itemSelectedColor: '#ffffff'
                        },
                    },
                }}
            >
                <Modal
                    open={openPreview}
                    title={id ? '编辑字典' : '添加字典'}
                    centered
                    maskClosable={false}
                    footer={null}
                    destroyOnClose
                    width={600}
                    onCancel={() => {
                        dispatch({ type: 'openModel/getOpenModal', payload: false })
                    }}
                >
                    <ProForm<SettingType.dict>
                        formRef={formRef}
                        request={async () => {
                            if (id) {
                                if (id.nextlevel) {
                                    setDetail(null)
                                    return {
                                        code: '',
                                        parent_id: id.nextlevel,
                                        name: '',
                                        value: '',
                                        display: 'S',
                                        childs: null,
                                    };
                                } else {
                                    let res = await GetDictDetail({ id: id.id })
                                    setDetail(res.data)
                                    return res.data;
                                }
                            } else {
                                setDetail(null)
                                return {
                                    code: '',
                                    parent_id: -1,
                                    name: '',
                                    value: '',
                                    display: 'S',
                                    childs: null,
                                }
                            }
                        }}
                        submitter={{
                            searchConfig: {
                                resetText: '取消',
                                submitText: '保存',
                            },
                            render: (_, dom) => { return <Flex justify='flex-end'> <Space>{dom}</Space></Flex> },
                            onReset: () => {
                                setDetail(null)
                                setOpenPreview(false)
                            }
                        }}
                        onFinish={async (values) => {
                            if (id.nextlevel) {
                                values.parent_id = id.nextlevel;
                            } else if (detail && detail.id) {
                                values.parent_id = detail.parent_id
                            } else {
                                values.parent_id = -1
                            }
                            values.childs = null
                            console.log(values)
                            if (detail) {
                                values.id = id.id;
                                let res = await PostDictUpdate(values)
                                message.success('提交成功')
                                dispatch({ type: 'openModel/getOpenModal', payload: false })
                            } else {
                                let res = await PostDictAdd(values)
                                message.success('提交成功')
                                dispatch({ type: 'openModel/getOpenModal', payload: false })
                            }
                        }}
                    >
                        <ProFormText
                            label="字典名"
                            name="name"
                            placeholder="请输入字典名"
                            rules={[{ required: true, message: '请输入字典名' }]}
                        />

                        <ProFormText
                            label="字典标识名,字典标识名为数字，带上上级的标识名，一般顶级为四位数字，例如：2009，一级为八位，例如：20090001，20090002，以此类推"
                            name="code"
                            placeholder="请输入字典标识名"
                            rules={[{ required: true, message: '请输入字典标识名' }]}
                        />
                        <ProFormText
                            label="字典代码值"
                            name="value"
                            placeholder="请输入字典代码值"
                        />
                        <ProFormRadio.Group
                            name="display"
                            label="是否显示"
                            request={async () => [
                                { label: '是', value: 'S' },
                                { label: '否', value: 'H' }
                            ]}
                            rules={[{ required: true, message: '请选择是否显示' }]}
                        />


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



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