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


const PagesMainAdvertisementListCreate: React.FC = ({ dispatch, dictModel, openModel, id }: any) => {
    const formRef = useRef<ProFormInstance>();
    const [openPreview, setOpenPreview] = useState(false);
    const [detail, setDetail] = useState<AdvertisementType.list | 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={1000}
                    onCancel={() => {
                        dispatch({ type: 'openModel/getOpenModal', payload: false })
                    }}
                >
                    <ProForm<AdvertisementType.list >
                        formRef={formRef}
                        request={async () => {
                            if (id) {
                                let res = await GetAdvertareaDetail({ id: id })
                                setDetail(res.data)
                                return res.data;
                            } else {
                                return {
                                    title: '',
                                    cover_img: '',
                                    doc_url: '',
                                    section_id: null,
                                    content: '',
                                    stick_top: 0,
                                    hot: 0,
                                    author: '',
                                    random_show: 1,
                                    disabled_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) => {
                            console.log(values)
                            if (id) {
                                values.id = id;
                                let res = await PostAdvertareaUpdate(values)
                                message.success('提交成功')
                                dispatch({ type: 'openModel/getOpenModal', payload: false })
                            } else {
                                let res = await PostAdvertareaAdd(values)
                                message.success('提交成功')
                                dispatch({ type: 'openModel/getOpenModal', payload: false })
                            }
                        }}
                    >
                        <Row gutter={[16, 16]}>
                            <Col span={12}>
                                <ProFormText
                                    label="广告位置，按照该格式：来源页面广告位名"
                                    name="name"
                                    placeholder="请输入广告位置,如：小程序首页轮播图；小程序首页企业LOGO图"
                                    rules={[{ required: true, message: '请输入广告位置,如：小程序首页轮播图；小程序首页企业LOGO图' }]}
                                />
                            </Col>
                            <Col span={12}>
                                <ProFormText
                                    label="广告位置代码，使用拼音缩写，不要超过十个字母"
                                    name="code"
                                    placeholder="请输入广告位置代码，使用拼音缩写，不要超过十个字母"
                                    rules={[{ required: true, message: '请输入广告位置代码，使用拼音缩写，不要超过十个字母s' }]}
                                />
                            </Col>
                            <Col span={12}>
                                <ProFormDigit label="限制显示广告数" name="ad_num" min={1} rules={[{ required: true, message: '请输入限制显示广告数' }]} />

                            </Col>
                            <Col span={12}>
                                <ProFormDigit label="显示列数" name="cols" min={1} rules={[{ required: true, message: '请输入显示列数' }]} />

                            </Col>
                            <Col span={12}>
                                <ProFormDigit label="广告宽度" name="width" min={1} rules={[{ required: true, message: '请输入广告宽度' }]} />

                            </Col>
                            <Col span={12}>
                                <ProFormDigit label="广告高度" name="height" min={1} rules={[{ required: true, message: '请输入广告高度' }]} />

                            </Col>
                            <Col span={12}>
                                <ProFormDigit label="列间距" name="col_padding" min={1} rules={[{ required: true, message: '请输入列间距' }]} />

                            </Col>
                            <Col span={12}>
                                <ProFormDigit label="行间距" name="row_padding" min={1} rules={[{ required: true, message: '请输入行间距' }]} />
                            </Col>
                            <Col span={12}>
                                <ProFormRadio.Group
                                    name="random_show"
                                    label="随机显示"
                                    request={async () => [
                                        { label: '随机', value: 1 },
                                        { label: '不随机', value: 2 }
                                    ]}
                                    rules={[{ required: true, message: '请选择是否随机显示' }]}
                                />
                            </Col>
                            <Col span={12}>
                                <ProFormRadio.Group
                                    name="disabled_status"
                                    label="禁用状态"
                                    request={async () => [
                                        { label: '正常', value: 1 },
                                        { label: '禁用', value: 2 }
                                    ]}
                                    rules={[{ required: true, message: '请选择禁用状态' }]}
                                />
                            </Col>
                        </Row>
                    </ProForm>
                </Modal>
            </ConfigProvider>
        </>
    );
};



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