
import { useRef, useState, useEffect } from 'react';
import { connect } from '@umijs/max';
import type { ActionType, ProFormInstance } from '@ant-design/pro-components';
import {
    ProFormText,
    ProFormSegmented,
    ProFormTextArea,
    ProForm,
    FormControlRender,
    ProFormRadio,
    ProFormDependency
} from '@ant-design/pro-components';
import { ConfigProvider, Flex, Space, Modal, message, Image, Row, Col, Switch, Form, Typography } from 'antd';
import { PostSysconfigAdd, PostSysconfigUpdate, GetSysconfigDetail } from '@/apis/api';
import RichComponent from '@/components/Common/rich';

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

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

    const [richTxt, setRichTxt] = useState<string | number>(''); // 文章内容

    return (
        <>
            <ConfigProvider
                theme={{
                    token: {
                        colorPrimary: '#4FBE70',
                    },
                    components: {
                        Segmented: {
                            itemSelectedBg: '#19be6e',
                            itemSelectedColor: '#ffffff'
                        },
                    },
                }}
            >
                <Modal
                    open={openPreview}
                    title={id ? '编辑配置项' : '添加配置项'}
                    centered
                    maskClosable={false}
                    footer={null}
                    destroyOnClose
                    width={800}
                    onCancel={() => {
                        dispatch({ type: 'openModel/getOpenModal', payload: false })
                    }}
                >
                    <ProForm<SettingType.system>
                        formRef={formRef}
                        request={async () => {
                            if (id) {
                                let res = await GetSysconfigDetail({ id: id })
                                setDetail(res.data)
                                return res.data;
                            } else {
                                return {
                                    name: '',
                                    value: '',
                                    remark: '',
                                    txt_mode: 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) => {
                            console.log(values)
                            if (id) {
                                values.id = id;
                                let res = await PostSysconfigUpdate(values)
                                message.success('提交成功')
                                dispatch({ type: 'openModel/getOpenModal', payload: false })
                            } else {
                                let res = await PostSysconfigAdd(values)
                                message.success('提交成功')
                                dispatch({ type: 'openModel/getOpenModal', payload: false })
                            }
                        }}
                    >
                        <Row gutter={[16, 16]}>
                            <Col span={16}>
                                <ProFormText
                                    label="配置项名称"
                                    name="name"
                                    placeholder="请输入配置项名称"
                                    rules={[{ required: true, message: '请输入配置项名称' }]}
                                />
                            </Col>
                            <Col span={8}>
                                <ProFormRadio.Group
                                    name="txt_mode"
                                    label="配置内容格式"
                                    request={async () => [
                                        { label: '普通文本', value: 1 },
                                        { label: '富文本', value: 2 }
                                    ]}
                                    rules={[{ required: true, message: '请选择配置内容格式' }]}
                                />
                            </Col>
                            <Col span={24}>
                                <ProFormText
                                    label="备注"
                                    name="remark"
                                    placeholder="请输入备注"
                                    rules={[{ required: true, message: '请输入备注' }]}
                                />
                            </Col>
                            <Col span={24}>
                                <ProFormDependency name={['txt_mode']}>
                                    {({ txt_mode }) => {
                                        return (
                                            <>
                                                {txt_mode == 1 && <ProFormTextArea
                                                    name="value"
                                                    label="配置内容"
                                                    placeholder="请输入配置内容"
                                                    rules={[{ required: true, message: '请输入配置内容' }]}
                                                />
                                                }
                                                {txt_mode == 2 && <Row gutter={[16, 16]}>
                                                    <Col span={24}>
                                                        <Form.Item
                                                            name='value'
                                                            label="配置内容"
                                                            rules={[{ required: true, message: '请输入配置内容' }]}
                                                        >
                                                            <FormControlRender>
                                                                {() => {
                                                                    return (
                                                                        <ProFormDependency name={['value']} >
                                                                            {({ value }, form) => {
                                                                                return (
                                                                                    <RichComponent placeholder="请输入配置内容" defaultValue={value}
                                                                                        onChange={(value) => {
                                                                                            setRichTxt(value)
                                                                                            form.formRef.current.setFieldsValue({
                                                                                                value: value
                                                                                            })
                                                                                        }}></RichComponent>
                                                                                );
                                                                            }}
                                                                        </ProFormDependency>
                                                                    );
                                                                }}
                                                            </FormControlRender>
                                                        </Form.Item>
                                                    </Col>
                                                </Row>
                                                }
                                            </>
                                        );
                                    }}
                                </ProFormDependency>
                            </Col>
                        </Row>







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



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